1

次の HTML コードを (緯度: 73、経度: -122) で v3 Google マップにプロットしたいと考えています。

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

これをどのように達成しますか？

4

2 に答える 2

1

これには、カスタム オーバーレイを使用できます。ここに例とフィドルがあります。

フィドルからの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 オーバーレイ レイヤーのドキュメント)

// 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);
于 2013-06-11T22:03:18.180 に答える
0

オーバーレイを使用してそれを行う必要があります。詳細な例については、こちらを確認してください。テキスト部分ともちろん正しい座標を含めるようにカスタマイズできます

于 2013-06-11T22:02:03.347 に答える