【问题标题】:Google Map API display multiple marker with titleGoogle Map API 显示多个带有标题的标记
【发布时间】:2018-04-02 16:30:28
【问题描述】:

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

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

<!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>

提前谢谢你。

【问题讨论】:

    标签: google-maps


    【解决方案1】:

    只需删除此代码:

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

    在“for”循环内。

    工作样本here

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-08-02
      • 2012-07-05
      • 1970-01-01
      • 1970-01-01
      • 2018-09-06
      • 1970-01-01
      • 1970-01-01
      • 2012-12-01
      相关资源
      最近更新 更多