谷歌地图PanTo OnClick

Question

我试图点击地图上的某个区域.该脚本无法正常工作并重新加载页面.也许有人可以看到问题.

我的功能

function clickroute(lati,long) {

       map = google.maps.Map(document.getElementById("map_canvas"));
      map.panTo(lati,long)
  }

其余的

var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;

  function initialize() {
      geocoder = new google.maps.Geocoder();
    directionsDisplay = new google.maps.DirectionsRenderer();
    var chicago = new google.maps.LatLng(41.850033, -87.6500523);
    var myOptions = {
      zoom:10,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: chicago
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var address = 'virginia water';
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location
        });
      } 
    });
    directionsDisplay.setMap(map);
  }

  function calcRoute() {
    var start = document.getElementById("start").value;
    var end = document.getElementById("end").value;
    var request = {
        origin:start, 
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }

还有我的活动

<a href="" onclick="clickroute(51.433373, -0.712251)">test</a>

Answer 1

问题是你的使用map.panTo(latitude,longitude)但谷歌地图API使用这个:谷歌地图类panTo(latLng myLatLng)在哪里latLng.

尝试这样的事情(未经测试)

function clickroute(lati,long) {
      var latLng = new google.maps.LatLng(lati, long); //Makes a latlng
      map.panTo(latLng); //Make map global
  }

看看这里获取更多信息.

编辑 正如其他人所说,你不想重新制作一张新地图.也许它更容易使其全球化？

Answer 2

panTo 接受 LatLng 对象作为参数，而不仅仅是坐标。创建一个 LatLng 对象，然后将其传递给 panTo 方法。

function clickroute(lati,long) {
    map.panTo(new google.maps.LatLng(lati,long));
    return false; //this will cancel your navigation
}

您的页面会重新加载，因为您没有取消放置在锚标记中的 onClick 中的导航事件。请参阅上面代码中的注释。

就像其他人所说的那样，从这个函数中取出地图变量并使地图成为全局的。