第一步，去高德地图开发平台申请应用Key，这个key很重要，是用来和高德“”通话“”的标识，点击下方链接去申请：
https://lbs.amap.com/dev/key/app
如图：点击加号，就可以申请应用实例了，申请成功后，会有名称和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>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/137546.html
