Jquery 浏览器调用高德地图进行导航

第一步，去高德地图开发平台申请应用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,//是否使用高精度定位，默认:truetimeout: 10000,          //超过10秒后停止定位，默认：5sbuttonPosition:'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>

Jquery 浏览器调用高德地图进行导航相关推荐

Android调用高德地图直接导航的简单实例
在学校最近做了一个小APP,脑子笨怕忘,写个博客记录一下. 简单来说就是保存地点,然后单击直接打开高德地图APP并从当前所在地导航到保存的地点.因为是小型学习用的,所以保存地点采用了Android本地 ...
webapp通过点击调用高德地图或百度地图导航
webapp通过点击调用高德地图或百度地图导航 // 高德地图 <a :href="'https://uri.amap.com/marker?position='+经度+','+纬度+ ...
调用第三方地图app导航（高德、百度、腾讯）
当前位置导航到某个地方,还可以设置出发地的经纬度和位置信息,具体看各官网参数设置. 以下代码可以直接使用. /*** Date: 2022-11-23* Author: lanzi* 调用第三方地图a ...
Android调用高德地图app语音导航
直接调用高德地图app进行导航首先,要先进入高德开放平台,注册登录以后,创建自己的APP,然后会生成appkey 高德开放平台网址: http://lbs.amap.com/ 然后下载jar包导入项 ...
python调用高德地图api 可视化_Python：利用高德地图API实现找房
记:本项目是在实验楼上看到的,但是上面的代码由于没有及时维护,爬虫文件的代码不再能完整的把所有房源信息爬取下来,我根据最新的58同城官网进行了研究,现在的官网的房源信息已经不是分页的了,而是拉到最后自 ...
第三方应用调用高德地图
http://www.eoeandroid.com/thread-540298-1-1.html 项目中要直接调用高德地图应用,而不是高德地图API. 点击直接调用高德地进行导航,肯定需要传参数的,发 ...
iOS之Swift实现调用第三方地图应用导航
iOS之Swift实现调用第三方地图应用导航开始的一些话关于坐标系源码调用方法一点注意事项开始的一些话作为一个"半路出家"的iOS的程序猿,一直使用OC开发,也想过使 ...
前端调用高德地图app、百度地图app
前端调用高德地图app.百度地图app 说明:这里只说明了前端如何调用app地图,没有代码,测试机上高德地图.百度地图.腾讯地图,都已经安装好了,如果没有安装,调起app地图会没有反应,至于如何验证手 ...
高德地图api接口文档_在 R 语言里面调用高德地图接口：地理编码与路径规划
你知道从广州南站去珠江新城怎么走么?今天就让我们一起使用 R 语言调用高德地图的地理编码(地址转经纬度)接口和路径规划接口来回答这个问题. 准备工作注册高德地图,创建应用添加 Key(注意申请 Ke ...

Jquery 浏览器调用高德地图进行导航

Jquery 浏览器调用高德地图进行导航相关推荐

最新文章

热门文章