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

【问题标题】：how to show multiple markers on google map?如何在谷歌地图上显示多个标记？
【发布时间】：2013-09-02 17:27:14
【问题描述】：

在这里，我正在创建一个功能，从 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>

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

【问题讨论】：

您在多个地图上显示多个标记（覆盖您创建的每个地图）.. @Matthew 回答得很好.. 试试他的代码，你会没事的..

标签： javascript jquery json google-maps google-maps-api-3

【解决方案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 函数之前确保地图存在。

另一个很好的 SO 答案，带有一些示例代码：https://stackoverflow.com/a/7701386/1803682

【讨论】：

【解决方案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);

}
}

使用下面的片段调用地图

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

【讨论】：