javascript - 如何在 v3 Google map 上以特定纬度和经度绘制 HTML 元素？

Question

我想在 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>

如何实现这一目标？

Answer 1

您可以为此使用自定义叠加层。 Here's an example和 a fiddle .

这是 fiddle 的 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，改编自上面链接的文章。这还展示了如何使用事件委托(delegate)处理覆盖层上的鼠标事件 - 请参阅 initialize() 函数的开头。此外，我还必须将图层从 overlayLayer 移出并移入 overlayMouseTarget，以便它能够响应鼠标事件。 (Maps API overlay layer documentation)

// 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);