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

how to show multiple markers on google map?

本文关键字：显示 谷歌地图      更新时间：2023-09-26

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

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

这里的问题是范围-每次调用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

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

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);
相关文章：