GoogleMap 导航
【摘要】
http://www.zdoz.net/ditu.html?startLat=23.1212&startLng=113.1212&endLat=23.1111&endLng=113.2323
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti...
http://www.zdoz.net/ditu.html?startLat=23.1212&startLng=113.1212&endLat=23.1111&endLng=113.2323
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml" >
-
<head>
-
<title>谷歌地图 v3</title>
-
<script src="http://maps.google.com/maps/api/js?v=3.1&sensor=true" type="text/javascript"></script>
-
<script>
-
function GetQueryString(name) {
-
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
-
var r = window.location.search.substr(1).match(reg);
-
if (r != null) return unescape(r[2]); return null;
-
}
-
</script>
-
<script type="text/javascript">
-
var map; // 地图对象
-
var directionsService = new google.maps.DirectionsService();
-
var directionDisplay;
-
var path = null, timer = 0, index = 0, marker = null;
-
function init() {
-
var startLat = GetQueryString("startLat");
-
var startLng = GetQueryString("startLng");
-
var endLat = GetQueryString("endLat");
-
var endLng = GetQueryString("endLng");
-
var Slatlng = new google.maps.LatLng(startLat, startLng);
-
var Elatlng = new google.maps.LatLng(endLat, endLng);
-
-
-
directionsDisplay = new google.maps.DirectionsRenderer();
-
var coor = new google.maps.LatLng(startLat, startLng);
-
map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: coor, mapTypeControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP });
-
-
directionsDisplay.setMap(map);
-
-
var request = {
-
origin: Slatlng,
-
destination: Elatlng,
-
optimizeWaypoints: true,
-
travelMode: google.maps.DirectionsTravelMode.DRIVING
-
};
-
-
// 获取从“广州市火车站”到“广州市番禺区汉溪长隆”的线路
-
directionsService.route(request, function (response, status) {
-
if (status == google.maps.DirectionsStatus.OK) {
-
directionsDisplay.setDirections(response);
-
path = response.routes[0].overview_path;
-
if (path) {
-
timer = window.setInterval(function () {
-
if (!marker) {
-
marker = new google.maps.Marker({ position: path[index++], map: map });
-
} else {
-
if (index < path.length) {
-
marker.setPosition(path[index++]);
-
} else {
-
index = 0;
-
window.clearInterval(timer);
-
}
-
}
-
}, 30);
-
}
-
}
-
});
-
}
-
</script>
-
-
<style>
-
html, body, #map {
-
height: 100%;
-
margin: 0px;
-
padding: 0px
-
}
-
</style>
-
</head>
-
<body οnlοad="init();">
-
<div id="map"></div>
-
</body>
-
</html>
文章来源: zzzili.blog.csdn.net，作者：清雨小竹，版权归原作者所有，如需转载，请联系作者。
原文链接：zzzili.blog.csdn.net/article/details/17317611
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）