html5实现地图上定位导航路线

最新推荐文章于 2024-05-19 22:05:56 发布

chelen_jak

最新推荐文章于 2024-05-19 22:05:56 发布

阅读量1.5w

点赞数

分类专栏：移动开发实用 HTML5 JavaScript

实用同时被 3 个专栏收录

738 篇文章 3 订阅

订阅专栏

JavaScript

311 篇文章 3 订阅

订阅专栏

HTML5

155 篇文章 0 订阅

订阅专栏

转自：http://zhidao.baidu.com/link?url=u_HYWgKERQvi6luDE3jdKcJM3ybb8bWkedrXne4ckR99b6riJ0mmKEAkwJ3a9Q8o38ieEqHtnvaqoclLtEdOO6_Vtb33LmtY8-uS-11q47i

关于导航路的问题

比如我的一个普通的webapp网站，手机地图上能自动定位我当前的位置，并能够显示出我当前位置离所在目标的具体路线，这样用html5可以实现吗，还是说一定要用ios开发才行

2014-08-27 13:59 提问者采纳

HTML5+JQM即可实现

参考方法：
1.先去通过百度拾取坐标系统获得点位的坐标
http://api.map.baidu.com/lbsapi/getpoint/index.html

2.在网页的<head>中插入百度API引用脚本。
<script type="text/javascript" src="http://api.map.baidu.com/api?

key=&v=1.1&services=true"></script>

3.在网页的</body>之后</html>之前插入地图显示代码

4.设置显示地图的div的id为“dituContent”，即添加 id="dituContent" 
由于jqm的div的高度都是根据内容自由放大的，所以为了地图能正常显示，还需要

增加一个高度值，一般情况600px就可以

注意事项：

1. var point = new BMap.Point(120.524011,36.395728); 这是定义中心店坐标

2. map.centerAndZoom(point,15); 这个据我调试 应该是控制地图比例缩放的

3. window.setTimeout(function(){map.panTo(point);}, 1000);注意了 一般的

demo是没有这个东西滴，所以呢当跳转到地图的页面时候 是不会显示你定位的中心

点的  但是由于我的聪明和机智 各种装孙子求助大神 才得知了这个大神不削一顾

的属性 ：设定地图加载后1秒调至中心点 。。最后强调下   

低调 一定要低调。。。

4. function createIcon(json){
        var icon = new BMap.Icon("images/map_icon.png", new BMap.Size

(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-

json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size

(json.x,json.h)})
        return icon;
    }  这里就是创建一个icon

5. var markerArr = [{title:"西程村",content:"青岛市即墨市蓝鳌路 电话：

123123123213",point:"120.524011|36.395728",isOpen:0,icon:

{w:32,h:32,l:0,t:0,x:6,lb:5}}]; 这里呢 就是设置定位的信息

提问者评价

谢谢你写得这么详细

chelen_jak

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
html5实现地图上定位导航路线

转自：http://zhidao.baidu.com/link?url=u_HYWgKERQvi6luDE3jdKcJM3ybb8bWkedrXne4ckR99b6riJ0mmKEAkwJ3a9Q8o38ieEqHtnvaqoclLtEdOO6_Vtb33LmtY8-uS-11q47i 关于导航路的问题比如我的一个普通的webapp网站，手机地图上能自动定位我当前的位置，并
复制链接

扫一扫