javascript - Google Maps API 未在地图上标记正确的位置

问题描述

我正在寻找一种方法来显示具有经纬度位置的地图。

我使用以下代码：

 <!DOCTYPE html>
    <html>
      <head>
        <title>Simple Map</title>
        <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
        <style type="text/css">
          /* Always set the map height explicitly to define the size of the div
           * element that contains the map. */
          #map {
            height: 100%;
          }
    
          /* Optional: Makes the sample page fill the window. */
          html,
          body {
            height: 100%;
            margin: 0;
            padding: 0;
          }
        </style>
        <script>
    
          const lat = @json($latitud);
          const lon = @json($longitud);
          let map;
    
          function initMap() {
            map = new google.maps.Map(document.getElementById("map"), {
              center: { lat: lat, lng: lon },
              zoom: 8,
            });
          }
        </script>
      </head>
      <body>
        <div id="map"></div>
    
        <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
        <script
          src="https://maps.googleapis.com/maps/api/js?key=MICLAVE&callback=initMap&libraries=&v=weekly"
          async
        ></script>
      </body>
    </html>

从搜索框中我得到纬度和经度如下：

Livewire.emit ('getLatitude', place.geometry ['location']. Lat ());
Livewire.emit ('getLength', place.geometry ['location']. Lng ());

纬度和经度我是通过谷歌搜索框得到的，我保存值并在变量中传递它们：

const lat = @json($latitud);
const lon = @json($longitud);

这些值已经过验证，没有问题。

问题是它把我带到了那个地方，但是以放大的方式，例如，如果我想展示一个社区，它会展示给我整个城市。

我已经到处找了，找不到原因。

标签： javascriptlaravelgoogle-maps

javascript - Google Maps API 未在地图上标记正确的位置

问题描述

解决方案

推荐阅读