gMaps.js在单击的标记上平移到地图中心

gMaps.js pan to center map over marker that is clicked

本文关键字：地图 js 单击 gMaps      更新时间：2023-09-26

我一直在环顾四周，我使用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>"
     }              
  });
});

任何帮助将不胜感激，似乎没有什么可以做到这一点。非常感谢您阅读我的帖子。如果您需要更多答案，我很乐意发布它们。

这对

我有用：

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);
  }
});

点击侦听器来自文档中的示例，map对象是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>

相关文章：