如何修复Uncaught InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number?

8 浏览
0 Comments

如何修复Uncaught InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number?

我正在尝试将我的googlemaps v2函数迁移到v3。

但是不知何故，我陷入了一个奇怪的错误，我找不到我做错了什么。

错误:Uncaught InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number %7Bmain,adsense,geometry,zombie%7D.js:25

这是我的地图初始化：

var map = new google.maps.Map(document.getElementById("map"),{
  zoom:4,
  size:new google.maps.Size(580,440),
  mapTypeControl: true,
  mapTypeControlOptions: {
    style:google.maps.MapTypeControlStyle.VERTICAL_BAR,
    position: google.maps.ControlPosition.BOTTOM_CENTER,
  },
  panControl: true,
  panControlOptions: {
    position: google.maps.ControlPosition.TOP_LEFT,
  },
  zoomControl: true,
  zoomControlOptions: {
    style: google.maps.ZoomControlStyle.LARGE,
    position: google.maps.ControlPosition.LEFT_CENTER,
  },
  scaleConrol: true,
  scaleControlOptions:{
    position: google.maps.ControlPosition.TOP_LEFT ,
  },
});
map.setCenter(new google.maps.LatLng(49.477643, 9.316406));

下面是出错的部分：

function drawTraders(map, options) {
var traders_uri = options.traders_uri || '';
if ('' == traders_uri) {
    return false;
}
// 获取信息
$.getJSON(traders_uri, function(data) {
    // 遍历信息
$.each(data.traders, function(i, trader) {
var icon = options.icon_image_uri;
var markerIcon = new google.maps.MarkerImage(icon,
    // 此标记的宽度为20像素，高度为32像素。
    new google.maps.Size(25, 25),
    // 此图像的原点为0,0。
    new google.maps.Point(0,0),
    // 此图像的锚点为0,32。
    new google.maps.Point(0, 32)
);
var html = 'test';
/*Information from chromium debugger
trader: Object
    geo: Object
        lat: "49.014821"
        lon: "10.985072"
*/
var myLatlng = new google.maps.LatLng(trader.geo.lat,trader.geo.lon);
/*这里是 new google.maps.Marker() 的错误*/
var marker = new google.maps.Marker({
    position:   myLatlng,
    map: map,
    icon : markerIcon,
});
var infowindow = new google.maps.InfoWindow({
    content: html
});
}

编辑：drawTraders的调用

 drawTraders(map, {
        traders_uri: "getTraders.php",
        icon_image_uri: "icon-cms.gif",
 });

我使用了这个例子 Info Window

编辑：

不工作的Fiddle链接

工作的Fiddle链接

0

3 答案

0 Comments

我遇到了与完全相同的错误消息相同的问题。最后的错误是，我仍然调用了地图v2的javascript。我必须替换：

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=####################" type="text/javascript"></script>

使用以下代码：

<script src="http://maps.googleapis.com/maps/api/js?key=####################&sensor=false" type="text/javascript"></script>

之后，它正常工作了。花了我一些时间;-)

0
0 Comments

问题出现的原因是在设置地图的中心点时，经纬度的值不是数字类型。

解决方法是使用parseFloat函数将经纬度的值转换为数字类型。

具体的代码如下：

map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: { lat: parseFloat(lat), lng: parseFloat(lng) },
    mapTypeId: 'terrain',
    disableDefaultUI: true
});

其中，lat和lng分别是经度和纬度的变量，通过parseFloat函数将其转换为数字类型，然后作为center的属性值传入。这样就能解决Uncaught InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number的问题。

0
0 Comments

解决方法：将字符串转换为数字使用parseFloat函数。修复代码如下：

var myLatlng = new google.maps.LatLng(parseFloat(trader.geo.lat),parseFloat(trader.geo.lon));

文章内容如下：

在使用google.maps.LatLng构造函数时，如果不传入数字类型的参数，就会出现Uncaught InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number的错误。根据你的评论，trader.geo.lat和trader.geo.lon是字符串类型的数据，而不是数字类型。为了解决这个问题，我们需要使用parseFloat函数将它们转换为数字类型。修复后的代码如下：

var myLatlng = new google.maps.LatLng(parseFloat(trader.geo.lat),parseFloat(trader.geo.lon));

0