gMaps.js平移到点击标记的中心地图

时间:2015-03-06 04:25:51

标签: javascript google-maps google-maps-api-3

我一直在四处寻找并使用gMaps.js 链接是:http://hpneo.github.io/gmaps/

我有一个for循环遍历所有我的坐标(经度和纬度)并在所有其他城市放置标记。当我点击地图围绕它的标记时,我想问题。

我试过了:

     .click(function() {
            map.panTo(23,43);
      }

此外:

     google.maps.event.addListener(marker, 'click', function() {
     infowindow.open(map,marker);

我的Gmap区域如下:

    $(document).ready(function(){
        $("#tell").hide();
        map = new GMaps({
        div: '#googleMap',
        lat: listRecCenters[4].latitude,  //property map (city) in list at array index 4 no quotes
        lng: listRecCenters[4].longitude,
        zoom: 10,
    }); 

    for(i = 0; i < listRecCenters.length; i++)
    {
        map.addMarker({
        lat: listRecCenters[i].latitude,
        lng: listRecCenters[i].longitude,
        title: listRecCenters[i].city,
        infoWindow: {content: "<p class = \"info\"><img src = \"img/rec.jpg\" style = \"float:right;margin:-10px; padding-right:4px;padding-top:4px;width:40px; height:40px;\"></span>" + listRecCenters[i].name + "<br><span class = \"addcolor\">" + listRecCenters[i].addr
        + "<br/>" + listRecCenters[i].city + listRecCenters[i].phone + "</span>" + "<span class = \"myUrl\"><a href = \"http://maps.google.com/?q=" + listRecCenters[i].addr + " "+listRecCenters[i].city + ",Ontario, Canada\">Google Link</a><a <a href = \"http://maps.google.com/maps/geo?output=xml&q" + listRecCenters[i].addr + " "+listRecCenters[i].city + ",Ontario, Canada\">Lat/Long</a><a</span></p>"
     }              
  });
});

任何帮助都会非常感激,似乎没有什么能够做到这一点。非常感谢您阅读我的帖子。如果您需要更多答案,我很乐意发布。

1 个答案:

答案 0 :(得分:0)

这对我有用:

map.addMarker({
  lat: -12.04,
  lng: -77.02,
  title: 'Marker with InfoWindow',
  infoWindow: {
    content: '<h3>InfoWindow Content</h3>lat: -12.04<br>lng: -77.02<br>'
  },
  click: function(e) {
    map.map.panTo(e.position);
  }
});

点击侦听器来自example in the documentationmap对象是GMaps()对象,panTo方法需要google.maps.Map对象,该对象存储在GMap.map属性中。

var map = new GMaps({
  div: '#map',
  lat: -12.043333,
  lng: -77.028333
});
map.addMarker({
  lat: -12.043333,
  lng: -77.028333,
  title: 'Marker with InfoWindow',
  infoWindow: {
    content: '<h3>InfoWindow Content</h3>lat: -12.043333<br>lng: -77.028333<br>'
  },
  click: function(e) {
    map.map.panTo(e.position);
  }
});
map.addMarker({
  lat: -12.04,
  lng: -77.02,
  title: 'Marker with InfoWindow',
  infoWindow: {
    content: '<h3>InfoWindow Content</h3>lat: -12.04<br>lng: -77.02<br>'
  },
  click: function(e) {
    map.map.panTo(e.position);
  }
});
html,
body,
#map {
  display: block;
  width: 100%;
  height: 100%;
}
#map {
  background: #58B;
}
<script src="http://maps.google.com/maps/api/js"></script>
<script src="https://rawgithub.com/HPNeo/gmaps/master/gmaps.js"></script>

<div id="map"></div>