带标签的 Google Maps API v3 标记
Posted
技术标签:
【中文标题】带标签的 Google Maps API v3 标记【英文标题】:Google Maps API v3 marker with label 【发布时间】:2012-06-18 02:31:42 【问题描述】:我是 JS 和 Google API 的新手,我正在尝试制作多个标记,每个标记都有一个标签。
根据我一直在研究的小 sn-ps,在 Google Maps API v3 中,没有简单的方法可以将标签附加到标记上。在 Google 和 *** 搜索之间,每个人都使用了一个涉及创建或编辑标签类的迂回过程。
由于我刚刚开始学习 JS/Google API v3,因此我只想弄清楚如何以简单的方式将标签附加到每个标记。
谢谢
编辑#3: 好的,我终于弄清楚了哪里出了问题,并使用 Lilina 的代码正确实现了带有标签的多个标记。显然,我们都以不同的方式定义了 var 映射,这本身就使我们的代码无法很好地同步。
现在我还有一个问题,我可以为每个标记使用标签。 我希望能够根据用户所处的缩放级别隐藏标记及其标签。
Google Maps API v3 - Different markers/labels on different zoom levels
【问题讨论】:
【参考方案1】:我不能保证它是最简单的,但我喜欢MarkerWithLabel。如the basic example 所示,CSS 样式定义标签的外观,javascript 中的选项定义内容和位置。
.labels
color: red;
background-color: white;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 10px;
font-weight: bold;
text-align: center;
width: 60px;
border: 2px solid black;
white-space: nowrap;
JavaScript:
var marker = new MarkerWithLabel(
position: homeLatLng,
draggable: true,
map: map,
labelContent: "$425K",
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: opacity: 0.75
);
唯一可能令人困惑的部分是 labelAnchor。默认情况下,标签的左上角将与标记图钉的端点对齐。将 labelAnchor 的 x 值设置为 CSS 宽度属性中定义的宽度的一半将使标签居中。您可以使用new google.maps.Point(22, 50)
之类的锚点使标签浮动在标记图钉上方。
如果对以上链接的访问被阻止,我将 MarkerWithLabel 的 packed source 复制并粘贴到此 JSFiddle demo 中。我希望JSFiddle在中国被允许:|
【讨论】:
显然,我无法将所有代码转移到 。我不知道为什么,因为只有几个变量和一个事件。我的代码和其他工作代码之间唯一真正的主要区别是 仅包含变量映射、函数和事件。而我的位置使用循环。 可能与页面加载的顺序有关,例如,如果 Javascript 在正文加载后加载。 这个很好..但是当标记数量巨大时显示标签需要很多时间..这个问题有没有其他解决方案 @TinaCGHoehr - 从 1.1.9 MarkerWithLabel 版本开始,当标记靠近时会出现重叠问题(问题 #24)。在fiddle example 中查看。MarkwithLable
暂时不可用,我该怎么办?【参考方案2】:
要向地图添加标签,您需要创建自定义叠加层。 http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html 的示例使用自定义类 Layer
,它继承自 Google Maps API 的 OverlayView
(继承自 MVCObject
)。他有一个修订版(增加了对可见性、zIndex 和点击事件的支持),可以在这里找到:http://blog.mridey.com/2011/05/label-overlay-example-for-google-maps.html
以下代码直接取自 Marc Ridey 的博客(上面修改过的链接)。
图层类
// Define the overlay, derived from google.maps.OverlayView
function Label(opt_options)
// Initialization
this.setValues(opt_options);
// Label specific
var span = this.span_ = document.createElement('span');
span.style.cssText = 'position: relative; left: -50%; top: -8px; ' +
'white-space: nowrap; border: 1px solid blue; ' +
'padding: 2px; background-color: white';
var div = this.div_ = document.createElement('div');
div.appendChild(span);
div.style.cssText = 'position: absolute; display: none';
;
Label.prototype = new google.maps.OverlayView;
// Implement onAdd
Label.prototype.onAdd = function()
var pane = this.getPanes().overlayImage;
pane.appendChild(this.div_);
// Ensures the label is redrawn if the text or position is changed.
var me = this;
this.listeners_ = [
google.maps.event.addListener(this, 'position_changed', function() me.draw(); ),
google.maps.event.addListener(this, 'visible_changed', function() me.draw(); ),
google.maps.event.addListener(this, 'clickable_changed', function() me.draw(); ),
google.maps.event.addListener(this, 'text_changed', function() me.draw(); ),
google.maps.event.addListener(this, 'zindex_changed', function() me.draw(); ),
google.maps.event.addDomListener(this.div_, 'click', function()
if (me.get('clickable'))
google.maps.event.trigger(me, 'click');
)
];
;
// Implement onRemove
Label.prototype.onRemove = function()
this.div_.parentNode.removeChild(this.div_);
// Label is removed from the map, stop updating its position/text.
for (var i = 0, I = this.listeners_.length; i < I; ++i)
google.maps.event.removeListener(this.listeners_[i]);
;
// Implement draw
Label.prototype.draw = function()
var projection = this.getProjection();
var position = projection.fromLatLngToDivPixel(this.get('position'));
var div = this.div_;
div.style.left = position.x + 'px';
div.style.top = position.y + 'px';
div.style.display = 'block';
this.span_.innerHTML = this.get('text').toString();
;
用法
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>
Label Overlay Example
</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="label.js"></script>
<script type="text/javascript">
var marker;
function initialize()
var latLng = new google.maps.LatLng(40, -100);
var map = new google.maps.Map(document.getElementById('map_canvas'),
zoom: 5,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
);
marker = new google.maps.Marker(
position: latLng,
draggable: true,
zIndex: 1,
map: map,
optimized: false
);
var label = new Label(
map: map
);
label.bindTo('position', marker);
label.bindTo('text', marker, 'position');
label.bindTo('visible', marker);
label.bindTo('clickable', marker);
label.bindTo('zIndex', marker);
google.maps.event.addListener(marker, 'click', function() alert('Marker has been clicked'); )
google.maps.event.addListener(label, 'click', function() alert('Label has been clicked'); )
function showHideMarker()
marker.setVisible(!marker.getVisible());
function pinUnpinMarker()
var draggable = marker.getDraggable();
marker.setDraggable(!draggable);
marker.setClickable(!draggable);
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="height: 200px; width: 200px"></div>
<button type="button" onclick="showHideMarker();">Show/Hide Marker</button>
<button type="button" onclick="pinUnpinMarker();">Pin/Unpin Marker</button>
</body>
</html>
【讨论】:
函数Label和google默认的有区别吗?如果是这样,我该如何改变?我目前正在尝试将第二个代码块中的标签 sn-p 应用于我自己的标签,但我没有显示任何标签。 Label 类是不属于 API 的自定义类。在上面的第二个 sn-p 中有对 label.js 的引用,这是第一个代码 sn-p 所在的位置。您可能需要发布一些代码,以便我们了解发生了什么。 您似乎有 MarkerWithTag.prototype.onRemove 并在您的 javascript 中绘制两次,只需要一次函数。【参考方案3】:上述解决方案不适用于 ipad-2
最近我在绘制标记时遇到了 Safari 浏览器崩溃问题,即使标记数量较少也是如此。最初我使用带有标签的标记(markerwithlabel.js)库 为了绘制标记,当我使用谷歌原生标记时,即使有大量标记,它也能正常工作,但我想要自定义标记,所以我参考了 jonathan 给出的上述解决方案,但经过大量研究后仍然没有解决崩溃问题知道了http://nickjohnson.com/b/google-maps-v3-how-to-quickly-add-many-markers这个博客 现在我的地图搜索在 ipad-2 上运行顺利 :)
【讨论】:
以上是关于带标签的 Google Maps API v3 标记的主要内容,如果未能解决你的问题,请参考以下文章
Google Maps API V3 中的 API 密钥是啥?
google maps js v3 api教程 -- 在地图上添加标记
Google Maps v3 - 防止 API 加载 Roboto 字体
google maps js v3 api教程 -- 创建一个地图