带有标签的谷歌地图 API v3 标记
Google Maps API v3 marker with label
我是JS和Google API的新手,我正在尝试制作多个标记,每个标记都有一个标签。
从我一直在看的小片段来看,没有简单的方法可以将标签附加到Google Maps API v3中的标记上。在Google和stackoverflow搜索之间,每个人都使用了一个涉及创建或编辑标签分类的迂回过程。
我只是想弄清楚如何以简单的方式将标签附加到每个标记,因为我刚刚开始学习 JS/Google API v3。
谢谢
编辑#3:好的,我终于找出了问题所在,并使用 Lilina 的代码正确实现了带有标签的多个标记。显然,我们都以不同的方式定义了 var 映射,这本身就使我们的代码无法很好地同步。
现在我还有一个问题,我可以为每个标记使用标签。我希望能够根据用户所处的缩放级别隐藏标记及其标签。
谷歌地图API v3 - 不同缩放级别的不同标记/标签
我不能保证它是最简单的,但我喜欢 MarkerWithLabel。如基本示例所示,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 的 x 值设置为 CSS width 属性中定义的宽度的一半将使标签居中。您可以使用锚点使标签浮动在标记图钉上方,如 new google.maps.Point(22, 50)
。
如果对上述链接的访问被阻止,我将 MarkerWithLabel 的打包源代码复制并粘贴到这个 JSFiddle 演示中。我希望JSFiddle在中国被允许:|
为了向地图添加标注,您需要创建自定义叠加层。http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html 中的示例使用自定义类 Layer
,该类继承自 Google 地图 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>
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 单击超链接时,如何使用Google Maps API v3缩放地图
- 标记的实时更新,无需加载页面谷歌地图API V3
- 覆盖在赢得'不允许点击下面的标记,谷歌地图api v3
- 如何在多承诺链中处理谷歌地图API V3事件
- 谷歌地图API v3:Initial View is Fine,but Gray Box with No Map if
- 使用Google Maps JavaScript API v3和Geocoding API映射多个位置
- 使用谷歌地图api v3自动完成字段(法国大道、邮编、城市)
- 如何在谷歌地图api v3中获得无公里驾驶距离
- 如何在Maps API v3.中更改多段线的路径
- 谷歌地图API v3:处理使用限制限制
- gmaps API v3在IE上加载非常慢
- 在谷歌api v3中使用地理自动完成功能获取邮政编码
- markrimage在谷歌地图api v3中的特定位置后消失
- 如何修改此功能以获得最受欢迎的视频?(YouTube API v3)
- 映射API v3标记在单击时消失
- 如何限制谷歌地图API V3半径搜索仅限于圆圈内的标记
- 谷歌应用程序脚本html服务和加载谷歌地图javascript api V3
- 加载Google MAPS API v3的JSON数据
- 没有显示带有Infobox PHP/SQL的Google Map API v3