Question

我已经在Google地图中创建了一条简单的折线。我还添加了点击事件监听器到折线。

问题是，当我单击该线时，即使折线在美国，它也会在加拿大某处给出纬度和经度坐标。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Polylines</title>
    <style>
      /* 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>
  </head>
  <body>
    <div id="map"></div>
    <script>

      // This example creates a 2-pixel-wide red polyline showing the path of
      // the first trans-Pacific flight between Oakland, CA, and Brisbane,
      // Australia which was made by Charles Kingsford Smith.

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 30,
          center: {lat: 38.582692796303924, lng: -89.9953046014092},
          mapTypeId: 'satellite'
        });



          var flightPlanCoordinates = [
              {lat: 38.582692796303924, lng: -89.9953046014092},
              {lat: 38.582663144388235, lng: -89.99447848103262}
            ];

           var flightPath = new google.maps.Polyline({
                    path: flightPlanCoordinates,
                    icons: [{icon: {path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW}, offset: '100%'}],
                    geodesic: true,
                    strokeColor: 'red',
                    strokeOpacity: 1.0,
                    strokeWeight: 2
                 });

            flightPath.setMap(map);


              google.maps.event.addListener(flightPath, 'click', function(event) {

                         var arr = this.getPath();
                         //coordinates of start and end path points
                         console.log(arr.getAt(0).lat() + ', ' + arr.getAt(0).lng());
                         console.log(arr.getAt(1).lat() + ', ' + arr.getAt(1).lng());

                         //coordinates of clicked point
                         console.log(event.latLng.lat() + ", " + event.latLng.lng());

            });



        flightPath.setMap(map);
      }
    </script>

   <script src="https://maps.googleapis.com/maps/api/js?key=validkey&libraries=geometry&callback=initMap" async defer></script>


    </script>
  </body>
</html>

请按照以下步骤重现该问题。

1) First save the above code in html file and replace validkey to a valid google maps api key. 
2) When the map displays it should already be at maximum zoom level and in satellite mode. 
3) Now click F12 to open developer tools console. 
4) Click on somewhere between the polyline. 
5) It prints three lines.

您可以看到最后一行应该是单击点的坐标。它提供的纬度和经度在加拿大的某个地方。

感谢您的任何反馈。谢谢！

单击地图中的点给出错误的纬度和经度？

0 个答案: