Question

这里我正在创建一个功能，我从JSON文件中检索纬度和经度。并在谷歌地图上显示标记。

但我的问题是只有一个标记显示在谷歌地图上。其他人没有表现出来。

这是我的json格式

  {
"Data": {
"-template": "Parallax",
 "Explore": {
 "IslandLife": {
"TourismLocation": [
  {
    "Title": "Langkawi",
    "Latitude": "6.350000",
    "Longitude": "99.800000",
    "YouTubePlaylistID": "UUnTJRksbHP4O8JSz00_XRQA",
    "VideosList": {
      "YouTubeVideoID": [
        "7HlMpaSspNs",
        "tzeRnbd77HU",
        "VkIAbDIVJCA",
        "ksJ6kwTe9wM"
      ]
    }
  },
  {
    "Title": "Rawa Island",
    "Latitude": "2.520278",
    "Longitude": "103.975833",
    "YouTubePlaylistID": "UUnTJRksbHP4O8JSz00_XRQA",
    "VideosList": { "YouTubeVideoID": "Kx0dUWaALKo" }
  },
  {
    "Title": "Perhentian Island",
    "Latitude": "5.903788",
    "Longitude": "102.753737",
    "YouTubePlaylistID": "UUnTJRksbHP4O8JSz00_XRQA",
    "VideosList": {
      "YouTubeVideoID": [
        "ZpcdGk5Ee0w",
        "TQTDOGpflZY"
      ]
    }
  },
  {
    "Title": "Sabah Marine Park",
    "Latitude": "4.623326",
    "Longitude": "118.719800",
    "YouTubePlaylistID": "UUnTJRksbHP4O8JSz00_XRQA",
    "VideosList": { "YouTubeVideoID": "VCDTEKOqpKg" }
  }
]
 }
}
}
 }

这里是我的函数，我从json文件

上面检索纬度和lognitutde

<script type="text/javascript">

  $.getJSON('json/explore.json', function(data) {
     $.each(data, function(key, val) {
           for (var i = 0; i < val.Explore.IslandLife.TourismLocation.length; i++) {
               PlotMarker(val.Explore.IslandLife.TourismLocation[i].Latitude, val.Explore.IslandLife.TourismLocation[i].Longitude);
    }
    });
});

function PlotMarker(lat, lang) {
var mapProp = {
    center: new google.maps.LatLng(lat, lang),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("gmap"), mapProp);
var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lang),
});
marker.setMap(map);
 }
 google.maps.event.addDomListener(window, 'load', PlotMarker);
    </script>


<body>
    <div id="gmap" style="width: 800px; height:500px;"></div>
</body>

如何在地图上显示多个标记???

Answer 1

您的问题在于范围 - 每次拨打PlotMarker时都会重新创建地图 - 因此每次只添加一个标记。在PlotMarker函数之外声明您的地图，例如：

initialize() {
    var mapProp = {
      center: new google.maps.LatLng(lat, lang),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("gmap"), mapProp);
}

function PlotMarker(lat, lang) {
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lang),
  });
  marker.setMap(map);
}

然后在页面加载时调用initialize() - 同样，在调用PlotMarker函数之前确保映射存在。

使用一些示例代码的另一个好的答案：https://stackoverflow.com/a/7701386/1803682

Answer 2

以下是我在项目中使用的工作示例

JS方法 AddInfoWidnow 用于将InfoWindow添加到标记。

function AddInfoWidnow(marker,message)
{
     var infowindow = new google.maps.InfoWindow({ content: message });

     google.maps.event.addListener(marker, 'click', function() {

     infowindow.open(marker.get('map'), marker);

    }); 

}

在for循环中调用 AddInfoWidnow 方法

function ShowOnMap(ContainerId, mapItems) {

var DefaultLatLng= new google.maps.LatLng('12.967461', '79.941824');

var mapOptions = {
    center: DefaultLatLng,
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    marker: true
};

var mapCust = new google.maps.Map(document.getElementById(ContainerId), mapOptions);

var arrJsonObject = JSON.parse(mapItems);

for (var y = 1; y <= arrJsonObject.length; y++) 
{

    var myLatLng1 = new google.maps.LatLng(arrJsonObject[y - 1].Latitude, arrJsonObject[y - 1].Lonngitude);

    var marker = new google.maps.Marker({
    position: myLatLng1,
    map: mapCust,
    title: 'Marked at '+ arrJsonObject[y - 1].markedDate
});

    addInfoWindows(marker,y-1,arrJsonObject);


    marker.setMap(mapCust);

}
}

使用下面的snnipet来调用地图

  var mapItems='[
  {
    "Latitude": "22.575897",
    "Lonngitude": "88.431754",
    "CustomerCode": "*$$$*",
    "CustomerName": "*@@@*",
    "markedDate": "2/20/2014 12:04:41 PM"
  },
  {
    "Latitude": "22.615067",
    "Lonngitude": "88.431759",
    "CustomerCode": "*$$$*",
    "CustomerName": "*@@@*",
    "markedDate": "2/20/2014 3:02:19 PM"
  }
]';
    ShowOnMap(containerId2, mapItems);

如何在谷歌地图上显示多个标记？

2 个答案: