如何在Google地圖的標記旁顯示標籤？

我想在Google地圖上的標記旁邊顯示文本標籤。我之前使用過Virtual Earth，並且剛剛開始使用Google地圖。我嘗試設置標題屬性，但只改變翻轉文本。如何在Google地圖的標記旁顯示標籤？

當用戶放大，平移和使用地圖時，是否有方法在標記下方顯示一小段文字？

在此先感謝！

2009-06-29 Great Turtle

我想我可能已經找到了答案......該網站似乎對我來說很糟糕，但Google有一個緩存。我會試試看看它是如何工作的。 http://74.125.95.132/search?q=cache:http://googlemapsbook.com/2007/01/22/extending-gmarker/ – 2009-06-29 12:13:25

有一個很好的標籤類here，但您必須將其與標記一起添加。

來源

2009-06-29 14:31:51

這傢伙有一些好東西:) – RedBlueThing 2009-06-30 00:25:05

你指出我的ELabel類工作得很好。令人驚歎的谷歌地圖網站btw，不知道我在原始搜索中沒有找到它。謝謝！ – 2009-06-30 00:58:10

這很方便，但它不適用於Google Maps JavaScript API的v3。另外，如果你縮小得足夠遠，那麼標籤重疊成難以辨認的湯。儘管如此，迄今爲止我找到的最好的產品。 – 2010-10-07 21:17:40

對於Google Maps JavaScript API v3，請查看the examples here。

Source code available in normal and minimised forms。

來源

2010-10-07 22:01:00

即使這個問題已經得到解答，我發現this resource，我認爲這是一個很好的解決方案，可能會有所幫助。另外，可以找到類似的解決方案here。

來源

2012-04-23 12:49:31 AlexAndro

下面是一些示例代碼，這將解決這個問題： https://github.com/printercu/google-maps-utility-library-v3-read-only/tree/master/markerwithlabel/examples

這就是所謂的信息框自定義類。你可以看到API參考上面的鏈接

JS文件可以包含在這裏： https://github.com/printercu/google-maps-utility-library-v3-read-only/blob/master/infobox/src/infobox.js

乾杯！

來源

2012-05-14 18:00:49

使用js庫的另一種方法是簡單地創建一個包含文本的.png圖標。這聽起來很愚蠢，但你可以使用一些外部服務（例如this one）。

你上傳你的圖標，並獲得一個鏈接作爲回報。如果你添加一些文本到鏈接url - 它會返回你的圖標和渲染到它的文本。

來源

2014-02-27 21:55:22 fitek

如果你只是想顯示在標記下方的標籤，那麼你就可以延長谷歌地圖標記添加一個setter方法爲標籤，您可以通過擴展谷歌地圖OverlayView的這樣定義標籤的對象..

演示：jsFiddle

<script type="text/javascript"> 
    var point = { lat: 22.5667, lng: 88.3667 }; 
    var markerSize = { x: 22, y: 40 }; 


    google.maps.Marker.prototype.setLabel = function(label){ 
     this.label = new MarkerLabel({ 
      map: this.map, 
      marker: this, 
      text: label 
     }); 
     this.label.bindTo('position', this, 'position'); 
    }; 

    var MarkerLabel = function(options) { 
     this.setValues(options); 
     this.span = document.createElement('span'); 
     this.span.className = 'map-marker-label'; 
    }; 

    MarkerLabel.prototype = $.extend(new google.maps.OverlayView(), { 
     onAdd: function() { 
      this.getPanes().overlayImage.appendChild(this.span); 
      var self = this; 
      this.listeners = [ 
      google.maps.event.addListener(this, 'position_changed', function() { self.draw(); })]; 
     }, 
     draw: function() { 
      var text = String(this.get('text')); 
      var position = this.getProjection().fromLatLngToDivPixel(this.get('position')); 
      this.span.innerHTML = text; 
      this.span.style.left = (position.x - (markerSize.x/2)) - (text.length * 3) + 10 + 'px'; 
      this.span.style.top = (position.y - markerSize.y + 40) + 'px'; 
     } 
    }); 
    function initialize(){ 
     var myLatLng = new google.maps.LatLng(point.lat, point.lng); 
     var gmap = new google.maps.Map(document.getElementById('map_canvas'), { 
      zoom: 5, 
      center: myLatLng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     var myMarker = new google.maps.Marker({ 
      map: gmap, 
      position: myLatLng, 
      label: 'Hello World!', 
      draggable: true 
     }); 
    } 
</script> 
<style> 
    .map-marker-label{ 
     position: absolute; 
    color: blue; 
    font-size: 16px; 
    font-weight: bold; 
    } 
</style>

這將工作。

來源

2014-03-11 18:26:47 Ramyani

如何在Google地圖的標記旁顯示標籤？

回答

相關問題