Question

我想在v3 Google地图上绘制以下HTML代码（lat：73，lon：-122）：

<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。

以下是小提琴中的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，以便它可以响应鼠标事件。（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);

Answer 2

您必须使用叠加层来完成此操作。查看here以获取详细示例。您可以自定义它包括文本部分，当然还有正确的坐标

如何在特定纬度和经度的v3 Google Map上绘制HTML元素？

2 个答案: