包含google map api和geolocation后看不到地图

问题描述 投票:0回答:1

除了没有关键警告外,它不会显示任何错误或警告,但仍然不会在我的网页上显示地图。它只显示纬度和经度的文本值,这意味着 getlocation() 和 showposition() 正在工作。

`

<!DOCTYPE html>
<html>
  <head>
    <title>MY FORM</title>
  </head>
  <body>
    <button onclick="getLocation()">trysd</button>
    <div id="map"></div>
    <script
      type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?v=3.exp&callback=Function.prototype"
    ></script>
    <script>
      let x = document.getElementById('map')
      function getLocation() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(showPosition)
        } else {
          x.innerHTML = 'Geolocation is not supported by this browser.'
        }
      }

      function showPosition(position) {
        x.innerHTML =
          'Latitude: ' +
          position.coords.latitude +
          '<br>Longitude: ' +
          position.coords.longitude
        var mapProp = {
          center: new google.maps.LatLng(
            position.coords.latitude,
            position.coords.longitude
          ),
          zoom: 5,
        }
        var map = new google.maps.Map(document.getElementById('map'), mapProp)
      }
    </script>
  </body>
</html>

`

javascript html css google-maps-api-3 geolocation
1个回答
0
投票

尝试使用 CSS 或内联样式向您的

width
元素添加固定的
height
<div id="map">

<head>
  <style>
    #map {
      width: 800px;
      height: 800px;
    }
  </style>
</head>
© www.soinside.com 2019 - 2024. All rights reserved.