javascript 使用 Google Maps API 标记的方向
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27765446/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Directions to marker with Google Maps API
提问by bert
So I'm using the Google Maps API and currently I have a custom marker that highlights the location. What I would like to do, if possible, is be able to click it and have it bring up the google maps directions dialog (e.g THIS) that you get when clicking on a place name normally on google maps. At the minute I've just set it to zoom in on the marker, but obviously I'll just get rid of that function if I can get this to work.
所以我正在使用 Google Maps API，目前我有一个自定义标记来突出显示位置。如果可能的话，我想做的是能够点击它并让它显示谷歌地图方向对话框（例如THIS），当你在谷歌地图上通常点击地名时会得到这个对话框。目前，我刚刚将它设置为放大标记，但显然，如果我可以让它发挥作用，我将摆脱该功能。
Thanks in advance for any help.
在此先感谢您的帮助。
Here is my code:
这是我的代码：
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var location = new google.maps.LatLng(50.871622, -4.131561);
var mapOptions = {
center: location,
zoom: 11,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
var image = {
url: 'img/mapmarker.png',
};
var marker = new google.maps.Marker({
position: location,
map: map,
animation: google.maps.Animation.DROP,
icon: image,
title: 'Deer Park Dairy'
});
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(15);
map.setCenter(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
回答by geocodezip
Your code with the directions handling from this example. The original functionality was written by Mike Williams for the Google Maps Javascript API v2(which is now deprecated and turned off). So this Javascript is based on code provided by the Community Church Javascript Team (http://www.bisphamchurch.org.uk/, http://econym.org.uk/gmap/)
您的代码与此示例中的说明处理。最初的功能是由Mike Williams 为 Google Maps Javascript API v2编写的（现已弃用并关闭）。所以这个 Javascript 基于社区教会 Javascript 团队提供的代码 ( http://www.bisphamchurch.org.uk/, http://econym.org.uk/gmap/)
code snippet:
代码片段：
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
var htmls = [];
// arrays to hold variants of the info window html with get direction forms open
var to_htmls = [];
var from_htmls = [];
// global "map" variable
var map = null;
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 50)
});
function initialize() {
var location = new google.maps.LatLng(50.871622, -4.131561);
var mapOptions = {
center: location,
zoom: 11,
scrollwheel: false
};
map = new google.maps.Map(document.getElementById("map"),
mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
var image = {
url: 'http://maps.google.com/mapfiles/ms/micons/blue.png'
};
var marker = new google.maps.Marker({
position: location,
map: map,
animation: google.maps.Animation.DROP,
icon: image,
title: 'Deer Park Dairy'
});
var i = gmarkers.length;
latlng = location;
// The info window version with the "to here" form open
to_htmls[i] = html + '<br>Directions: <b>To here<\/b> - <a href="javascript:fromhere(' + i + ')">From here<\/a>' +
'<br>Start address:<form action="javascript:getDirections()">' +
'<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +
'<INPUT value="Get Directions" TYPE="button" onclick="getDirections()"><br>' +
'Walk <input type="checkbox" name="walk" id="walk" /> Avoid Highways <input type="checkbox" name="highways" id="highways" />' +
'<input type="hidden" id="daddr" value="' + latlng.lat() + ',' + latlng.lng() +
'"/>';
// The info window version with the "from here" form open
from_htmls[i] = html + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here<\/a> - <b>From here<\/b>' +
'<br>End address:<form action="javascript:getDirections()">' +
'<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br>' +
'<INPUT value="Get Directions" TYPE="SUBMIT"><br>' +
'Walk <input type="checkbox" name="walk" id="walk" /> Avoid Highways <input type="checkbox" name="highways" id="highways" />' +
'<input type="hidden" id="saddr" value="' + latlng.lat() + ',' + latlng.lng() +
'"/>';
// The inactive version of the direction info
var html = marker.getTitle() + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here<\/a> - <a href="javascript:fromhere(' + i + ')">From here<\/a>';
var contentString = html;
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(15);
map.setCenter(marker.getPosition());
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
htmls[i] = html;
}
google.maps.event.addDomListener(window, 'load', initialize);
// ===== request the directions =====
function getDirections() {
// ==== Set up the walk and avoid highways options ====
var request = {};
if (document.getElementById("walk").checked) {
request.travelMode = google.maps.DirectionsTravelMode.WALKING;
} else {
request.travelMode = google.maps.DirectionsTravelMode.DRIVING;
}
if (document.getElementById("highways").checked) {
request.avoidHighways = true;
}
// ==== set the start and end locations ====
var saddr = document.getElementById("saddr").value;
var daddr = document.getElementById("daddr").value;
request.origin = saddr;
request.destination = daddr;
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else alert("Directions not found:" + status);
});
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
// functions that open the directions forms
function tohere(i) {
// gmarkers[i].openInfoWindowHtml(to_htmls[i]);
infowindow.setContent(to_htmls[i]);
infowindow.open(map, gmarkers[i]);
}
function fromhere(i) {
// gmarkers[i].openInfoWindowHtml(from_htmls[i]);
infowindow.setContent(from_htmls[i]);
infowindow.open(map, gmarkers[i]);
}
// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/
// from the v2 tutorial page at:
// http://econym.org.uk/gmap/basic3.htmhtml,
body,
table {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
td,
tr {
height: 100%;
width: 50%;
}<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<table>
<tr>
<td>
<div id="map" style="width:100%; height:100%; border: 2px solid #3872ac;"></div>
</td>
<td>
<div id="directionsPanel"></div>
</td>
</tr>
</table>回答by crubio
Google Maps API has been updated and now, when you get your bearing updates, you can do the following:
Google Maps API 已更新，现在，当您获得方位更新时，您可以执行以下操作：
val position = LatLng(latitude, longitude)
map.addMarker(MarkerOptions().position(position).title(title).icon(icon).flat(true).
rotation(heading.toFloat()))
Don't forget to flat your marker. It ensures the marker is north aligned so that the bearing will work correctly even if the user rotates the map.
不要忘记把你的记号笔弄平。它确保标记与北对齐，这样即使用户旋转地图，方位也能正常工作。
