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

【问题标题】：How to fix Uncaught InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number?如何修复 Uncaught InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number？
【发布时间】：2014-01-02 07:36:28
【问题描述】：

我正在尝试将我的 googlemaps v2 功能移植到 v3。

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

错误：未捕获的 InvalidValueError：setPosition：不是 LatLng 或 LatLngLiteral：在属性 lat：不是数字 %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;
}

// get the informations
$.getJSON(traders_uri, function(data) {
    // look through the information
$.each(data.traders, function(i, trader) {
var icon = options.icon_image_uri;

var markerIcon = new google.maps.MarkerImage(icon,
    // This marker is 20 pixels wide by 32 pixels tall.
    new google.maps.Size(25, 25),
    // The origin for this image is 0,0.
    new google.maps.Point(0,0),
    // The anchor for this image is the base of the flagpole at 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);

/*here is the error in 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 which is not working

Fiddle which works

【问题讨论】：

标签： javascript google-maps-api-3

【解决方案1】：

未捕获的 InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number

意味着您没有将 numbers 传递给 google.maps.LatLng 构造函数。根据您的评论：

/*Information from chromium debugger
trader: Object
    geo: Object
        lat: "49.014821"
        lon: "10.985072"

*/

trader.geo.lat 和 trader.geo.lon 是字符串，而不是数字。使用 parseFloat 将它们转换为数字：

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

【讨论】：

【解决方案2】：

我遇到了完全相同的错误消息。最后的错误是，我仍然调用 maps 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>

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

【讨论】：

【解决方案3】：

我也遇到了同样的问题，其实lat和long的输入应该是String。直到那时我才成功。

例如：

控制器。

 ViewBag.Lat = object.Lat.ToString().Replace(",", ".");

 ViewBag.Lng = object.Lng.ToString().Replace(",", ".");

查看 - 函数 javascript

<script>
    function initMap() {
        var myLatLng = { lat: @ViewBag.Lat, lng: @ViewBag.Lng};

        // Create a map object and specify the DOM element for display.
        var map = new window.google.maps.Map(document.getElementById('map'),
        {
            center: myLatLng,
            scrollwheel: false,
            zoom: 16
        });

        // Create a marker and set its position.
        var marker = new window.google.maps.Marker({
            map: map,
            position: myLatLng
            //title: "Blue"
        });
    }
</script>

我将双精度值转换为字符串并在 ',' 中替换为 '.'所以一切正常。

【讨论】：

【解决方案4】：

如果您动态加载坐标，您可能传递了null 值，请在调用地图加载器之前设置检查，即：if(mapCords){loadMap}

【讨论】：

【解决方案5】：

使用angular-google-maps

$scope.bounds = new google.maps.LatLngBounds();
for (var i = $scope.markers.length - 1; i >= 0; i--) {
    $scope.bounds.extend(new google.maps.LatLng($scope.markers[i].coords.latitude, $scope.markers[i].coords.longitude));
};    
$scope.control.getGMap().fitBounds($scope.bounds);
$scope.control.getGMap().setCenter($scope.bounds.getCenter());

【讨论】：

【解决方案6】：

我在使用map.setCenter() 设置地图中心时遇到了同样的问题。使用Number() 为我解决了。不得不使用parseFloat 截断数据。

代码 sn-p：

 var centerLat = parseFloat(data.lat).toFixed(0);
 var centerLng = parseFloat(data.long).toFixed(0);
 map.setCenter({
      lat: Number(centerLat),
      lng: Number(centerLng)
 });

【讨论】：

【解决方案7】：

你可以这样用

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

EX : center: { lat: parseFloat(lat), lng: parseFloat(lng) },

【讨论】：

【解决方案8】：

我遇到了同样的问题，并解决了。在我的情况下，由于格式不正确，这是错误的。请检查几何坐标中的第一个和最后一个坐标数组，它们必须相同，然后才会起作用。希望对你有帮助！

【讨论】：

【解决方案9】：

使用一元 (+) 运算符在 Javascript 中转换为 Number 怎么样

lat: 12.23

lat: +12.23

取决于用例。这是一个完整的图表，哪些有效，哪些无效： parseInt vs unary plus - when to use which

【讨论】：