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

Question

I have to create a map that returns the location of a client using Google Maps API, it's for an assignment.我必须创建一个 map，它使用 Google 地图 API 返回客户端的位置，这是一项任务。

The code works fine, it locates the longitude and latitude and prints it on screen, pbut when it's time to create the map throws me this error: message: "Map: Expected mapDiv of type Element but was passed null. name: InvalidValueError"代码工作正常，它定位经度和纬度并将其打印在屏幕上，但是当它创建 map 时抛出这个错误：消息：“地图：预期的 Element 类型的 mapDiv 但被传递了 null。名称：InvalidValueError”

Does anyone know why that appears since I did specify mapDiv map = new google.maps.Map(document.getElementById("map"), {center: {lat: latitud, lng: longitud}, zoom: 14});有谁知道为什么会出现这种情况，因为我确实指定了 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

This occurs when document.getElementById("map") returns null or type other than div .当document.getElementById("map")返回null或除div以外的类型时会发生这种情况。

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

The 1st parameter in the function expects element of div type function 中的第一个参数需要div类型的元素

Answer 2

I get a different error with the posted code: InvalidValueError: setCenter: not a LatLng or LatLngLiteral with finite coordinates: in property lat: not a number , because the geolocation service is asynchronous, and the map is created before it returns a result.发布的代码出现不同的错误： InvalidValueError: setCenter: not a LatLng or LatLngLiteral with finite coordinates: in property lat: not a number ，因为地理定位服务是异步的，并且 map 在返回结果之前创建。

You have a race condition between two asynchronous operations:您在两个异步操作之间存在竞争条件：

the load of the Google Maps Javascript API v3, which calls initMap Google Maps Javascript API v3 的加载，它调用initMap
the return of the results of the geolocation service, which calls success地理定位服务的结果返回，调用success

Best would be to remove the race condition, either have the geolocation function call initMap or have the initMap function make the geolocation request.最好的办法是消除竞争条件，要么让地理位置 function 调用initMap ，要么让initMap function 发出地理位置请求。

Example of the second option:第二个选项的示例：

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

working example工作示例

proof of concept fiddle概念证明小提琴

code snippet:代码片段：

 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

You need to add a div with id "map".您需要添加一个 id 为“map”的 div。 Else document.getElementById("map") will return null so you will get that error.否则document.getElementById("map")将返回 null 所以你会得到那个错误。

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

Answer 4

when you try to get the element ID, need to fully load the page.当您尝试获取元素 ID 时，需要完全加载页面。 Otherwise, in the script part, it cannot find the html element.否则，在脚本部分，它找不到 html 元素。 Correction: window.onload=function(){ inimap(){}}更正：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