javascript 谷歌地图中的自定义和航点标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22639178/
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
Custom and waypoint markers in Google Maps
提问by Jaap Veldhorst
I'm looking for some help. I have below Google Map code which is working fine. Only thing I need is a custom marker on the starting point: (51.943382, 6.463116) and no markers on the waypoints. Can this be done? I have tried several solutions from Stackoverflow, but my understanding of GMs code and programming skills are not sufficient enough to get what I want. Thanks!
我正在寻求帮助。我有下面的谷歌地图代码，它工作正常。我唯一需要的是起点上的自定义标记：(51.943382, 6.463116) 并且航点上没有标记。这能做到吗？我已经尝试过 Stackoverflow 的几种解决方案，但是我对 GMs 代码和编程技巧的理解还不足以得到我想要的。谢谢！
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Directions Waypoints</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer({
});
var myOptions = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var waypts = [];
stop = new google.maps.LatLng(51.943571, 6.463856)
waypts.push({
location:stop,
stopover:true});
stop = new google.maps.LatLng(51.945032, 6.465776)
waypts.push({
location:stop,
stopover:true});
stop = new google.maps.LatLng(51.945538, 6.469413)
waypts.push({
location:stop,
stopover:true});
stop = new google.maps.LatLng(51.947462, 6.467941)
waypts.push({
location:stop,
stopover:true});
stop = new google.maps.LatLng(51.945409, 6.465562)
waypts.push({
location:stop,
stopover:true});
stop = new google.maps.LatLng(51.943700, 6.462096)
waypts.push({
location:stop,
stopover:true});
start = new google.maps.LatLng(51.943382, 6.463116);
end = new google.maps.LatLng(51.943382, 6.463116);
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.WALKING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
}
});
}
</script>
</head>
<body onLoad="initialize()">
<div id="map_canvas" style="width:70%;height:80%;"></div>
</body>
</html>
回答by MrUpsidown
I see only one solution to achieve that. Use the below code to remove all markers:
我只看到一种解决方案来实现这一目标。使用以下代码删除所有标记：
directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true
});
And manually add a marker at your start point.
并在起点手动添加标记。
Here is a JSFiddleto illustrate.
这里有一个JSFiddle来说明。
Hope this helps!
希望这可以帮助！
回答by duncan
Just add your own marker independent of the directions.
只需添加您自己的独立于方向的标记。
var marker = new google.maps.Marker({
position: start,
map: map
});
This is assuming you're adding this to your initialize function, in order to access the map. Otherwise you'd need to make your map variable global so it can be accessed in your calcRoute function.
这是假设您将它添加到您的初始化函数中，以便访问地图。否则，您需要将地图变量设为全局变量，以便可以在您的 calcRoute 函数中访问它。
And in your directionsDisplay object, set suppressMarkers to true:
并在您的方向显示对象中，将抑制标记设置为 true：
directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers : true
});
See https://developers.google.com/maps/documentation/javascript/reference#DirectionsRendererOptions
请参阅https://developers.google.com/maps/documentation/javascript/reference#DirectionsRendererOptions
