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

Posted 2023-02-16

【中文标题】错误：InvalidValueError：setCenter：不是 LatLng 或 LatLngLiteral：在属性 lat：不是数字

【英文标题】：error:InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number

【发布时间】：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 密钥；））

【参考方案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
    );