Question

我有一个从localstorage

获取坐标的联系页面像这样

localStorage.getItem("jc")

我使用eval将字符串转换为变量

var thecoords = eval(localStorage.getItem("jc"));

并使用坐标以这些坐标为中心，如

var center = new google.maps.LatLng(thecoords);并平移到该位置

map.panTo(center);

然而我收到此错误

未捕获RangeError：超出最大调用堆栈大小

我检查了我的坐标，它们的顺序是lat,lng

为什么我会收到此错误？。

Answer 1

google.maps.LatLng构造函数将两个 Numbers 作为参数，而不是传递给它的任何内容：

var center = new google.maps.LatLng(thecoords); // and pan'ed to that location

使用google.maps.LatLngLiteral个对象的示例。

proof of concept fiddle

代码段:(来自jsfiddle，由于沙盒而无法实际工作）

＆＃13;

localStorage.setItem('jc', JSON.stringify({lat: 40.7127837, lng: -74.0059413}));
function initialize() {
    var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    console.log(localStorage.getItem('jc'));
    console.log()
    var marker = new google.maps.Marker({
      map: map,
      position: JSON.parse(localStorage.getItem('jc'))
    });
    map.panTo(JSON.parse(localStorage.getItem('jc')));
}

google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

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

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="clear" value="clear store" type="button" onclick="clearLocalStorage()" />
<div id="panel">
            <div id="color-palette"></div>
        </div>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>

＆＃13;

Answer 2

不，您不需要使用eval（）。存储在本地存储中的项目已经是变量。不要使用邪恶的eval（）。

首先通过控制台记录coords并将其与Google Maps API文档进行比较。

加载坐标时的范围错误

2 个答案: