Google 地图 API 没有在地图上标记正确的位置

Question

我正在寻找一种通过经纬度显示位置的地图。

我使用以下代码：

 <!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 ());

经纬度我是通过GoogleSearchBox获取的我把值存起来传到变量里：

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

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

问题是它把我带到了那个地方，但是放大了，例如，如果我想显示一个街区，它会显示整个城市。

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

Answer 1

我建议将 zoom: 8 更改为更大的数字，例如 zoom: 12 或更大。

听起来您的地图居中正确，但显示的区域太大。缩放参数可以帮助调整！

Answer 2

根据上面的评论 - 一种确保您查看所需区域的方法是在指定为地图中心点的相同位置向地图添加一个不可见的圆圈，并使用bounds 应用于地图的圆.. 即 map.fitBounds( circle.getBounds() )

<!DOCTYPE html>
<html>
    <head>
        <title>Simple Map</title>
        <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
        <style type="text/css">
            #map {
                height:100vh;
                width:100%;
            }
            html,
            body {
                height: 100vh;
                margin: 0;
                padding: 0;
            }
        </style>
        <script>
            /*
            const lat = @json($latitud);
            const lon = @json($longitud);
            */
            const lat = -34.606247;
            const lon =  -58.402056;

            let map;
            let radius=100; // adjust this to change apparent zoom level

            function initMap() {
                map = new google.maps.Map(document.getElementById("map"), {
                    center: { lat:lat, lng:lon },
                    zoom: 8,
                });
                let circle=new google.maps.Circle({
                    map:map,
                    center:map.getCenter(),
                    radius:radius,
                    visible:false
                });
                map.fitBounds( circle.getBounds() );
            }
        </script>
    </head>
    <body>
        <div id="map"></div>
        <script src="https://maps.googleapis.com/maps/api/js?key=apikey&callback=initMap" async></script>
    </body>
</html>

地图完成后 zoomed-in 如果您愿意，您可以删除圆圈 - circle.setMap(null); 但无论哪种方式都不会有太大区别。

A JSFiddle to illustrate this in action

Google 地图 API 没有在地图上标记正确的位置

Google Maps API does not mark the correct position on the map

javascript

google-maps

laravel