google 地图 V3 运动轨迹
2024-06-02 05:56:24
不使用坐标：地址<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 type="text/javascript">var map;// 地图对象var directionsService = new google.maps.DirectionsService();var directionDisplay;var path = null,timer = 0,index = 0,marker = null;function init() {directionsDisplay = new google.maps.DirectionsRenderer();var coor = new google.maps.LatLng(39.960872,116.271486);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: "北京市南坞",//起始上班地点destination: "北京市人民大学",//结束上班地点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);//30是运动时间}}});}</script>
</head>
<body οnlοad="init();"><div id="map" style="width:800px; height:800px;"></div>
</body>
</html>
效果：
使用坐标：
代码：
<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 type="text/javascript">var map;// 地图对象var directionsService = new google.maps.DirectionsService();var directionDisplay;var path = null,timer = 0,index = 0,marker = null;function init() {directionsDisplay = new google.maps.DirectionsRenderer();var coor = new google.maps.LatLng(39.960872,116.271486);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: "39.956728,116.275949",//起始上班地点 (北京市南坞坐标)destination: "39.959392,116.299424",//结束上班地点 （北京市人民大学坐标）//waypoint 包括以下字段：//•location（必需）指定路标的地址。//•stopover（可选）指示此路标是路线上的实际停留点 (true)，还是仅为通过指定位置 (false) 的路线首选项。默认情况下，中途停留为 true。waypoints: [ {location:"39.961497,116.284018",stopover:true},{location:"39.966464,116.283417",stopover:true},{location:"39.966925,116.28861",stopover:true},{location:"39.966464,116.283417",stopover:true},{location:"39.961497,116.284018",stopover:false}], optimizeWaypoints: true,travelMode: google.maps.DirectionsTravelMode.DRIVING};/*Google Maps API 需要调用外部服务器，因此，对路线服务的访问是异步的。为此，您需要传递一个回调方法，以在请求完成后执行。此回调方法将会对结果进行处理。请注意，路线服务可能以单独 routes[] 数组的形式传回多个可能的行程。要在 V3 中使用路线，请创建一个类型为 DirectionsService 的对象，并调用 DirectionsService.route() 向路线服务发送一条请求，方法是为其传递一个 DirectionsRequest 对象常量，其中包含输入项和一个回调方法，该回调方法将会在收到响应后执行。DirectionsRequest 对象常量包含下列字段：{ origin: LatLng | String, destination: LatLng | String, travelMode: TravelMode, unitSystem: UnitSystem, waypoints[]: DirectionsWaypoint, optimizeWaypoints: Boolean, provideRouteAlternatives: Boolean, avoidHighways: Boolean, avoidTolls: Boolean region: String }下面对这些字段进行了说明：•origin（必需）指定计算路线时所用的起始地点。该值可以指定为 String（如“Chicago, IL”），也可以指定为 LatLng 值。•destination（必需）指定计算路线时所用的结束地点。该值可以指定为 String（如“Chicago, IL”），也可以指定为 LatLng 值。•travelMode（必需）指定计算路线时所用的交通方式。在下面的出行方式中指定有效值。•unitSystem（可选）指定显示结果时使用的单位制。在下面的单位制中指定有效值。•waypoints[]（可选）指定 DirectionsWaypoint 数组。路标将通过让路线经过指定地点而改变路线。将路标指定为带有如下字段的一个对象常量：◦location 将要进行地址解析的路标地点指定为 LatLng 或 String。◦stopover 是一个布尔值，用于指示路标是否为路线上的停留点，这可以将这条路线分为两条路线。（有关路标的详细信息，请参见下文的在路线中使用路标。）•optimizeWaypoints（可选）指定可以优化使用所提供 waypoints 的路线，以提供尽可能短的路线。如果为 true，路线服务将在 waypoint_order 字段中传回重新排序的 waypoints。（有关详细信息，请参见下文的在路线中使用路标。）•provideRouteAlternatives（可选）设置为 true 时，指定路线服务可以在响应中提供多条备选路线。请注意，提供备选路线可能增加服务器的响应时间。•avoidHighways（可选）设置为 true 时，表示计算的路线应避开主要公路（如果可能）。•avoidTolls（可选）设置为 true 时，表示计算的路线应避开收费道路（如果可能）。•region（可选）指定区域代码，该区域代码指定为 ccTLD（“顶级域”）双字符值。（有关详细信息，请参见下文的区域偏向。）*/// 获取从“北京市南坞”到“北京市人民大学”的线路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);//30是运动时间}}});}</script>
</head>
<body οnlοad="init();"><div id="map" style="width:800px; height:800px;"></div>
</body>
</html>
效果：
google 地图 V3 运动轨迹相关推荐
- Google 地图 API V3 使用入门1
Hello, World 要开始了解 Google Maps API,最简单的方法就是查看简单的示例.以下网页显示了一张以澳大利亚新南威尔士的悉尼为中心的地图: <!DOCTYPE html&g ...
- 免费Google地图API使用说明(转)
转自:http://www.cnblogs.com/mypig/articles/1936154.html 01 事件监视 02 03 GEvent.addListener用来注册事件监视器,在 ...
- 笔记-网页内嵌Google地图与地理位置模拟
终于有机会开始玩HTML5中行动装置GPS整合应用. 我的第一步是希望能在网页整合Google地图,即便实际需求不一定需要显示 地图,但在开发测试阶段,要求开发人员直接由25.1234, 121.56 ...
- 百度地图绘制运动轨迹技巧
很多运动类的app都有画出跑步者运动轨迹的需求,拿咕咚来说,我们看一下它的效果图: 本篇将要实现的效果1.跑步结束后,静态的画出整个运动轨迹2.跑步过程中,时时动态的画运动轨迹 如何实现: 1.将点与 ...
- vue中使用google地图（自定义label、信息窗口）
最近公司爱尔兰项目需要使用google地图,项目还是用vue写的,那我就寻思找个vue能用的google地图的插件吧,找了vue2-google-maps,这个插件确实还行,而且github上还有ap ...
- google地图测距原码
http://hi.baidu.com/shirdrn/blog/item/a7204afc716641fbfc037f85.html Google Maps自带实例多点测距尺实现的功能就是可以根据用 ...
- 20+ 个很有用的 jQuery 的 Google 地图插件 （英语）
20+ 个很有用的 jQuery 的 Google 地图插件 (英语) 一.总结 一句话总结:英语提上来我才能快速去google上面找资源啊.google上面的资源要比百度丰富很多,然后有了英语就可以 ...
- 免费Google地图API使用说明
事件监视GEvent.addListener用来注册事件监视器,在这个例子中,在用户移动或拖拽地图后,输出地图中心点的经/纬.var map = new GMap(document.getElemen ...
- 关于google地图api3的离线和在线开发（画带箭头的直线，指定范围，搜索，计算距离）
最近因为开发的需要,要做一个离线的google地图.并且能够加载google地图的一些特效.例如:地图的标记,计算距离,获取标记的经纬度,画带有箭头的直线,获取指定范围的数据等等.在这里我总结了很多开 ...
最新文章
- sqljdbc.jar 和 sqljdbc4.jar
- 高文院士：为什么中国的AI发展必须要有开源开放平台？
- 【iOS】Xcode 使用 CocoaPods 导入第三方库后没有提示
- 83998 连接服务器出错_新生福利 | 使用 Node.Js 开发服务器
- Object类和常用的API
- TCP/IP:IP多播选路
- 【离散数学中的数据结构与算法】八 排列与组合四
- Atitit 数据记录存储方式 索引组织表 堆组织表 储方式 InnoDB 引擎把数据放在主键索引上，其他索引上保存的是主键 id。这种方式，我们称之为索引组织表（Index Organizi
- JDK17下载和配置及官网地址教程（新版JDK12之后，较简单）
- 如何查看台式机计算机网络密码,如何从计算机检查已知的WiFi密码
- Python中统一快速更换变量的名称
- eWebEditor的使用
- WordPress独立下载页面插件
- 如何正确使用 GC.SuppressFinalize()?
- 【一级倒立摆】基于simulink的一级倒立摆控制器系统仿真
- 由七芒星引出来的——关于142857
- 偶遇 防火墙，IDS，IPS三个老兄争吵
- html出现403错误信息,HTTP 403 错误是什么意思
- solidity 合约继承
- 郑州大学远程教育计算机专业英语,郑州大学远程教育专业英语1考试.doc