Google Map API会显示带标题的多个标记

时间:2018-04-02 07:20:19

标签: google-maps

我需要帮助才能在地图上显示标记的标题。

下面是我的代码,当您点击标记时,它将显示标题。但我想要的是始终显示所有标记的标题。

<!DOCTYPE html>    <html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 1900px; height: 900px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Kuala Lumpur',3.146388, 101.696944,4],
      ['Ipoh',4.6101207,101.0215677,4],
      ['Kota Bharu',6.1073387,102.2297075,4],
      ['Kuantan',3.8089082,103.1242173,,4],
      ['Johor Bahru',1.5450255,103.6395872,4],
      ['Labuan',5.316857,115.1778205,4],
      ['Langkawi',6.3500211,99.7912452,4],
      ['Penang Island',5.3700739,100.190643,4],
      ['Kuala Terengganu',5.4845334,102.7478085,4],
      ['Kota Kinabalu',5.9959858,116.095411,4],
      ['Kuching',1.6185192,110.1863469,4],
      ['Melaka',2.2648552,102.0763272,4]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7.75,
      center: new google.maps.LatLng(3.9506435,113.9428895),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: [
  {
    "elementType": "geometry"

    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>    </body>    </html>

提前谢谢。

1 个答案:

答案 0 :(得分:2)

只需删除此代码:

google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function(){ 
})(marker, i)); //click function not needed anymore

并保留此代码:

infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);

然后移动

var infowindow = new google.maps.InfoWindow();

内部&#34; for&#34;循环。

工作样本here