2016-01-13 227 views
1

我想添加標題標記,在的maps.google以同樣的方式增加了一個標題,以他們的標誌,如下所述,「優勝美地Lodge酒店的瀑布」如何在Google Maps API標記上添加自定義標題?

maps.google.com marker labeling

我我一直在搜索地圖API以瞭解如何做到這一點,我嘗試在新的Marker對象中添加「標籤」和「標題」,但沒有任何工作。沒有在地圖API的任何其他信息就如何做到這一點

var marker = new google.maps.Marker({ 
     position: {lat: beach[1], lng: beach[2]}, 
     map: map, 
     icon: image, 
     shape: shape, 
     draggable: true, 
     animation: google.maps.Animation.DROP, 
     title: beach[0], 
     zIndex: beach[3], 
     text: 'australia', 
}); 
+0

它不受本地API支持。 [MarkerWithLabel](http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/docs/examples.html)可能是最接近第三方的圖書館,您可以調整風格「標籤」分區。或者您可以嘗試[MapLabel](https://github.com/googlemaps/js-map-label) – geocodezip

+0

不確定這是否有幫助,但您可以使用Google註冊位置,並最終會在地圖上本地顯示。 – GreatBlakes

+0

嘗試使用'label','title'用於翻頁文本,並且沒有基於[Marker]的文本屬性(https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker)資源。 'text'是MarkerLabel資源的一部分 – adjuremods

回答

0

如前所述「Geocodezip」,谷歌不共享技術在他們的標記添加標籤。你必須添加你自己的。 markerwithlabel'basic.html'示例在這裏解決了我的問題。它允許你添加標記 我編輯了一下代碼以便能夠添加多個標記/標記對

var image = { 
    url: './customMarker.jpg', 
    // This marker is 20 pixels wide by 32 pixels high. 
    size: new google.maps.Size(100, 100), 
    // The origin for this image is (0, 0). 
    origin: new google.maps.Point(0, 0), 
    // The anchor for this image is the base of the flagpole at (0, 32). 
    anchor: new google.maps.Point(0, 32) 
    }; 

var NewLabels=[ 

['Test2', 34.03, -118.235], 
['Test1', 35.03, -117.235], 
['Test2', 36.03, -116.235], 
['Test3', 37.03, -115.235], 
['Test4', 38.03, -114.235], 

]; 

    for (var i = 0; i < NewLabels.length; i++) { 
     var title = NewLabels[i][0]; 
     var title = new MapLabel({ 
      text: NewLabels[i][0], 
      position: new google.maps.LatLng(NewLabels[i][1], NewLabels[i][2]), 
      map: map, 
      fontSize: 20, 
      align: 'right' 
     }); 

     var marker = new google.maps.Marker({animation: google.maps.Animation.DROP, icon: image,}); 
     marker.bindTo('map', title); 
     marker.bindTo('position', title); 
     marker.setDraggable(true); 
}; 
相關問題