Vue2-Google-Maps替换经纬度后地图不显示问题求助

嘿，你遇到的问题根源其实很简单——你写错了纬度值！

地球的纬度范围是 -90° 到 90° 之间，而你设置的 lat:1030.08674842 完全超出了这个合法范围，Google Maps 无法识别这个无效的坐标，所以只能显示控件却加载不出地图内容。

看你提供的目标地图链接，正确的纬度应该是 30.086753（多写了个10），经度 -97.2952385 是没问题的。

修正后的代码示例： #

模板部分（template）：

<GmapMap 
  :center="{lat:30.08674842, lng:-97.29304982}" 
  :zoom="17" 
  map-type-id="terrain" 
  style="width: 500px; height: 300px"
>
</GmapMap>

（把zoom改成17，和目标地图的缩放级别一致，显示会更准确）

脚本部分（script）：

// 修正纬度值，去掉多余的10
var latitute = 30.08674842
var longitude = -97.29304982
export default {
  // name:'myMap'
  data() {
    return {
      latitute,
      longitude
    }
  }
}

另外提醒一下，你原来的script里直接写latitute, longitude不符合Vue组件规范，应该把这些变量放到data选项的返回对象里，这样后续如果要动态修改坐标也能正常响应。

额外小建议： #

• 每次设置地图坐标前，先检查经纬度是否在合法范围内：纬度 -90 ≤ lat ≤ 90，经度 -180 ≤ lng ≤ 180
• 可以在浏览器控制台打印你的center对象，确认坐标值是否正确，方便快速排查这类低级错误

内容的提问来源于stack exchange，提问作者user1592380