Google Maps Onclick panTo new location Too Much Recursion 错误

Question

我有一个简单的位置列表，其中经纬度存储为数据属性

<a name="locations"></a>
<ul>
  <li><a class="location" data-location="52.240477,-0.902656">northampton</a></li>
  <li><a class="location" data-location="51.454265,-0.97813">reading</a></li>
  <li><a class="location" data-location="51.262251,-0.467252">surrey</a></li>
  <li><a class="location" data-location="51.555774,-1.779718">swindon</a></li>
  <li><a class="location" data-location="51.864211,-2.238033">gloucestershire</a></li>
</ul>

和onClick我想将地图平移到点击的位置

function toggleBounce() {

  if (marker.getAnimation() != null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

$('.location').on('click',function(){
  pan($(this).data('location'));
});

function pan(latlon) {
  var panPoint = new google.maps.LatLng(latlon);
  map.panTo(panPoint)
}

var map;
function initialize() {
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng({{$dailydeal[0]['locations'][0]['lat']}}, {{$dailydeal[0]['locations'][0]['lon']}}),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    marker = new google.maps.Marker({
      map:map,
      draggable:true,
      animation: google.maps.Animation.DROP,
      position: new google.maps.LatLng({{$dailydeal[0]['locations'][0]['lat']}}, {{$dailydeal[0]['locations'][0]['lon']}})
    });

    google.maps.event.addListener(marker, 'click', toggleBounce);
}
google.maps.event.addDomListener(window, 'load', initialize);

但是我得到了太多递归错误

Answer 1

panTo needs to be a google.maps.LatLng object or a LatLngLiteral

的参数

你给它的不是（它是一个逗号分隔的字符串，恰好包含纬度和经度：

<li><a class="location" data-location="52.240477,-0.902656">northampton</a></li>

$('.location').on('click',function(){
  pan($(this).data('location'));
});

function pan(latlon) {
    var panPoint = new google.maps.LatLng(latlon);
    map.panTo(panPoint)
}

working fiddle

工作代码片段：

var map;

function pan(latlon) {
  var coords = latlon.split(",");
  var panPoint = new google.maps.LatLng(coords[0], coords[1]);
  map.panTo(panPoint)
}

function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(0, 0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: new google.maps.LatLng(0, 0)
  });

  $('.location').on('click', function() {
    pan($(this).data('location'));
  });
  google.maps.event.addListener(marker, 'click', toggleBounce);
}

function toggleBounce() {

  if (marker.getAnimation() != null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}



google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<a name="locations"></a>

<ul>
  <li><a class="location" data-location="52.240477,-0.902656">northampton</a>

  </li>
  <li><a class="location" data-location="51.454265,-0.97813">reading</a>

  </li>
  <li><a class="location" data-location="51.262251,-0.467252">surrey</a>

  </li>
  <li><a class="location" data-location="51.555774,-1.779718">swindon</a>

  </li>
  <li><a class="location" data-location="51.864211,-2.238033">gloucestershire</a>

  </li>
</ul>
<div id="map-canvas"></div>

Google Maps Onclick panTo new location Too Much Recursion 错误

Google Maps Onclick panTo new location Too Much Recursion error

javascript

jquery

google-maps