Google 地图 API v3 信息 Window setContent 语法错误
Google Maps API v3 Info Window setContent syntax error
我正在尝试设置信息的内容 window,但在访问 JSON 对象时遇到语法错误。
Example from elsewhere on Stack Overflow I am following
JavaScript 片段:
var localLayer = new google.maps.Data();
localLayer.loadGeoJson('JSON/local.geojson');
localLayer.setMap(map);
var localInfoWindow = new google.maps.InfoWindow({
var address = localLayer.features.properties.Address;
content: "<h3>" + address + "</h3>"
});
google.maps.event.addListener(localLayer, 'click', function(event){
localInfoWindow.setPosition(event.feature.getGeometry().get());
localInfoWindow.open(map, localLayer);
});
我做错了什么?
JSON 片段:
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "OBJECTID": 1, "Address": "14300 McMullen Highway SW", "City": "Cumberland", "State": "MD", "Zip_Code": 21502, "Type": "Detention Center", "Agency_Nam": "Allegany County Detention Center", "County": "Allegany" }, "geometry": { "type": "Point", "coordinates": [ -78.823195987258302, 39.598971947812366 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 2, "Address": "131 Jennifer Road", "City": "Annapolis", "State": "MD", "Zip_Code": 21401, "Type": "Detention Center", "Agency_Nam": "Anne Arundel County Detention Center", "County": "Anne Arundel" }, "geometry": { "type": "Point", "coordinates": [ -76.530041483218611, 38.988903980495373 ] } }, . . .
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Maryland Prisoner Map</title>
<!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--Google Maps API-->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<!--Stamen Basemaps-->
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
<!--CSS-->
<link href="style.css" rel="stylesheet" type="text/css">
<!--JavaScript-->
<script src="script.js" type="text/javascript"></script>
</head>
<body class="page-wrap">
<h1 id="header">Maryland Prisoner Map</h1>
<p></p>
<div id="map"></div>
</body>
</html>
CSS:
#header {
text-align: center;
}
#map {
height: 450px;
width: 80%;
margin: 0 auto;
border: 1px solid black;
box-shadow: 2px 2px 1px 2px gray;
}
* {
margin: 0;
}
html, body {
height: 100%;
}
JavaScript:
$(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({
var address = localLayer.features.properties.Address;
content: "<h3>" + address + "</h3>"
});
google.maps.event.addListener(localLayer, 'click', function(event){
localInfoWindow.setPosition(event.feature.getGeometry().get());
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(event){
stateInfoWindow.setPosition(event.feature.getGeometry().get());
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(event){
federalInfoWindow.setPosition(event.feature.getGeometry().get());
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: marylandLayer.features.properties.Difference
});
google.maps.event.addListener(marylandLayer, 'click', function(event){
polygonInfoWindow.setPosition(event.feature.getGeometry().get());
polygonInfoWindow.open(map, marylandLayer);
});
});
您需要将内容加载到 'click' 层侦听器内的信息窗口中。在该函数内 evt
是对该功能的引用,您可以调用 getProperty
方法来访问该功能的属性:
localLayer.addListener('click', function (evt) {
var address = evt.feature.getProperty("Address");
localInfoWindow.setContent("<h3>" + address + "</h3>");
localInfoWindow.setPosition(evt.feature.getGeometry().get());
localInfoWindow.open(map);
});
我正在尝试设置信息的内容 window,但在访问 JSON 对象时遇到语法错误。
Example from elsewhere on Stack Overflow I am following
JavaScript 片段:
var localLayer = new google.maps.Data();
localLayer.loadGeoJson('JSON/local.geojson');
localLayer.setMap(map);
var localInfoWindow = new google.maps.InfoWindow({
var address = localLayer.features.properties.Address;
content: "<h3>" + address + "</h3>"
});
google.maps.event.addListener(localLayer, 'click', function(event){
localInfoWindow.setPosition(event.feature.getGeometry().get());
localInfoWindow.open(map, localLayer);
});
我做错了什么?
JSON 片段:
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "OBJECTID": 1, "Address": "14300 McMullen Highway SW", "City": "Cumberland", "State": "MD", "Zip_Code": 21502, "Type": "Detention Center", "Agency_Nam": "Allegany County Detention Center", "County": "Allegany" }, "geometry": { "type": "Point", "coordinates": [ -78.823195987258302, 39.598971947812366 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 2, "Address": "131 Jennifer Road", "City": "Annapolis", "State": "MD", "Zip_Code": 21401, "Type": "Detention Center", "Agency_Nam": "Anne Arundel County Detention Center", "County": "Anne Arundel" }, "geometry": { "type": "Point", "coordinates": [ -76.530041483218611, 38.988903980495373 ] } }, . . .
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Maryland Prisoner Map</title>
<!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--Google Maps API-->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<!--Stamen Basemaps-->
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
<!--CSS-->
<link href="style.css" rel="stylesheet" type="text/css">
<!--JavaScript-->
<script src="script.js" type="text/javascript"></script>
</head>
<body class="page-wrap">
<h1 id="header">Maryland Prisoner Map</h1>
<p></p>
<div id="map"></div>
</body>
</html>
CSS:
#header {
text-align: center;
}
#map {
height: 450px;
width: 80%;
margin: 0 auto;
border: 1px solid black;
box-shadow: 2px 2px 1px 2px gray;
}
* {
margin: 0;
}
html, body {
height: 100%;
}
JavaScript:
$(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({
var address = localLayer.features.properties.Address;
content: "<h3>" + address + "</h3>"
});
google.maps.event.addListener(localLayer, 'click', function(event){
localInfoWindow.setPosition(event.feature.getGeometry().get());
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(event){
stateInfoWindow.setPosition(event.feature.getGeometry().get());
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(event){
federalInfoWindow.setPosition(event.feature.getGeometry().get());
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: marylandLayer.features.properties.Difference
});
google.maps.event.addListener(marylandLayer, 'click', function(event){
polygonInfoWindow.setPosition(event.feature.getGeometry().get());
polygonInfoWindow.open(map, marylandLayer);
});
});
您需要将内容加载到 'click' 层侦听器内的信息窗口中。在该函数内 evt
是对该功能的引用,您可以调用 getProperty
方法来访问该功能的属性:
localLayer.addListener('click', function (evt) {
var address = evt.feature.getProperty("Address");
localInfoWindow.setContent("<h3>" + address + "</h3>");
localInfoWindow.setPosition(evt.feature.getGeometry().get());
localInfoWindow.open(map);
});