使用谷歌地图的API和地理位置创建地图时出现问题

我必须创建一个地图，该地图使用Google Maps API返回客户端的位置，这是用于分配的。

代码工作正常，它定位经度和纬度并将其打印在屏幕上，但是当需要创建地图时，会给我抛出此错误：消息："地图：元素类型的预期地图Div，但传递了空。名称：无效值错误">

有谁知道为什么会出现这种情况，因为我确实指定了 mapDivmap = 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=KEY&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>

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

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

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

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

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

Google Maps Javascript API v3 的负载，它调用initMap
success的地理位置服务的结果

最好是删除争用条件，要么让地理位置函数调用initMap，要么让initMap函数发出地理位置请求。

第二个选项的示例：

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>

你需要添加一个 id 为 "map" 的div。否则document.getElementById("map")将返回 null，因此您将收到该错误。

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

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

相关内容

最新更新

热门标签：