從外部錨定標記平移並打開gmap3中的infowindow

Question

我需要居中放置地圖並從地圖外部的鏈接打開信息彈出窗口。該鏈接甚至可以是onclick =「javascript（）;」適用於錨點。

我的地圖代碼是：歡迎

 $('#wtb-map').gmap3(
     { action:'init', 
     options:{ 
      streetViewControl: false, 
      mapTypeControl: false  
      //zoom: 5 
     } 
     }, 
     { action: 'addMarkers', 
     markers:[ 

      {lat:49.8620722, lng:6.352047, data:'<div class="infowindow"><p><strong>cccc</strong><br/> 275 Croydon Road, Beckenham<br/>Kent, BR3 3PS<br/>United Kingdom <br/>0208-6501300 <br/> <a href="">www.mywebsite.co.uk</a><br/><strong class="tipo">RESELLER</strong></p><a class="moreinfo" href="wtb-about.php">more info</a></div>'}, 
      {lat:46.59433,lng:0.342236, data:'<div class="infowindow"><p><strong>aaaaa</strong><br/> 275 Croydon Road, Beckenham<br/>Kent, BR3 3PS<br/>United Kingdom <br/>0208-6501300 <br/> <a href="">www.mywebsite.co.uk</a><br/><strong class="tipo">RESELLER</strong></p><a class="moreinfo" href="wtb-about.php">more info</a></div>'}, 
      {lat:42.704931, lng:2.894697, data:'<div class="infowindow"><p><strong>bbbbb</strong><br/> 275 Croydon Road, Beckenham<br/>Kent, BR3 3PS<br/>United Kingdom <br/>0208-6501300 <br/> <a href="">www.mywebsite.co.uk</a><br/><strong class="tipo">RESELLER</strong></p><a class="moreinfo" href="wtb-about.php">more info</a></div>'} 
     ], 
     marker:{ 
      options:{ 
      draggable: false, 
      icon:"../img/marker.png" 
      }, 

      events:{ 
      click: function(marker, event, data){ 
        var map = $(this).gmap3('get'), 
        infowindow = $(this).gmap3({action:'get', name:'infowindow'}); 
        if (infowindow){ 
        infowindow.open(map, marker); 
        infowindow.setContent(data); 
        } else { 
        $(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: data}}); 
        } 




      } 
      } 
     } 
     }, 
     "autofit"); 

所以

<a href="#" onclick="code to center/open info map to the first marker">One</a> 
<a href="#" onclick="code to center/open info map to the secondmarker">Two</a> 
<a href="#" onclick="code to center/open info map to the thirdmarker">3</a> 

任何建議。

Answer 1

這對我來說工作方式

var data = [ 
    {latLng:[48.8620722,2.352047], data:"Paris" ,tag:1 }, 
    {latLng:[46.59433,0.342236], data:"Poitiers : great city !" ,tag:2 }, 
    {latLng:[42.704931,2.894697], data:"Perpignan ! GO USAP !" ,tag:3 } 
] 
$('#map1').gmap3({ 
map: { 
    action: 'init', 
    center: [2.811371, 4.557129], 
    zoom: 20, 
    mapTypeId: google.maps.MapTypeId.TERRAIN, 
    callback : function(){ 
     $.each(data, function(i, item){ 
      $("#list ul").append("<li><a href='#' rel='" + (i+1) + "'>" + item.data + "</a><div style='display: none;'>"+ item.data +"</div></li>"); 
     }); 
    } 
}, 
marker: { 
    values: data, 
    options: { 
     draggable: false 
    }, 
    events: { 
     mouseover: function(marker, event, context){ 
      var map = $(this).gmap3("get"); 
      infowindow = $(this).gmap3({get:{name:"infowindow"}}); 
      if (infowindow){ 
       infowindow.open(map, marker); 
       infowindow.setContent(context.data); 
      } 
      else { 
       $(this).gmap3({ 
        infowindow:{ 
         anchor:marker, 
         options:{content: context.data} 
        } 
       }); 
      } 
     }, 
     mouseout: function(){ 
      var infowindow = $(this).gmap3({get:{name:"infowindow"}}); 
      if (infowindow){ 
       infowindow.close(); 
      } 
     } 
    } 
} 
}); 

$("#list ul li a").click(function(){ 
    var tagid = $(this).attr("rel"); 
    var data = $(this).next("div").html(); 
    var map = $("#map1").gmap3({get: {name:'map'}}); 
    var infowindow = $("#map1").gmap3({get: {name:'infowindow'}}); 
    var marker = $("#map1").gmap3({get: {name:"marker",tag: parseInt(tagid)}}); 
    if (infowindow){ 
     infowindow.open(map, marker); 
     infowindow.setContent(data); 
    } 
    else { 
     $("#map1").gmap3({infowindow:{anchor:marker,options:{content: data}}}); 
    } 
    return false; 
}); 

Answer 2

您可以使用addDomListener（）查找ID來觸發點擊。文檔

特定部分： http://code.google.com/apis/maps/documentation/javascript/events.html#DomEvents

google.maps.event.addDomListener(document.getElementById("foo"), 'load', initialize); 

然而，在每個項目基礎上創建自定義監聽我還沒有搞清楚，我已經發布了同樣的問題。