无法在我的地理位置 api 结果中获取 MAP

Question

我的纬度和经度位置正确，但是 google 地图在我的文档中不可见，尽管我的 api 键是正确的... 我无法获得 google 映射到我的结果中
帮我解决这个问题，通过 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>

Answer 1

这似乎与地图 js 服务（地图 JavaScript API）有关 API，或者您的密钥可能有限制。

从 google 文档中尝试这个例子 - https://developers.google.com/maps/documentation/javascript/adding-a-google-map?hl=ja#step_2_add_a_map_with_a_marker

只需将您的密钥放在这里并检查控制台日志中是否有错误，基于此您就可以看到出了什么问题。

无法在我的地理位置 api 结果中获取 MAP

unable to get MAP in my geolocation api result

html

javascript

google-maps

geolocation

无法在我的地理位置 api 结果中获取 *MAP*

unable to get *MAP* in my geolocation api result

html

javascript

google-maps

geolocation

无法在我的地理位置 api 结果中获取 MAP

unable to get MAP in my geolocation api result