错误:InvalidValueError:setCenter:不是LatLng或LatLngLiteral:在属性lat中:不是数字

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了错误:InvalidValueError:setCenter:不是LatLng或LatLngLiteral:在属性lat中:不是数字相关的知识,希望对你有一定的参考价值。

function initAutocomplete() {
    var lat=document.getElementById('lat').value;
    var lng=document.getElementById('lng').value;
    console.log(lat);
    console.log(lng);


    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat:lat, lng:lng},
      zoom: 13,
      mapTypeId: 'roadmap'
    });}

它给了我以下错误:

错误:InvalidValueError:setCenter:不是LatLng或LatLngLiteral:在属性lat中:不是数字

答案

.valuehtmlInputElement属性将值返回为字符串。

你需要用lat解析lngparseFloat()的内容,然后再将它传递给maps API

function initAutocomplete() {
    var lat = parseFloat(document.getElementById('lat').value);
    var lng = parseFloat(document.getElementById('lng').value);

    var map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: lat,
            lng: lng
        },
        zoom: 13,
        mapTypeId: 'roadmap'
    });
}
另一答案

只需在变量前添加“+”:

function initAutocomplete() {
var lat=document.getElementById('lat').value;
var lng=document.getElementById('lng').value;

var map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: +lat, lng: +lng},
  zoom: 13,
  mapTypeId: 'roadmap'
});}

以上是关于错误:InvalidValueError:setCenter:不是LatLng或LatLngLiteral:在属性lat中:不是数字的主要内容,如果未能解决你的问题,请参考以下文章

如何修复Uncaught InvalidValueError:setPosition:不是LatLng或LatLngLiteral:在属性lat中:不是数字?

InvalidValueError:不是 HTMLInputElement 的实例

未捕获的 InvalidValueError:不是数组

为啥这不是 google.maps.Map 的地图实例? InvalidValueError:setMap:不是 Map 的实例;

InvalidValueError:initAutocomplete 不是 Google Places 和 Autocomplete API 的功能

未捕获的 InvalidValueError:不是 Feature 或 FeatureCollection