使用 Google 地图的 API 创建地图时出现问题

Question

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

代码工作正常，它定位经度和纬度并将其打印在屏幕上，p但是当创建地图时抛出这个错误：消息：“地图：预期的 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

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

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

Google Maps Javascript API v3 的负载，它调用 initMap
地理定位服务结果的return，调用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
    });
};

working example

proof of concept fiddle

代码片段：

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 2

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

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

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

Answer 3

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

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

使用 Google 地图的 API 创建地图时出现问题

Problem when creating a map using Google Maps' API

html

javascript

maps

google-maps