Infowindow数据不显示从JSON在谷歌地图上
Infowindow Data is not showing from JSON on Google Map
我使用了$getJSON方法来调用数据。标记显示在地图上完美,但当我点击标记它不显示值。所以,这是我的JSON数据,将在一个服务器,但我给的链接和JSON数据的一些代码随着我的HTML和JavaScript。
var map,infowindow;
function initialize() {
var mapProp = {
center: new google.maps.LatLng(28.003389000000, -82.429500000000),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mapProp);
$.getJSON('js/file.json', function (json1) {
$.each(json1.ResponseData, function (key, data) {
var latLng = new google.maps.LatLng(data.CoordinateY, data.CoordinateX),
marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.NatureId
});
});
var clicker = addClicker(marker, data.NatureId);
});
function addClicker(marker, content) {
google.maps.event.addListener(marker, 'click', function() {
if (infowindow) {infowindow.close();}
infowindow = new google.maps.InfoWindow({content: content});
infowindow.open(map, marker);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
<script type="text/javascript" src = "http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map" style="border: 2px solid #3872ac;"></div>
和以下是json文件代码。
{
"OpperationErrorMsg":"",
"IsSuccess":true,
"ResultId":1000,
"Timestamp":"2016-10-12T18:00:07.0232702Z",
"Echo":null,
"InSandbox":true,
"DebugMessages":[
],
"MissingDetails":[
],
"ResponseData":[
{
"CallTimeLocal":"2016-10-10T06:28:48.7330000",
"IncidentId":3374,
"IncidentNumber":"HC2016004034",
"CallTime":"2016-10-10T10:28:48.7330000",
"ElapsedSeconds":0,
"Location":"2712 E HANNA AVE",
"BuildingName":null,
"BuildingNumber":null,
"NatureId":6743,
"FirePriorityId":1,
"CoordinateX":-82.429500000000,
"CoordinateY":28.003389000000
},
{
"CallTimeLocal":"2016-10-10T11:28:36.7000000",
"IncidentId":3382,
"IncidentNumber":"HC2016004042",
"CallTime":"2016-10-10T15:28:36.7000000",
"ElapsedSeconds":0,
"Location":"1220 APOLLO BEACH BLVD S",
"BuildingName":"Apollo Beach Marina",
"BuildingNumber":null,
"NatureId":8035,
"FirePriorityId":1,
"CoordinateX":-82.422369000000,
"CoordinateY":27.781254000000
},
{
"CallTimeLocal":"2016-10-10T14:29:59.8830000",
"IncidentId":3387,
"IncidentNumber":"HC2016004047",
"CallTime":"2016-10-10T18:29:59.8830000",
"ElapsedSeconds":0,
"Location":"9600 SHELDONWOOD RD",
"BuildingName":null,
"BuildingNumber":null,
"NatureId":6420,
"FirePriorityId":12,
"CoordinateX":-82.580530000000,
"CoordinateY":28.034779000000
},
{
"CallTimeLocal":"2016-10-10T15:27:37.7270000",
"IncidentId":3389,
"IncidentNumber":"HC2016004049",
"CallTime":"2016-10-10T19:27:37.7270000",
"ElapsedSeconds":0,
"Location":"4691 GALLAGHER RD",
"BuildingName":"Strawberry Crest High School",
"BuildingNumber":null,
"NatureId":7873,
"FirePriorityId":2,
"CoordinateX":-82.236450000000,
"CoordinateY":28.021233000000
}
],
"CurrentStatusData":null
}
这里是想要显示建筑物的名称,位置,当点击标记。
一行:
var clicker = addClicker(marker, data.NatureId);
放错位置了。您需要为创建的每个标记(在.each
函数中)运行该操作
$.each(jsonData.ResponseData, function(key, data) {
var latLng = new google.maps.LatLng(data.CoordinateY, data.CoordinateX),
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: ""+data.NatureId
});
var clicker = addClicker(marker, ""+data.NatureId);
});
概念验证
代码片段:
var map, infowindow;
function initialize() {
var mapProp = {
center: new google.maps.LatLng(28.003389000000, -82.429500000000),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mapProp);
// $.getJSON('js/file.json', function(json1) {
$.each(jsonData.ResponseData, function(key, data) {
var latLng = new google.maps.LatLng(data.CoordinateY, data.CoordinateX),
marker = new google.maps.Marker({
position: latLng,
map: map,
title: "" + data.NatureId
});
console.log(latLng.toUrlValue(6) + ":" + data.NatureId)
var clicker = addClicker(marker, "" + data.NatureId);
});
// });
function addClicker(marker, content) {
google.maps.event.addListener(marker, 'click', function() {
if (infowindow) {
infowindow.close();
}
infowindow = new google.maps.InfoWindow({
content: content
});
infowindow.open(map, marker);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
var jsonData = {
"OpperationErrorMsg": "",
"IsSuccess": true,
"ResultId": 1000,
"Timestamp": "2016-10-12T18:00:07.0232702Z",
"Echo": null,
"InSandbox": true,
"DebugMessages": [
],
"MissingDetails": [
],
"ResponseData": [{
"CallTimeLocal": "2016-10-10T06:28:48.7330000",
"IncidentId": 3374,
"IncidentNumber": "HC2016004034",
"CallTime": "2016-10-10T10:28:48.7330000",
"ElapsedSeconds": 0,
"Location": "2712 E HANNA AVE",
"BuildingName": null,
"BuildingNumber": null,
"NatureId": 6743,
"FirePriorityId": 1,
"CoordinateX": -82.429500000000,
"CoordinateY": 28.003389000000
}, {
"CallTimeLocal": "2016-10-10T11:28:36.7000000",
"IncidentId": 3382,
"IncidentNumber": "HC2016004042",
"CallTime": "2016-10-10T15:28:36.7000000",
"ElapsedSeconds": 0,
"Location": "1220 APOLLO BEACH BLVD S",
"BuildingName": "Apollo Beach Marina",
"BuildingNumber": null,
"NatureId": 8035,
"FirePriorityId": 1,
"CoordinateX": -82.422369000000,
"CoordinateY": 27.781254000000
}, {
"CallTimeLocal": "2016-10-10T14:29:59.8830000",
"IncidentId": 3387,
"IncidentNumber": "HC2016004047",
"CallTime": "2016-10-10T18:29:59.8830000",
"ElapsedSeconds": 0,
"Location": "9600 SHELDONWOOD RD",
"BuildingName": null,
"BuildingNumber": null,
"NatureId": 6420,
"FirePriorityId": 12,
"CoordinateX": -82.580530000000,
"CoordinateY": 28.034779000000
}, {
"CallTimeLocal": "2016-10-10T15:27:37.7270000",
"IncidentId": 3389,
"IncidentNumber": "HC2016004049",
"CallTime": "2016-10-10T19:27:37.7270000",
"ElapsedSeconds": 0,
"Location": "4691 GALLAGHER RD",
"BuildingName": "Strawberry Crest High School",
"BuildingNumber": null,
"NatureId": 7873,
"FirePriorityId": 2,
"CoordinateX": -82.236450000000,
"CoordinateY": 28.021233000000
}],
"CurrentStatusData": null
};
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map" style="border: 2px solid #3872ac;"></div>
相关文章:
- 不显示带有本地json文件数据的谷歌地图脚本
- 谷歌地图JS API+JSON-多个标记没有显示
- 使用JSON在谷歌地图上显示标记
- 将组合JSON文件加载到谷歌地图
- 使用来自URL的JSON数据来显示谷歌地图标记-如何
- 尝试从JSON数组在谷歌地图中制作路径
- 如何从谷歌地图网址获取JSON
- 在谷歌地图的JSON数据中循环
- 谷歌地图标记不显示ajax json数据
- 将JSON文件中的数据加载到谷歌地图中的地图标记中
- 谷歌地图-来自VB.Net的JSON对象标记
- 使用jQuery进行谷歌地图api调用时出现问题(JSON未返回)
- 在谷歌地图样式中使用JSON文件
- 使用存储在App_Data中的Json数据,使用JavaScript和ASP.NET MVC在谷歌地图视图上显示
- 反应谷歌地图节点模块映射样式加载空对象,而不是JSON
- 从谷歌地图API JSON获取formatted_address
- 从 JSON 填充谷歌地图标记
- 谷歌地图标记和JSON对象
- 使用按钮获取谷歌地图上的json数据和过滤标记
- 未捕获的类型错误:无法读取属性'长度'谷歌地图Json数据为空