Infowindow数据不显示从JSON在谷歌地图上

Infowindow Data is not showing from JSON on Google Map

本文关键字:谷歌地图 JSON 数据 显示 Infowindow      更新时间:2023-09-26

我使用了$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>