有沒有一種方法可以將標記添加到您將標記添加到Google地圖時創建的div中？

這個問題很明顯。當一個標記被添加到谷歌地圖，在DOM中它看起來像它實際上是一個div圍繞標記圖像。如果這些div可以被唯一標識，這對我來說會更容易。我可以使用getElementById（）或類似方法抓取地圖上的各個標記。我正在使用谷歌地圖v3。有沒有一種方法可以將標記添加到您將標記添加到Google地圖時創建的div中？

謝謝。

來源

2011-02-02 phaedryx

哪些是您使用API的版本？ – anon 2011-02-02 01:40:41

是的 - 您可以創建自定義覆蓋類來包含自定義標記。幸運的是，有人已經有了這個想法，並做到了。查看Google Map Utility Libraries（位於頁面底部）的RichMarker和StyledMarker，都允許您將自定義標記/ css類放入標記標記中。

如果你只是想附加工具提示到標記，你也可以簡單地在創建時將一個自定義屬性附加到標記（例如工具提示文本或其他東西），並添加一個mouseover事件處理函數來讀取該屬性並執行它。

例子：

<html> 
    <head> 

    <meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps Markers</title> 
    <script src="http://code.jquery.com/jquery-1.4.4.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
    var map; 
    //your tooltips 
    msg = ['Yeah Right', 'oompa oompa','I feel good'] 
    var marker; 
    function initialize() { 
     var chicago = new google.maps.LatLng(41.875696,-87.624207); 
     var myOptions = { 
     zoom: 11, 
     center: chicago, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     map = new google.maps.Map(document.getElementById("map_canvas"), 
      myOptions); 

    marker = new google.maps.Marker({ 
    map:map, 
    position: chicago, 
    title: "<h2>Sample Tooltip</h2>", //title can also be used for custom tooltips 
    myCustomIndex:2 //storing index of a tooltip 
    }) 


    //if you have multiple markers pls read about event closures http://code.google.com/apis/maps/documentation/javascript/events.html#EventClosures 

//attach an event to the marker 
    google.maps.event.addListener(marker, 'mouseover', function() { 
     //you could also use the title property of the marker to hold the text of the tooltop 
     showFakeTooltip(marker.title) 
     //or you could show it by accessing a custom property 
     showTooltip(marker.myCustomIndex); 
     }); 
    } 

    function showFakeTooltip(title) { 
    $(".fakeTooltip").html(title); 
    } 

    function showTooltip(index) { 
    alert(msg[index]) 
    } 




    </script> 
    </head> 
    <body onload="initialize()"> 

     <div id="map_canvas" style="width: 900px;height: 600px;"></div> 
    <div class="fakeTooltip"></div> 
    </body> 
    </html>

來源

2011-02-02 10:24:35 Michal

有沒有一種方法可以將標記添加到您將標記添加到Google地圖時創建的div中？

回答

相關問題