使用 Google 地图的 API 和地理定位创建 map 时出现问题

Question

我必须创建一个 map，它使用 Google 地图 API 返回客户端的位置，这是一项任务。

代码工作正常，它定位经度和纬度并将其打印在屏幕上，但是当它创建 map 时抛出这个错误：消息：“地图：预期的 Element 类型的 mapDiv 但被传递了 null。名称：InvalidValueError”

有谁知道为什么会出现这种情况，因为我确实指定了 mapDiv map = new google.maps.Map(document.getElementById("map"), {center: {lat: latitud, lng: longitud}, zoom: 14}); ...

 var longitud; var latitud; var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }; function success(pos) { var crd = pos.coords; latitud = crd.latitude longitud = crd.longitude document.getElementById("latitud").innerHTML = latitud document.getElementById("longitud").innerHTML = longitud }; function error(err) { document.getElementById("map").innerHTML = ('ERROR(' + err.code + '): ' + err.message); }; navigator.geolocation.getCurrentPosition(success, error); function initMap(){ map = new google.maps.Map(document.getElementById("map"), { center: {lat: latitud, lng: longitud}, zoom: 14 }); }

 .map{ margin: 0 auto; width: 300px; height: 300px; }

 <head> <meta charset="utf-8"> <script type="text/javascript" src="funciones.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB0dtNMb8xZh0aMLX4P-KiNccovF1w2tpM&callback=initMap"></script> <link rel="stylesheet" type="text/css" href="style.css"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>Tcuida</title> </head> <div class="paginaPrinc" id="paginaPrinc"> <div id="latitud"></div> <div id="longitud"></div> <div id="map" class="map"></div> </div>

Answer 1

当document.getElementById("map")返回null或除div以外的类型时会发生这种情况。

map = new google.maps.Map(element, options)

function 中的第一个参数需要div类型的元素

Answer 2

发布的代码出现不同的错误： InvalidValueError: setCenter: not a LatLng or LatLngLiteral with finite coordinates: in property lat: not a number ，因为地理定位服务是异步的，并且 map 在返回结果之前创建。

您在两个异步操作之间存在竞争条件：

Google Maps Javascript API v3 的加载，它调用initMap
地理定位服务的结果返回，调用success

最好的办法是消除竞争条件，要么让地理位置 function 调用initMap ，要么让initMap function 发出地理位置请求。

第二个选项的示例：

function initMap(){
    navigator.geolocation.getCurrentPosition(success, error);
}

function success(pos) {
    var crd = pos.coords;
    latitud = crd.latitude
    longitud = crd.longitude   
    document.getElementById("latitud").innerHTML = latitud 
    document.getElementById("longitud").innerHTML = longitud 
    map = new google.maps.Map(document.getElementById("map"), {
        center: {lat: latitud, lng: longitud},
        zoom: 14
    });
};

工作示例

概念证明小提琴

代码片段：

 var longitud; var latitud; var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }; function success(pos) { var crd = pos.coords; latitud = crd.latitude longitud = crd.longitude document.getElementById("latitud").innerHTML = latitud document.getElementById("longitud").innerHTML = longitud map = new google.maps.Map(document.getElementById("map"), { center: { lat: latitud, lng: longitud }, zoom: 14 }); }; function error(err) { document.getElementById("map").innerHTML = ('ERROR(' + err.code + '): ' + err.message); }; function initMap() { navigator.geolocation.getCurrentPosition(success, error); }

 /* Always set the map height explicitly to define the size of the div * element that contains the map. */.map, .paginaPrinc { height: 80%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }

 <div class="paginaPrinc" id="paginaPrinc"> <div id="latitud"></div> <div id="longitud"></div> <div id="map" class="map"></div> </div> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>

Answer 3

您需要添加一个 id 为“map”的 div。 否则document.getElementById("map")将返回 null 所以你会得到那个错误。

    <div id="map" style="width: auto; height: 550px; position: relative; overflow: hidden;"></div>

Answer 4

当您尝试获取元素 ID 时，需要完全加载页面。 否则，在脚本部分，它找不到 html 元素。 更正：window.onload=function(){ inimap(){}}

使用 Google 地图的 API 和地理定位创建 map 时出现问题

问题描述

4 个解决方案

解决方案1
7 2021-04-06 09:59:51

解决方案2
3 已采纳 2020-07-04 03:01:30

解决方案3
2 2021-08-04 09:54:19

解决方案4
0 2022-12-04 12:30:55

使用 Google 地图的 API 和地理定位创建 map 时出现问题

问题描述

4 个解决方案

解决方案1 7 2021-04-06 09:59:51

解决方案2 3 已采纳 2020-07-04 03:01:30

解决方案3 2 2021-08-04 09:54:19

解决方案4 0 2022-12-04 12:30:55

解决方案1
7 2021-04-06 09:59:51

解决方案2
3 已采纳 2020-07-04 03:01:30

解决方案3
2 2021-08-04 09:54:19

解决方案4
0 2022-12-04 12:30:55