Google Geolocation and Direction API
Como é que se combina tanto a API de Geolocalização do Google como a API de direcção de modo a que, quando se carrega no marcador de geolocalização e em qualquer um dos marcadores (dos quais destacei as coordenadas), se mostre a direcção entre ambos.
código de geolocalização
<script type="text/javascript">
function initialize() {
var locations = [
['Hougang', 1.37265, 103.893658],
['Punggol', 1.400617, 103.907833],
['MacRitchie Reservoir', 1.346002, 103.825436],
['Bishan', 1.352051, 103.849125],
['Sentosa', 1.251226, 103.830757]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: new google.maps.LatLng(1.37265, 103.893658),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
// Check if user support geo-location
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var geolocpoint = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: 8,
center: geolocpoint,
mapTypeId: google.maps.MapTypeId.HYBRID
}
// Place a marker
var geolocation = new google.maps.Marker({
position: geolocpoint,
map: map,
title: 'Your geolocation',
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
});
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
2
1 answers
- Adicione um click listener aos marcadores.
- quando executar, prima a posição do marcador actual numa matriz.
- Se o comprimento do array for dois, chame o serviço de instruções com esses dois locais como pontos de início e fim.
Semelhante a Este exemplo , mas em vez de um "mapa" click listener, use "marcador" click listeners.
Disseste que querias forçar o primeiro clique a estar no marcador de geolocalização, precisas de escrever. código para verificar a localização do marcador e verificar que ele é o marcador de geolocalização Se você quiser fazer isso. Eu pensaria que seria mais simples apenas ter o usuário clicar em um dos marcadores de destino, em seguida, gerar direções a partir do marcador de geolocalização (que você precisaria manter uma referência especial).Exemplo que assume que o início é o ponto de geolocalização
Excerto de código de exemplo:
var geolocation = null;
var ren = null;
function initialize() {
var locations = [
['Hougang', 1.37265, 103.893658],
['Punggol', 1.400617, 103.907833],
['MacRitchie Reservoir', 1.346002, 103.825436],
['Bishan', 1.352051, 103.849125],
['Sentosa', 1.251226, 103.830757]
];
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 13,
center: new google.maps.LatLng(1.37265, 103.893658),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
// Place a marker
geolocation = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Your geolocation',
icon: 'https://maps.google.com/mapfiles/ms/micons/green.png'
});
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
if (ren && ren.getMap()) ren.setMap(null);
ren = new google.maps.DirectionsRenderer({
'draggable': true
});
ren.setMap(map);
ren.setPanel(document.getElementById("directionsPanel"));
ser = new google.maps.DirectionsService();
//Cria a rota, o DirectionTravelMode pode ser: DRIVING, WALKING, BICYCLING ou TRANSIT
ser.route({
'origin': geolocation.getPosition(),
'destination': marker.getPosition(),
'travelMode': google.maps.DirectionsTravelMode.DRIVING
}, function(res, sts) {
if (sts == 'OK') ren.setDirections(res);
})
}
})(marker, i));
}
// Check if user support geo-location
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var geolocpoint = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: 8,
center: geolocpoint,
mapTypeId: google.maps.MapTypeId.HYBRID
}
// Place a marker
geolocation = new google.maps.Marker({
position: geolocpoint,
map: map,
title: 'Your geolocation',
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
});
});
} else {
// Place a marker
geolocation = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Your geolocation',
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
1
Author: geocodezip, 2018-08-07 10:56:15