Есть ли способ добавить идентификатор в div, который создается при добавлении маркера на карту Google? - PullRequest
Новая
       14

Есть ли способ добавить идентификатор в div, который создается при добавлении маркера на карту Google?

2 голосов
/ 02 февраля 2011

Вопрос довольно очевиден.Когда маркер добавляется на карту Google, в DOM это выглядит так, как будто это на самом деле div, обернутый вокруг изображения маркера.Для меня было бы намного проще, если бы эти элементы могли быть однозначно идентифицированы, например, я мог бы захватить отдельные маркеры на карте с помощью getElementById () или подобного.Я использую Google Maps v3.

Спасибо.

1 Ответ

4 голосов
/ 02 февраля 2011

Да, есть - вы можете создать собственный класс Overlay для включения пользовательской разметки.К счастью, кто-то уже имел эту идею и сделал это.Ознакомьтесь с RichMarker и StyledMarker в Утилитах Google Map * (внизу страницы), которые позволяют размещать пользовательские классы разметки / 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>
...