谷歌地图API - 快速标记到最近的道路 [英] Google maps api - snap marker to nearest road
本文介绍了谷歌地图API - 快速标记到最近的道路的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是简单的代码，如何改善它的结果会成为路标上的标记：
< ;！DOCTYPE html>
< html>
< head>
< title>地图< /标题>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< style type =text / css>
html {height：100％}
body {height：100％;保证金：0; padding：0}
#map_canvas {height：300px; width：600px}
< / style>
< script type =text / javascriptsrc =http://maps.googleapis.com/maps/api/js?sensor=false>< / script>
< script type =text / javascript>
函数initialize（）{
var homeLatlng = new google.maps.LatLng（24.696554，-81.328238）;
var myOptions = {
zoom：15，
center：homeLatlng，
mapTypeId：google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map（document.getElementById（map_canvas），myOptions）;
var image = new google.maps.MarkerImage（
'http://maps.google.com/mapfiles/ms/micons/green-dot.png'，
新的google.maps.Size（32，32），//大小
新google.maps.Point（0,0），//原点
新google.maps.Point（16，32）/ / anchor
）;
var shadow = new google.maps.MarkerImage（
'http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png'，
new google.maps.Size（59，32），// size
new google.maps.Point（0,0），// origin
new google.maps.Point（16，32）/ / anchor
）;
var homeMarker = new google.maps.Marker（{
position：homeLatlng，
map：map，
title：Check this cool location，
图标：图像，
阴影：阴影
}）;
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
< / head>
< body>
< div id =map_canvas>< / div>
< / body>
< / html>
我想知道最简单的方法。
感谢您的帮助。
var directionsService = new google.maps.DirectionsService（）;
directionsService.route（{origin：homeLatlng，destination：homeLatlng，travelMode：google.maps.DirectionsTravelMode.DRIVING}，function（response，status）{
if（status == google。 maps.DirectionsStatus.OK）
{
var homeMarker = new google.maps.Marker（{
position：response.routes [0] .legs [0] .start_location，
map：map，
title：Check this cool location，
icon：image，
shadow：shadow
}）;
} else {
var homeMarker = new google.maps.Marker（{
position：homeLatlng，
map：map，
title：Check this cool location，
icon：image，
shadow：shadow
}）;
}
}）;
I'm trying to snap coordinate to nearest road. But still I can't do that in simple way.
This is simple code, how to improve it that result would be marker on the road:
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 300px; width:600px }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var homeLatlng = new google.maps.LatLng(24.696554,-81.328238);
var myOptions = {
zoom: 15,
center: homeLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var image = new google.maps.MarkerImage(
'http://maps.google.com/mapfiles/ms/micons/green-dot.png',
new google.maps.Size(32, 32), // size
new google.maps.Point(0,0), // origin
new google.maps.Point(16, 32) // anchor
);
var shadow = new google.maps.MarkerImage(
'http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png',
new google.maps.Size(59, 32), // size
new google.maps.Point(0,0), // origin
new google.maps.Point(16, 32) // anchor
);
var homeMarker = new google.maps.Marker({
position: homeLatlng,
map: map,
title: "Check this cool location",
icon: image,
shadow: shadow
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
I would like to get idea for easiest method. Thanks for any help.
解决方案
Use the directions service. Get driving directions from the point of interest to the point of interest. Should be on the road.
var directionsService = new google.maps.DirectionsService();
directionsService.route({origin:homeLatlng, destination:homeLatlng, travelMode: google.maps.DirectionsTravelMode.DRIVING}, function(response, status) {
if (status == google.maps.DirectionsStatus.OK)
{
var homeMarker = new google.maps.Marker({
position: response.routes[0].legs[0].start_location,
map: map,
title: "Check this cool location",
icon: image,
shadow: shadow
});
} else {
var homeMarker = new google.maps.Marker({
position: homeLatlng,
map: map,
title: "Check this cool location",
icon: image,
shadow: shadow
});
}
});
这篇关于谷歌地图API - 快速标记到最近的道路的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
