1. дома
  2. Вопрос и ответ
  3. API Карт Google V3: как перейти к определенному маркеру извне карты?

API Карт Google V3: как перейти к определенному маркеру извне карты?

2010-05-08 3 views
11

У меня есть карта с двумя маркерами.API Карт Google V3: как перейти к определенному маркеру извне карты?

Начальный вид карты показывает только один маркер, и я хочу предоставить ссылку рядом с картой, которая будет перемещать карту на 2-й маркер при нажатии.

Вот демо, что я хочу, используя v2 из API: http://arts.brighton.ac.uk/contact-university-of-brighton-faculty-of-arts (обратите внимание на ссылки ниже карте)

Вот что я до сих пор:

<script type="text/javascript"> 
     function initialize() { 
     var latlng = new google.maps.LatLng(50.823817, -0.135634); 
     var myOptions = { 
      zoom: 13, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      mapTypeControlOptions: { 
       style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
       } , 
       scaleControl: false 
      }; 

     var map = new google.maps.Map(document.getElementById("map"), myOptions); 

    // 1st marker 
    var marker1 = new google.maps.Marker({ position: new google.maps.LatLng(50.823817, -0.135634), map: map, title: 'my title' }); 
    var infowindow = new google.maps.InfoWindow({ content: 'my window content' }); 
    google.maps.event.addListener(marker1, 'click', function() { infowindow.open(map, marker1); }); 

    // 2nd marker 
    var marker2 = new google.maps.Marker({ position: new google.maps.LatLng(51.5262405, -0.074549), map: map, title: 'my 2nd title'}); 
    var infowindow2 = new google.maps.InfoWindow({ content: 'content for my 2nd window' }); 
    google.maps.event.addListener(marker2, 'click', function() { infowindow2.open(map, marker2); }); 
    } 
    </script>

Так что я бы как добавить ссылку на marker2, чтобы переместить карту примерно на 50 с лишним миль, eg <a href="#marker2">Second location</a>.

Как мне это сделать?

источник

2010-05-08 Tom

ответ

14

Используйте addDomListener, чтобы добавить событие щелчка по ссылке, которая будет двигать карту к этому маркеру (вам также необходимо добавить идентификатор в теге ссылки, так что вы можете ссылаться на него в коде):

Редактировать : Установить событие в функции инициализации:

<head> 
    <script type="text/javascript"> 
    function initialize() { 
     var myLatlng = new google.maps.LatLng(-34.397, 150.644); 
     var myOptions = { 
     zoom: 8, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     var marker2 = new google.maps.Marker({ position: new google.maps.LatLng(51.5262405, -0.074549), map: map, title: 'my 2nd title'}); 
     google.maps.event.addDomListener(document.getElementById("linkID"), "click", function(ev) { 
     map.setCenter(marker2.getPosition()); 
     } 
    } 
    </script> 
</head> 
<body style="margin:0px; padding:0px;" onload="initialize()"> 
    <a href="javascript:function() { return false; }" id="location2">Second place</a> 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
</body>

источник

2010-05-08 02:27:57 Bob

Смежные вопросы

 Смежные вопросы