2014-05-20 34 views
0

我想顯示在谷歌地圖上有標記的每個地點的標題(地點名稱)。 此刻正正顯示出座標在谷歌地圖上顯示標記在信息框中的標題

infowindow.setContent("coord:"+dmarker.getPosition().toUrlValue(6)); 

,但我希望它顯示的地方「稱號」。 如何做到這一點 我的代碼是:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
    var map = null; 
var infowindow = new google.maps.InfoWindow(); 
var bounds = new google.maps.LatLngBounds(); 
    var markers = [ 
         { 
          "title": <?php echo "'" . $info['name'] . "'"; ?>, 
          "lat": <?php echo "'" . $info['lat'] . "'"; ?>, 
          "lng": <?php echo "'" . $info['long'] . "'"; ?>, 
         }, 


      { 
       "title": 'Kinar Hotel', 
       "lat": '32.8617740', 
       "lng": '35.6452770', 
      } 
    ]; 
    </script> 


<script type="text/javascript"> 
function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(
      parseFloat(markers[0].lat), 
      parseFloat(markers[0].lng)), 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var path = new google.maps.MVCArray(); 
    var service = new google.maps.DirectionsService(); 

    var infoWindow = new google.maps.InfoWindow(); 
    map = new google.maps.Map(document.getElementById("map"), mapOptions); 
    var poly = new google.maps.Polyline({ 
     map: map, 
     strokeColor: '#F3443C' 
    }); 
    var lat_lng = new Array(); 

    /* path.push(new google.maps.LatLng(parseFloat(markers[0].lat), 
            parseFloat(markers[0].lng))); 
    */ 
    var marker = new google.maps.Marker({ 
        position:map.getCenter(), 
        map:map 
       }); 

    bounds.extend(marker.getPosition()); 
google.maps.event.addListener(marker, "click", function(evt) { 
    infowindow.setContent("coord:"+marker.getPosition().toUrlValue(6)); 
    infowindow.open(map,marker); 
});    
    for (var i = 0; i < markers.length; i++) { 
     if ((i + 1) < markers.length) { 
      var src = new google.maps.LatLng(parseFloat(markers[i].lat), 
              parseFloat(markers[i].lng)); 
      var smarker = new google.maps.Marker({position:src, map:map}); 
      bounds.extend(smarker.getPosition()); 
    google.maps.event.addListener(smarker, "click", function(evt) { 
     /* infowindow.setContent("coord:"+smarker.getPosition().toUrlValue(6));*/ 
     infowindow.open(map,smarker); 
    });    
      var des = new google.maps.LatLng(parseFloat(markers[i+1].lat), 
              parseFloat(markers[i+1].lng)); 
      var dmarker = new google.maps.Marker({position:des, map:map}); 
      bounds.extend(dmarker.getPosition()); 
    google.maps.event.addListener(dmarker, "click", function(evt) { 
     /* infowindow.setContent("coord:"+dmarker.getPosition().toUrlValue(6));*/ 
     infowindow.open(map,dmarker); 
    });    
      // poly.setPath(path); 
      service.route({ 
       origin: src, 
       destination: des, 
       travelMode: google.maps.DirectionsTravelMode.DRIVING 
      }, function (result, status) { 
       if (status == google.maps.DirectionsStatus.OK) { 
        for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) { 
         path.push(result.routes[0].overview_path[i]); 
        } 
        poly.setPath(path); 
        map.fitBounds(bounds); 
       } 
      }); 
     } 
    } 
} 
google.maps.event.addDomListener(window,'load',initialize); 
    </script> 

回答

1

使用標題標記屬性,並在點擊處理程序訪問此屬性:

var dmarker = new google.maps.Marker({position:des, 
             map:map, 
             title:markers[i+1].title 
            }); 

google.maps.event.addListener(dmarker, "click", function(evt) { 
    infowindow.setContent(this.get('title')); 
    infowindow.open(map,this); 
}); 
+0

這完全適用dmarker和smarker。但是,對於var標記,這段代碼給出了一個控制檯錯誤'未捕獲的類型錯誤:無法讀取未定義的屬性'標題'並破壞代碼,因此沒有在地圖上顯示。我想爲每個地方顯示標題,而不僅僅是src和dest。我應該如何設置var marker =?謝謝 – LTech

+0

目前在你的代碼中沒有任何綁定到'marker'的監聽器,很難在沒有看到實現的情況下解決。 –

+0

我編輯了原始代碼來添加偵聽器。標記與dmarker和smarker具有相同的編碼,但我無法使用上面的代碼顯示標題。請再看看它。謝謝。 var marker = new google.maps.Marker({position:map.getCenter(), map:map}); bounds.extend(marker.getPosition()); google.maps.event.addListener(marker,「click」,function(evt){infowindow.setContent(「coord:」+ marker.getPosition()。toUrlValue(6)); infowindow.open(map,marker );}); – LTech