如何在JS中的Google地圖上添加標記上方的文字？

我發現了exactly the same question for Java，但我想在JS中這樣做。那麼，如何在JS中的谷歌地圖上的標記上添加文本？如何在JS中的Google地圖上添加標記上方的文字？

2017-09-11 Karol Selak

Inb4 https://stackoverflow.com/questions/25934816/add-text-to-google-maps - 這個問題考慮添加固定文本作爲傳說，但我想在地圖上的標記上方有文字。 –

您是否檢出了MapMarker API的[this]（https://developers.google.com/maps/documentation/javascript/markers#marker_labels）部分？ –

@ G.Hunt - 謝謝！這不是我的問題的理想答案，因爲標籤只有一個字母，但我會考慮在沒有更好的解決方案的情況下遵循它。） –

正如我在評論說，你可以使用多個字母地圖標記標籤。

如果在實例化new google.maps.Marker類時使用label屬性，則將其傳遞給一個對象，其中一個屬性爲text。

var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(0, 0), 
    icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png', 
    label: { color: '#00aaff', fontWeight: 'bold', fontSize: '14px', text: 'Your text here' } 
});

檢查小提琴here。

來源

2017-09-11 15:50:47

我認爲你要找的東西不包含在標準庫中。谷歌確實提供了這個有趣的utility library，儘管如此，你可以製作自己的標記，標籤。你想要的是MarkerWithLable類。來自鏈接：

該類的行爲類似google.maps.Marker，但它支持標記與標記的關聯。如果標記是可拖動的，那麼也將是標籤。此外，帶有標籤的標記以與常規標記相同的方式對所有鼠標事件作出響應。它也觸發鼠標事件和「屬性更改」事件，就像常規的標記一樣。

看起來像它在幾乎相同的方式使用了標準的標記類，並似乎有充足的例子是使用踢周圍這麼好運氣，我希望這是有幫助:)

來源

2017-09-11 15:22:18 DMcCallum83

我附有快速實施的infowindow。請務必將我的API_KEY替換爲您的API_KEY，因爲我只允許訪問堆棧片段網址。

此代碼片段創建一個infowindow。在示例中，infowindow在創建後立即被調用，以在標記上方顯示其內容。

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <style> 
 
     #map { 
 
     height: 400px; 
 
     width: 100%; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <h3>My Google Maps Demo</h3> 
 
    <div id="map"></div> 
 
    <script> 
 
     function initMap() { 
 
     var uluru = {lat: -25.363, lng: 131.044}; 
 
     var map = new google.maps.Map(document.getElementById('map'), { 
 
      zoom: 4, 
 
      center: uluru 
 
     }); 
 
     var infowindow = new google.maps.InfoWindow({ 
 
      content: 'Welcome to stackoverflow!' 
 
     }); 
 
     var marker = new google.maps.Marker({ 
 
      position: uluru, 
 
      map: map 
 
     }); 
 
     infowindow.open(map, marker); 
 
     } 
 
    </script> 
 
    <script async defer 
 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD-u9xoswsG45HrMnM0RMRyXG_w4LDP-PM&callback=initMap"> 
 
    </script> 
 
    </body> 
 
</html>

，只顯示信息窗口點擊標記時，其包裝內的監聽：

marker.addListener('click', function() { 
    infowindow.open(map, marker); 
});

來源

2017-09-11 15:39:30

如何在JS中的Google地圖上添加標記上方的文字？

回答

相關問題