以前做的项目H5项目调用了带有标记的 Google 地图,因为key过期导致地图显示不了。重新更新换完key之后发现Android端调用的H5页面地图还是无法显示。有个大坑就是在调试过程中用浏览器打开H5页面会报
Uncaught ReferenceError: google is not defined的错,刚开始一直以为是key不对或者是网络无法翻墙访问不了谷歌地图的原因,但其实这个报错可能是因为电脑端浏览器没有定位功能或者其它原因导致的,而用手机浏览器访问是没有问题的,所以一定要用手机浏览器调试以免被误导。
后面我用
vconsole在手机上调试看到InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lng: not a number这个报错,才找到解决的办法。因为手机端这边是通过url将获取到的经纬度传给H5作为显示位置的,坑就坑在以前用GetQueryString()后直接获取URL参数设置经纬度是可以的,不知道谷歌什么时候改成一定要传数值类型的才可以,所以调用parseFloat()将string转成Float类型的地图就可以正常显示了。
// Initialize and add the map
function initMap() {
// The location of Uluru
// const uluru = { lat: latitude, lng: longitude } 原代码 转成Float类型即可
const uluru = { lat: parseFloat(latitude), lng: parseFloat(longitude) };
// The map, centered at Uluru
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: uluru,
});
// The marker, positioned at Uluru
const marker = new google.maps.Marker({
position: uluru,
map: map,
});
}