我在google地图中创建了一条简单的多段线。我还向多段线添加了click事件侦听器。
问题是,当我点击这条线时,它给出了加拿大某处的经纬度坐标,尽管折线在美国。
<!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.
感谢您的反馈。谢谢!
