是否可以在標記旁邊的Google Maps API v3上編寫自定義文本?或者我可以只使用信息窗口來做到這一點?是否可以在Google Maps API v3上編寫自定義文本?
回答
要顯示自定義文本,您需要創建自定義疊加層。以下是根據官方Google文檔修改的示例。您也可以使用this library更多的「時尚」的信息窗口
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script>
//adapded from this example http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays
//text overlays
function TxtOverlay(pos, txt, cls, map) {
// Now initialize all properties.
this.pos = pos;
this.txt_ = txt;
this.cls_ = cls;
this.map_ = map;
// We define a property to hold the image's
// div. We'll actually create this div
// upon receipt of the add() method so we'll
// leave it null for now.
this.div_ = null;
// Explicitly call setMap() on this overlay
this.setMap(map);
}
TxtOverlay.prototype = new google.maps.OverlayView();
TxtOverlay.prototype.onAdd = function() {
// Note: an overlay's receipt of onAdd() indicates that
// the map's panes are now available for attaching
// the overlay to the map via the DOM.
// Create the DIV and set some basic attributes.
var div = document.createElement('DIV');
div.className = this.cls_;
div.innerHTML = this.txt_;
// Set the overlay's div_ property to this DIV
this.div_ = div;
var overlayProjection = this.getProjection();
var position = overlayProjection.fromLatLngToDivPixel(this.pos);
div.style.left = position.x + 'px';
div.style.top = position.y + 'px';
// We add an overlay to a map via one of the map's panes.
var panes = this.getPanes();
panes.floatPane.appendChild(div);
}
TxtOverlay.prototype.draw = function() {
var overlayProjection = this.getProjection();
// Retrieve the southwest and northeast coordinates of this overlay
// in latlngs and convert them to pixels coordinates.
// We'll use these coordinates to resize the DIV.
var position = overlayProjection.fromLatLngToDivPixel(this.pos);
var div = this.div_;
div.style.left = position.x + 'px';
div.style.top = position.y + 'px';
}
//Optional: helper methods for removing and toggling the text overlay.
TxtOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
TxtOverlay.prototype.hide = function() {
if (this.div_) {
this.div_.style.visibility = "hidden";
}
}
TxtOverlay.prototype.show = function() {
if (this.div_) {
this.div_.style.visibility = "visible";
}
}
TxtOverlay.prototype.toggle = function() {
if (this.div_) {
if (this.div_.style.visibility == "hidden") {
this.show();
} else {
this.hide();
}
}
}
TxtOverlay.prototype.toggleDOM = function() {
if (this.getMap()) {
this.setMap(null);
} else {
this.setMap(this.map_);
}
}
var map;
function init() {
var latlng = new google.maps.LatLng(37.9069, -122.0792);
var myOptions = {
zoom: 4,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Hello World!"
});
customTxt = "<div>Blah blah sdfsddddddddddddddd ddddddddddddddddddddd<ul><li>Blah 1<li>blah 2 </ul></div>"
txt = new TxtOverlay(latlng, customTxt, "customBox", map)
}
</script>
<style>
.customBox {
background: yellow;
border: 1px solid black;
position: absolute;
}
</style>
</head>
<body onload="init()">
<div id="map" style="width: 600px; height: 600px;">
</div>
</body>
</html>
這太棒了。我抓住了我的腦袋,想知道Google爲什麼默認不包括這個。 – 2011-11-23 22:21:07
有沒有更改標籤文字大小的方法?將'font-size:30px'添加到樣式塊似乎不起作用。 – 2013-11-10 13:39:00
工程就像一個魅力!優秀的答案! – 2014-06-07 19:10:01
到目前爲止添加文本疊加的最簡單的方法是使用MapLabel
類從https://github.com/googlemaps/js-map-label
var mapLabel = new MapLabel({
text: 'Test',
position: new google.maps.LatLng(50,50),
map: map,
fontSize: 20,
align: 'right'
});
它的文字是靜態的,您可以使用標記和圖像:
var label = new google.maps.Marker({
position: new google.maps.LatLng(50,50),
map: map,
icon: "/images/mytextasanimage.png"
});
確實,這個工作。很好 ! – Zl3n 2016-11-26 15:25:03
- 1. 是否可以在Google Maps API v3中製作自定義地圖?
- 2. Google Maps API v3自定義按鈕
- 3. Google Maps Api v3自定義InfoWindow - 「google未定義」錯誤
- 4. Google Maps Api v3自定義InfoWindow - 「google未定義」錯誤
- 5. Google Maps API v3街景「google未定義」
- 6. Google Maps API v3:placemarker是否存在於給定的LatLng上?
- 7. Google Maps V3自定義工具提示
- 8. Mapkit是否使用Google Maps API V3?
- 9. Google Chrome中的Google Maps API v3自定義光標的熱點
- 10. 帶Google Adsense的Google Maps API V3自定義控件?
- 11. 是否可以在Google Maps API中進行自定義類別搜索?
- 12. Google Maps API v2 vs Google Maps API v3?
- 13. Google Maps API v3 BrowserIsCompatible
- 14. Google Maps API v3 - maxZoomService
- 15. Google Maps API V3:fromContainerPixelToLatLng
- 16. 在Unity 3D上使用Google Maps API v3
- 17. Google Maps API v3自定義動畫標記
- 18. Google maps API V3 - DirectionsRendererOptions和InfoWindow中的自定義內容
- 19. Google Maps API v3:地形地圖的自定義樣式
- 20. Google Maps Api v3,自定義集羣圖標
- 21. Google Maps API v3 - 自定義行車路線標記
- 22. Google Maps v3 API和WordPress ACF:多個自定義標記
- 23. Google Maps API v3 - 自定義多色圖標
- 24. Google Maps API是否可以在Github Pages上運行?
- 25. Google Maps API v3:自定義標記無法在移動設備上點擊
- 26. Google Maps API v3地理編碼OVER_QUERY_LIMIT
- 27. Google Maps Api v3,自制集羣圖標
- 28. 是否可以使用多個圖像作爲Google Maps v3 MarkerImage?
- 29. Google maps API V3方法fitBounds()
- 30. google maps api v3 + infoBubble in markerClusterer
看起來它是不可能的......唯一的辦法就是創建透明的InfoBox窗口並在上面寫文本......告訴我我是否錯了? – user198003 2010-10-17 20:44:09
我可以在Google地圖靜態地圖API中的標記上添加自定義文本(最可能是單詞)嗎?? – Jay 2015-02-03 05:40:11