Я создал простую полилинию в Google Maps.Я также добавил слушателя события щелчка к полилинии.
Проблема в том, что когда я нажимаю на линию, она дает координаты широты и долготы где-то в Канаде, даже если ломаная находится в США.
<!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.
Вы видите, что последняя строка должнабыть координатой нажатой точки.Широта и долгота это где-то в Канаде.
Я ценю любые отзывы.Спасибо!