Jquery 浏览器调用高德地图进行导航
第一步,去高德地图开发平台申请应用Key,这个key很重要,是用来和高德“”通话“”的标识,点击下方链接去申请:
如图:点击加号,就可以申请应用实例了,申请成功后,会有名称和key
第二步,引用js文件:
这里采用高德的在线js文件引用,
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>高德导航</title> <style type="text/css"> html,body,#container { width: 100%; height: 100%; } </style> <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /> <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script> <!--规划路线用的js--> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.Driving"></script> <!--导航用的js--> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.ToolBar"/></script> <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script> </head>
第三步:body里面用一个容器来装地图
<body> <div id="container"></div> </body>
第四步:jquery代码
<script type="text/javascript"> var lng=""; //全局变量 经度 var lat=""; //全局变量 纬度 AMap.plugin(AMap.Geolocation,function() { //初始化化高德地图 //绘制周围环境对象 var geolocation = new AMap.Geolocation({ enableHighAccuracy: true,//是否使用高精度定位,默认:true timeout: 10000, //超过10秒后停止定位,默认:5s buttonPosition:RB, //定位按钮的停靠位置 buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20) zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点 }); //利用浏览器定位当前的经纬度 geolocation.getCurrentPosition(function(status,result){ if(status==complete){ //标示定位成功 lng=result.position.lng; //获取经度 并赋值给全局变量 lat=result.position.lat; //获取纬度 并赋值给全局变量 var map = new AMap.Map("container"); //为div容器绘制地图对象 AMap.plugin(["AMap.Driving"], function() { //创建一个地图对象,模式为驾车模式 var drivingOption = { policy:AMap.DrivingPolicy.LEAST_TIME, map:map //将容器的地图对象添加到本次驾车导航中 }; var driving = new AMap.Driving(drivingOption); //将本次驾车导航的对象,添加到地图驾车模式中 //根据起,终点坐标规划驾车路线 三个参数,第一个为当前位置(经度),第二个为目标位置(纬度),第三个是路线规划好后执行的方法 driving.search(new AMap.LngLat(lng,lat), new AMap.LngLat(121.922123,29.479756),function(status,result){ //驾车路线规划成功,调用本地高德地图软件进行导航 driving.searchOnAMAP({ origin:result.origin, //起始地 destination:result.destination //目的地 }); }); }); map.addControl(new AMap.ToolBar()); //最后将导航工具添加到本次的地图对象中 } }); }); </script>