是否可以在Google Maps API v3上编写自定义文本？

是否可以在标记旁边的Google Maps API v3上编写自定义文本？或者我可以只使用信息窗口来做到这一点？是否可以在Google Maps API v3上编写自定义文本？

2010-10-17 user198003

看起来它是不可能的......唯一的办法就是创建透明的InfoBox窗口并在上面写文本......告诉我我是否错了？ – user198003 2010-10-17 20:44:09

我可以在Google地图静态地图API中的标记上添加自定义文本（最可能是单词）吗？？ – Jay 2015-02-03 05:40:11

要显示自定义文本，您需要创建自定义叠加层。以下是根据官方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>

来源

2010-10-17 20:56:31 Michal

这太棒了。我抓住了我的脑袋，想知道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' 
});

来源

2012-11-18 04:19:44

我收到一个错误“未捕获的ReferenceError：MapLabel未定义”，如何添加实用程序库？ – muffin 2014-10-10 08:03:01

'' – Legionar 2015-08-10 14:52:33

但是你需要使用这个'http：// google-maps-utility-library-v3.googlecode.com/svn/trunk/maplabel/src/maplabel.js' – Legionar 2015-08-10 14:54:41

它的文字是静态的，您可以使用标记和图像：

var label = new google.maps.Marker({ 
    position: new google.maps.LatLng(50,50), 
    map: map, 
    icon: "/images/mytextasanimage.png" 
});

来源

2014-11-19 09:01:30 user4269131

确实，这个工作。很好！ – Zl3n 2016-11-26 15:25:03

是否可以在Google Maps API v3上编写自定义文本？

回答

相关问题