谷歌地图Onclick panTo新位置太多递归错误 [英] Google Maps Onclick panTo new location Too Much Recursion error

问题描述

我有一个简单的地点列表，其中lat和lon存储为数据attr

 < a name =locations >< / A> 
< ul> 
< a>< a class =locationdata-location =52.240477，-0.902656> northampton< / a>< / li> 
< a>< a class =locationdata-location =51.454265，-0.97813>阅读< / a>< / li> 
< a>< a class =locationdata-location =51.262251，-0.467252>萨里< / a>< / li> 
< a>< a class =locationdata-location =51.555774，-1.779718> swindon< / a>< / li> 
< li>< a class =locationdata-location =51.864211，-2.238033> gloucestershire< / a>< / li> 
< / ul> 
  

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

 函数toggleBounce（）{
 
 if（marker.getAnimation（）！= null）{
 marker.setAnimation（null） ; 
} else {
 marker.setAnimation（google.maps.Animation.BOUNCE）; $（'。location'）。on（'click'，function（）{
 pan（$（this）.data（'位置'））; 
}）; 
 
函数pan（latlon）{
 var panPoint = new google.maps.LatLng（latlon）; 
 map.panTo（panPoint）
} 
 
 var map; 
函数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（标记，'click'，toggleBounce）; 
} 
 google.maps.event.addDomListener（window，'load'，initialize）; 
  

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

解决方案

panTo 需要是 google.maps.LatLng 对象或 LatLngLiteral

什么这是一个逗号分隔的字符串，它包含一个纬度和一个经度：

 < li> ;< a class =locationdata-location =52.240477，-0.902656> northampton< / a>< / li> 
 
 $（'。location'点击'，函数（）{
 pan（$（this）.data（'location'））; 
}）; 
 
函数pan（latlon）{
 var panPoint = new google.maps.LatLng（latlon）; 
 map.panTo（panPoint）
} 
  

工作小提琴

工作代码片段：

  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％;宽度：100％; margin：0px; < script src =https：//   

I have a simple list of locations with the lat and lon stored as data attr

<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>

and onClick I want to pan the map to the clicked location

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

But I get a Too Much Recursion Error

解决方案

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

What you are giving it is neither (it is a comma separated string that happens to contain a latitude and a longitude:

<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

working code snippet:

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>

这篇关于谷歌地图Onclick panTo新位置太多递归错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！