我想在 v3 Google Map 上的 (lat: 73, lon: -122) 处绘制以下 HTML 代码:
<div style="width:200px; height:100px;">
<span class="someclass">hello i want to be plotted, along with my image sibling</span>
<img src="someimage.png"/>
</div>
如何做到这一点?
我想在 v3 Google Map 上的 (lat: 73, lon: -122) 处绘制以下 HTML 代码:
<div style="width:200px; height:100px;">
<span class="someclass">hello i want to be plotted, along with my image sibling</span>
<img src="someimage.png"/>
</div>
如何做到这一点?
这是小提琴中的 HTML(仅限正文):
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map_canvas" style="height: 400px; width: 400px"></div>
和 JavaScript,改编自上面链接的文章。这也显示了如何使用事件委托处理覆盖层上的鼠标事件 - 请参阅initialize()
函数的开头。此外,我必须将图层移出overlayLayer
并移入,overlayMouseTarget
以便它响应鼠标事件。(地图 API 覆盖层文档)
// Define the overlay, derived from google.maps.OverlayView
function Label(opt_options) {
// Initialization
this.setValues(opt_options);
// Label specific
var inner = this.inner_ = document.createElement('div');
inner.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(inner);
div.style.cssText = 'position: absolute; display: none';
};
Label.prototype = new google.maps.OverlayView;
// Implement onAdd
Label.prototype.onAdd = function() {
var pane = this.getPanes().overlayMouseTarget;
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, 'text_changed', function() {
me.draw();
})];
};
// 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.inner_.innerHTML = '\
<div class="someclass" style="width:150px; height:50px;">\
<img class="myimg" src="http://cdn.sstatic.net/stackoverflow/img/favicon.ico"/>\
<span class="myspan">\
Click me!\
</span>\
</div>\
';
};
function initialize() {
$('#map_canvas').on( 'click', 'img.myimg', function() {
alert( 'Clicked image' );
});
$('#map_canvas').on( 'click', 'span.myspan', function() {
alert( 'Clicked text' );
});
var latLng = new google.maps.LatLng(73, -122);
var map = new google.maps.Map(
document.getElementById('map_canvas'),
{
zoom: 5,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var label = new Label({
map: map,
position: latLng
});
};
$(initialize);
你将不得不使用覆盖来做到这一点。在这里查看详细示例。您可以自定义它以包含文本部分,当然还有正确的坐标