1

我正在尝试使用 maptiler 让用户当前位置显示在地图中，但是我似乎能够获得经度和纬度以显示在文本中但不在地图上......我没有看到或得到什么这里？它显示了正确的位置....要是我能把它放到地图上就好了！

 <script>
//plug in coordinated generated my below code
    var coordsArray = [];
var x = document.getElementById("map");
//generate coordinates to plug into map
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}
//coordinates to put into map
function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;
}
        //Creates the map object with the intended coordinates and sets zoom level to 14
        var map = L.map('map').setView(coordsArray, 14);
        //Creates the required WebGL metadata and chains it to the map object
        var gl = L.mapboxGL({
            attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
            accessToken: 'not-needed',
            style: 'https://api.maptiler.com/maps/streets/style.json?key=qZjWTwtNTmBxDi3ZpTB5'
        }).addTo(map);
        //Creates the marker for the intended coordinates and chains it to the map object 
      var marker = L.marker(coordsArray).addTo(map);
    </script>
        #map {
            min-height:300px;
            width:600px;
        }
<body>
  <div class="main">
  <p>Click on hte button to see where you are on a map!</p>
  <button onclick="getLocation()">Show me where I am</button>
  <div id="map"></div>
      <p><a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a></p>
  
  </div>

</body>

4

0 回答 0