Fatal编程技术网
  • javascript/
  • Javascript 点击地图上给出错误纬度和经度的点？

Javascript 点击地图上给出错误纬度和经度的点？

javascript google-maps google-maps-api-3

Javascript 点击地图上给出错误纬度和经度的点？,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我在谷歌地图中创建了一条简单的多段线。我还向多段线添加了单击事件侦听器 问题是，当我点击这条线时，它给出了加拿大某处的纬度和经度坐标，即使多段线在美国 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <titl

我在谷歌地图中创建了一条简单的多段线。我还向多段线添加了单击事件侦听器

问题是，当我点击这条线时，它给出了加拿大某处的纬度和经度坐标，即使多段线在美国

<!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>

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

我感谢您的反馈。谢谢

这是一个奇怪的对于我在苏格兰选择的一个位置来说似乎很好，但上面确实抛出了一个特殊的错误……显然，这不是一个解决方案，但这似乎只发生在地图倾斜时（在地图选项中添加
tilt:0
，或者执行
map.setTilt（0）
）。您的缩放级别也超出范围（此区域的最大缩放级别为20），但这似乎对问题没有任何影响。另一个提示：这在API的发行版和实验版中都会发生，但在3.31中可以正常工作。这看起来像是一个新引入的bug。（哦，点击地图本身会返回正确的坐标）。你在@MrUpsidown击败了我，做了一些进一步的测试，尝试了
tilt（0）
等，并同意我创建的评论。希望这将在下一版本中得到修复。目前，您可以在API调用中使用
v=3.31
，您应该不会有问题。 
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.