Question

我使用$ getJSON方法来调用数据。标记在地图上完美显示但是当我点击标记时它没有显示值。所以，这是我的JSON数据，它将在服务器中但是我提供Link和一些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
}

这里想要在点击标记时显示建筑物名称，位置，NaturalID。

先谢谢。

Answer 1

该行：

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);
});

proof of concept fiddle

代码段

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>

Infowindow Data未在Google Map上显示JSON

1 个答案: