是否可以在Google Maps API v3上编写自定义文本？ [英] Is it possible to write custom text on Google Maps API v3?
本文介绍了是否可以在Google Maps API v3上编写自定义文本？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
是否可以在标记旁边的Google Maps API v3上编写自定义文本？或者我可以只使用信息窗口来做到这一点？
解决方案
要显示自定义文本，您需要创建自定义叠加层。以下是根据官方Google文档修改的示例。您还可以使用此库获取更多时尚的信息窗口
< html>< head> < script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false> < /脚本> <脚本> //适用于此示例http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays //文本叠加功能TxtOverlay（pos，txt，cls，map）{//现在初始化所有属性。 this.pos = pos; this.txt_ = txt; this.cls_ = cls; this.map_ = map; //我们定义一个属性来保存图片的// div。实际上，我们会在收到add（）方法后创建这个div，所以我们现在//将它保留为空。 this.div_ = null; //显式调用setMap（）覆盖this.setMap（map）; } TxtOverlay.prototype = new google.maps.OverlayView（）; TxtOverlay.prototype.onAdd = function（）{//注意：onAdd（）的overlay的接收表明//地图的窗格现在可用于通过DOM将覆盖图附加到地图上。 //创建DIV并设置一些基本属性。 var div = document.createElement（'DIV'）; div.className = this.cls_; div.innerHTML = this.txt_; //将叠加层的div_属性设置为这个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'; //我们通过地图的一个窗格向地图添加覆盖图。 var panes = this.getPanes（）; panes.floatPane.appendChild（DIV）; } TxtOverlay.prototype.draw = function（）{var overlayProjection = this.getProjection（）; //检索此覆盖图的西南和东北坐标//以latlngs为单位并将它们转换为像素坐标。 //我们将使用这些坐标来调整DIV的大小。 var position = overlayProjection.fromLatLngToDivPixel（this.pos）; var div = this.div_; div.style.left = position.x +'px'; div.style.top = position.y +'px'; } //可选：用于删除和切换文本叠加的辅助方法。 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;函数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> <风格> .customBox {background：yellow;边框：1px纯黑色;位置：绝对; }< / style>< / head>< body onload =init（）> < div id =mapstyle =width：600px; height：600px;> < / div>< / body>< / html>
Is it possible to write custom text on Google Maps API v3, next to marker? or i can use only info window to do that?
解决方案
To show custom text you need to create a custom overlay. Below is an example adapted from official Google documentation. You could also use this library for more "stylish" info windows
<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 Maps API v3上编写自定义文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
