Javascript json中的信息窗口未打开
我将JSON数据显示为choropleth映射加上三组标记。我正在跟踪调查。我没有在控制台中被抛出任何错误,因此我认为语法可能是正确的,但不是我提供的 我做错了什么 HTML: JavaScript:Javascript json中的信息窗口未打开,javascript,json,google-maps,google-maps-api-3,infowindow,Javascript,Json,Google Maps,Google Maps Api 3,Infowindow,我将JSON数据显示为choropleth映射加上三组标记。我正在跟踪调查。我没有在控制台中被抛出任何错误,因此我认为语法可能是正确的,但不是我提供的 我做错了什么 HTML: JavaScript: $(document).ready(function() { var layer = "toner-lite"; var map = new google.maps.Map(document.getElementById("map"), {
$(document).ready(function() {
var layer = "toner-lite";
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(39.290385, -76.612189),
zoom: 10,
mapTypeId: layer,
mapTypeControlOptions: {
mapTypeIds: [layer, google.maps.MapTypeId.HYBRID]
}
});
map.mapTypes.set(layer, new google.maps.StamenMapType(layer));
//load data into map
var localLayer = new google.maps.Data();
localLayer.loadGeoJson('JSON/local.geojson');
localLayer.setMap(map);
var localInfoWindow = new google.maps.InfoWindow({
content: "I am a local level jail or prison"
});
google.maps.event.addListener(localLayer, 'click', function(){
localInfoWindow.open(map, localLayer);
});
var stateLayer = new google.maps.Data();
stateLayer.loadGeoJson('JSON/state.geojson');
stateLayer.setMap(map);
var stateInfoWindow = new google.maps.InfoWindow({
content: "I am a state level jail or prison"
});
google.maps.event.addListener(stateLayer, 'click', function(){
stateInfoWindow.open(map, stateLayer);
});
var federalLayer = new google.maps.Data();
federalLayer.loadGeoJson('JSON/federal.geojson');
federalLayer.setMap(map);
var federalInfoWindow = new google.maps.InfoWindow({
content: "I am a federal level jail or prison"
});
google.maps.event.addListener(federalLayer, 'click', function(){
federalInfoWindow.open(map, federalLayer);
})
var marylandLayer = new google.maps.Data();
marylandLayer.loadGeoJson('JSON/maryland.geojson');
//give the map style
marylandLayer.setStyle(function(feature) {
return {
fillColor: getColor(feature.getProperty('Difference')), // call function to get color for state based on the COLI (Cost of Living Index)
fillOpacity: 0.9,
strokeColor: '#FFFFFF',
strokeWeight: 1,
zIndex: 1
};
});
//set layer to map
marylandLayer.setMap(map)
//get some color
function getColor(Difference) {
return Difference >= 94 ? '#b10026' :
Difference > 76 ? '#e31a1c' :
Difference > 58 ? '#fc4e2a' :
Difference > 38 ? '#fd8d3c' :
Difference > 20 ? '#feb24c' :
Difference > 7 ? '#fed976' :
Difference > 1 ? '#ffffb2' :
Difference > -1 ? '#FFFFFF' :
'#000000';
};
// Add mouseover and mouse out styling for the GeoJSON Maryland data
marylandLayer.addListener('mouseover', function(e) {
marylandLayer.overrideStyle(e.feature, {
strokeColor: '#2a2a2a',
strokeWeight: 2,
zIndex: 2
});
});
marylandLayer.addListener('mouseout', function(e) {
marylandLayer.revertStyle();
});
var polygonInfoWindow = new google.maps.InfoWindow({
content: "I am a polygon"
});
google.maps.event.addListener(marylandLayer, 'click', function(){
polygonInfoWindow.open(map, marylandLayer);
});
});
单击标记时,需要定位
InfoWindow
。可以在单击处理程序中执行此操作
google.maps.event.addListener(localLayer, 'click', function(event){
localInfoWindow.setPosition(event.feature.getGeometry().get());
localInfoWindow.open(map, localLayer);
});
这同样适用于其余层。这会引发错误
uncaughttypeerror:无法为local.json
标记读取未定义的属性“getGeometry”,但不能读取其他标记和maryland.json
polygon。示例代码:var localLayer=new google.maps.Data();localLayer.loadGeoJson('JSON/local.geojson');setMap(map);var localinfo window=new google.maps.InfoWindow({content:“我是地方级监狱或监狱”});google.maps.event.addListener(localLayer,'click',function(){localinfo.setPosition(event.feature.getGeometry().get());localinfo.open(map,localLayer);})代码>您缺少函数(事件)
中的事件
参数哇,我需要离开屏幕。谢谢你的帮助!
$(document).ready(function() {
var layer = "toner-lite";
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(39.290385, -76.612189),
zoom: 10,
mapTypeId: layer,
mapTypeControlOptions: {
mapTypeIds: [layer, google.maps.MapTypeId.HYBRID]
}
});
map.mapTypes.set(layer, new google.maps.StamenMapType(layer));
//load data into map
var localLayer = new google.maps.Data();
localLayer.loadGeoJson('JSON/local.geojson');
localLayer.setMap(map);
var localInfoWindow = new google.maps.InfoWindow({
content: "I am a local level jail or prison"
});
google.maps.event.addListener(localLayer, 'click', function(){
localInfoWindow.open(map, localLayer);
});
var stateLayer = new google.maps.Data();
stateLayer.loadGeoJson('JSON/state.geojson');
stateLayer.setMap(map);
var stateInfoWindow = new google.maps.InfoWindow({
content: "I am a state level jail or prison"
});
google.maps.event.addListener(stateLayer, 'click', function(){
stateInfoWindow.open(map, stateLayer);
});
var federalLayer = new google.maps.Data();
federalLayer.loadGeoJson('JSON/federal.geojson');
federalLayer.setMap(map);
var federalInfoWindow = new google.maps.InfoWindow({
content: "I am a federal level jail or prison"
});
google.maps.event.addListener(federalLayer, 'click', function(){
federalInfoWindow.open(map, federalLayer);
})
var marylandLayer = new google.maps.Data();
marylandLayer.loadGeoJson('JSON/maryland.geojson');
//give the map style
marylandLayer.setStyle(function(feature) {
return {
fillColor: getColor(feature.getProperty('Difference')), // call function to get color for state based on the COLI (Cost of Living Index)
fillOpacity: 0.9,
strokeColor: '#FFFFFF',
strokeWeight: 1,
zIndex: 1
};
});
//set layer to map
marylandLayer.setMap(map)
//get some color
function getColor(Difference) {
return Difference >= 94 ? '#b10026' :
Difference > 76 ? '#e31a1c' :
Difference > 58 ? '#fc4e2a' :
Difference > 38 ? '#fd8d3c' :
Difference > 20 ? '#feb24c' :
Difference > 7 ? '#fed976' :
Difference > 1 ? '#ffffb2' :
Difference > -1 ? '#FFFFFF' :
'#000000';
};
// Add mouseover and mouse out styling for the GeoJSON Maryland data
marylandLayer.addListener('mouseover', function(e) {
marylandLayer.overrideStyle(e.feature, {
strokeColor: '#2a2a2a',
strokeWeight: 2,
zIndex: 2
});
});
marylandLayer.addListener('mouseout', function(e) {
marylandLayer.revertStyle();
});
var polygonInfoWindow = new google.maps.InfoWindow({
content: "I am a polygon"
});
google.maps.event.addListener(marylandLayer, 'click', function(){
polygonInfoWindow.open(map, marylandLayer);
});
});
google.maps.event.addListener(localLayer, 'click', function(event){
localInfoWindow.setPosition(event.feature.getGeometry().get());
localInfoWindow.open(map, localLayer);
});