错误：InvalidValueError：setCenter：不是 LatLng 或 LatLngLiteral：在属性 lat：不是数字答案

【问题标题】：error:InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number错误：InvalidValueError：setCenter：不是 LatLng 或 LatLngLiteral：在属性 lat：不是数字
【发布时间】：2017-12-06 07:16:55
【问题描述】：

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

它给了我以下错误：

error:InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in 属性 lat：不是数字

【问题讨论】：

.value 返回一个字符串 -> parseFloat()
错误已解决，但您能帮忙定位位置吗？实际上该位置在地图上如何显示，但如何显示该位置的标记？ .谢谢
将其作为一个单独的问题发布（其中应包括minimal, complete, and verifiable example（但不要发布您的 API 密钥；））

标签： javascript google-maps-api-3 maps

【解决方案1】：

HTMLInputElement 的 .value 属性将值作为字符串返回。

您必须先用parseFloat() 解析lat 和lng 的内容，然后才能将其传递给地图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'
    });
}

【讨论】：

感谢老兄的帮助...已解决 :))

【解决方案2】：

只需在变量前添加“+”即可：

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

【讨论】：

【解决方案3】：

同样的错误，略有不同的场景：

尝试使用自动完成的纬度/经度更新地图时，我不断收到此错误（与 OP 相同）：

    var place = autocomplete.getPlace();
    var geo = place.geometry.location;
    loadMapAt(new google.maps.LatLng(geo.lat, geo.lng));

这个“一个奇怪的技巧”修复了它。将第二行替换为：

    var geo = JSON.parse(JSON.stringify(place.geometry.location));

【讨论】：

【解决方案4】：

我在使用上述建议未解决的自动完成时也遇到了这个错误。就我而言，我可以通过将 lat 和 lng 作为属性传递给我的 Gmaps 元素来纠正此问题：

<Gmaps width={width}
       height={height}
       lat={lat}
       lng={lng}
       params = {{
           v: '3.exp',
           libraries: 'geometry, visualization, places', 
           key: GOOGLE_MAPS_API_KEY
       }}
       onMapCreated={this.onMapCreated}/>

这是使用 react-gmaps 1.4.2 版。

【讨论】：

【解决方案5】：

只需初始化参数：

function initMap(lat_ = 0, lon_ = 0) {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: lat_, lng: lon_},
        zoom: 10
    });
}

【讨论】：