Question

这个问题非常明显。将标记添加到谷歌地图时，在DOM中看起来它实际上是一个缠绕在标记图像上的div。如果这些div可以被唯一识别，例如，这将使我更容易。我可以使用getElementById（）或类似方法在地图上抓取单个标记。我正在使用谷歌地图v3。

感谢。

Answer 1

是的 - 您可以创建自定义Overlay类以包含自定义标记。幸运的是，有人已经有了这个想法并做到了。查看Google Map Utility Libraries中的RichMarker和StyledMarker（位于页面底部），两者都允许您将自定义标记/ css类放入标记标记中。

如果您只想将工具提示附加到标记，您还可以在创建时将自定义属性附加到标记（例如工具提示文本或其他内容），并添加鼠标悬停事件处理程序以读取该属性并对其执行某些操作

示例：

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

有没有办法在向Google地图添加标记时创建的div中添加ID？

1 个答案: