问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

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

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

原文由 Andres Romero 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascripthtmlgoogle-mapsmaps
阅读 692
2 个回答
得票最新
社区维基
1
✓ 已被采纳

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

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

  1. Google Maps Javascript API v3 的负载，调用 initMap
  2. 返回地理定位服务的结果，调用 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>

原文由 geocodezip 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

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

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

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

原文由 Uzair 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题