无法在我的地理位置 api 结果中获得 *MAP*
Posted
技术标签:
【中文标题】无法在我的地理位置 api 结果中获得 *MAP*【英文标题】：unable to get *MAP* in my geolocation api result 【发布时间】：2020-07-19 19:37:40 【问题描述】：我正确地得到了我的纬度和经度位置，但谷歌地图在我的文档中不可见，尽管我的 api 密钥是正确的......我无法在我的结果中获得谷歌地图 帮我解决这个问题，通过 googlemap 获取纬度和经度……它是一个简单的 html 文档，带有内部 css 和 java 脚本文件。 为什么我没有地图？？ 这是我的代码
<!DOCTYPE html>
<html>
<head>
<title>location map</title>
<style>
*
padding: 0;margin: 0;
body
width: 100%;
height: 100%;
#button-layer
width: 500px;
height: 200px;
margin: 10px;
text-align:center;
margin: auto;
#map-button
font-size: 30px;
color: red;
background-color: yellow;
font-weight: bold;
width: 300px;
height: 60px;
margin: 10px;
text-align: center;
border: 2px solid black;
#map
height: 100%;
width: 100%;
p
text-align:center;
font-size: 30px;
font-weight: bold;
</style>
</head>
<body>
<h1><center>get your current location</center></h1>
<br><br>
<div id="button-layer">
<button id="map-button" type="button" onclick="locate()">my current
location</button>
</div>
<p id="demo"></p>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=********-
nRPS4GJX4z3HKc3YmH8jjdCXE&callback=initMap">
</script>
<script >
var map;
function initMap()
var mapLayer = document.getElementById("map");
var centerCoordinates = new google.maps.LatLng(37.6, -95.665);
var defaultOptions = center: centerCoordinates, zoom: 4
map = new google.maps.Map(mapLayer, defaultOptions);
var x= document.getElementById("demo");
function showLocation(position)
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
x.innerHTML="latitude:"+latitude+"and longitude:"+longitude;
var infoWindowHTML = "latitude:"+latitude+"<br> longitude:"+longitude;
var infoWindow = new google.maps.InfoWindow(map: map, content: infoWindowHTML);
var currentLocation = lat:latitude, lng:longitude ;
infoWindow.setPosition(currentLocation);
document.getElementById("map-button").style.display = 'none';
function errorHandler(err)
if(err.code==1)
alert("Error: Access is denied!");
else if(err.code==2)
alert("Error: Position is unavailable!");
function locate()
document.getElementById("map-button").disabled=true;
document.getElementById("map-button").innerHTML="processing..."
if(navigator.geolocation)
navigator.geolocation.getCurrentPosition(showLocation,errorHandler);
else
x.innerHTML="geolocation is not supported in this browser";
</script>
【问题讨论】：
请提供minimal reproducible example，包括任何必需的 HTML/CSS。你的<div> is="demo" 有大小吗？
@geocodezip 现在我已经为你提供了完整的 html 和 css 部分。请帮帮我。
【参考方案1】：
这似乎与现在在您的 API 上启用的 maps js 服务（Maps javascript API）有关，或者您的密钥可能受到限制。
从谷歌文档中试试这个例子 - https://developers.google.com/maps/documentation/javascript/adding-a-google-map?hl=ja#step_2_add_a_map_with_a_marker
只需将您的密钥放在这里并检查控制台日志是否有错误，基于此您可以看到出了什么问题。
【讨论】：
以上是关于无法在我的地理位置 api 结果中获得 *MAP*的主要内容，如果未能解决你的问题，请参考以下文章