本文章是出行助手项目使用高德API的一些经验，见程序代码及注释，
详情请查看高德API

高德地图初始化加载定位到当前城市（具体位置）：

设置一个div挂载高德地图：<div id="map" style="width:900px; height: 900px;border: 1px solid red"></div>
引入高德API：<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=****申请到的KEY值****"></script>

创建地图并初始化到具体位置：

function createTrip() {//  创建地图实例，创建的同时可以给地图设置中心点、级别、显示模式、自定义样式等属性：map = new window.AMap.Map('map', {   //构造一个地图对象，第一个参数中传入地图容器DIV的ID值，第二个参数是地图初始化参数对象，参数详情参看MapOptions列表。resizeEnable: true, // 是否监控地图容器尺寸变化// mapStyle: 'amap://styles/light', // 设置地图的显示样式zoom: 11, // 初始化地图层级// viewMode: '3D', // 地图模式// pitch: 75, // 地图俯仰角度，有效范围 0 度- 83 度center: [116.402831,39.91582] // 初始地图中心点，故宫})//  异步加载多个插件:AMap.plugin的第一个参数使用数组即可同时加载引入多个插件。//  地图初始化加载的定位只能获取到城市级别信息，如果想获取到具体的位置就要借助浏览器定位。高德JS API提供了AMap.Geolocation插件来实现定位       //  组合了旋转、倾斜、复位、缩放在内的地图控件map.plugin(['AMap.Geolocation', 'AMap.ControlBar'], function () {var geolocation = new window.AMap.Geolocation({enableHighAccuracy: true, // 是否使用高精度定位，默认:truetimeout: 10000, // 超过10秒后停止定位，默认：5sbuttonPosition: 'LT', // 定位按钮的停靠位置buttonDom: buttonDom, //定位按钮dom节点buttonOffset: new window.AMap.Pixel(100, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)zoomToAccuracy: true // 定位成功后是否自动调整地图视野到定位点})// 定位插件map.addControl(geolocation)//  在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置/*获取用户当前的精确位置信息当回调函数中的status为complete的时候表示定位成功，result为GeolocationResult对象;当回调函数中的status为error的时候表示定位失败，result为GeolocationError对象；                                                                  调用此方法可实现打开页面自动定位，如不调用此方法可实现点击位置触发后定位。callback的方式和事件监听的方式二者选择一种即可。*/geolocation.getCurrentPosition(function (status, result) {})AMap.event.addListener(geolocation, 'complete', localOnComplete) // 返回定位信息AMap.event.addListener(geolocation, 'error', localOnError) // 返回定位出错信息// 罗盘插件map.addControl(new window.AMap.ControlBar())})map.on('complete', function () {// 地图图块加载完成后触发console.log('地图加载完成')})
}

H5实时定位：

geolocationData = [];  //是坐标集合，项目中在Vue组件的data中，本博客为代码完整性将其单独拿出。
watchMap();
function watchMap () {let that = this;if(navigator.geolocation){//watchPosition()方法：用于注册监听器，不停的获取和更新用户的地理位置信息，执行间隔时间0ms；当设备地理位置发生改变时，自动调用，会返回一个ID值// clearWatch(唯一标识)方法：要停止定位时清除watchPosition()。watchID = navigator.geolocation.watchPosition(   function (position) {//得到H5经纬度let gps = [position.coords.longitude, position.coords.latitude]console.log('实时定位中:'+':gps');//  geolocationData是坐标集合let p1 = (that.geolocationData.length > 0) ? that.geolocationData[that.geolocationData.length - 1].toString(): ''let p2 = gps.toString()if (p1 === p2) {console.log('定位距离过近')} else {// 存放轨迹经纬度坐标，经纬度坐标转换（H5坐标转高德坐标）window.AMap.convertFrom(gps, 'gps', function (status, result) {if (result.info === 'ok') {    //info 成功状态// result.locations返回高德坐标集合let tmpGps = [result.locations[0].Q, result.locations[0].P]that.geolocationData.push(tmpGps)  //将获取到的所有实时位置放入坐标集合，之后绘制路线使用。// that.mapLoactionDistance(that.geolocationData)  //经纬度路程转换为公里数} else {console.log('轨迹路径经纬度转换失败')}})}},function () {console.log('实时定位出错，请尝试刷新')that.mapOnDelete()})}else{    console.log('不支持GPS定位');   }
}

定位结束，绘制实时路线图：

mapPath () {let that = thislet lineArr = geolocationData.slice()//构造一个点标记对象，通过MarkerOptions设置点标记对象的属性let marker = new AMap.Marker({map: that.map,position: lineArr[0],   //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9],基点位置icon: 'https://webapi.amap.com/images/car.png',offset: new window.AMap.Pixel(-26, -13),   //相对于基点的偏移位置autoRotation: true,//是否自动旋转。点标记在使用moveAlong动画时，路径方向若有变化，点标记是否自动调整角度，默认为false。广泛用于自动调节车辆行驶方向。//IE8以下不支持旋转，autoRotation属性无效// 旋转的是icon，不是地图angle: -90//   点标记的旋转角度，广泛用于改变车辆行驶方向// 注：angle属性是使用CSS3来实现的，支持IE9及以上版本})// 绘制轨迹// 构造折线对象，通过PolylineOptions指定折线样式let polyline = new window.AMap.Polyline({   //路线map: that.map,path: lineArr,//坐标点showDir: true,//是否延路径显示白色方向箭头,默认false。Canvas绘制时有效，建议折线宽度大于6时使用；在3D视图下不支持显示方向箭头（自V1.4.0版本参数效果变更）strokeColor: '#28F', // 线颜色// strokeOpacity: 1,     //线透明度strokeWeight: 6 // 线宽// strokeStyle: "solid"  //线样式})let passedPolyline = new window.AMap.Polyline({  //标记点车走过绘制的线条map: that.map,// path: lineArr,strokeColor: 'red', // 线颜色// strokeOpacity: 1,     //线透明度strokeWeight: 6 // 线宽// strokeStyle: "solid"  //线样式})marker.on('moving', function (e) {   //点标记在执行moveTo，moveAlong动画时触发事件passedPolyline.setPath(e.passedPath)})that.map.setFitView()//根据地图上添加的覆盖物分布情况，自动缩放地图到合适的视野级别，参数均可缺省。// overlayList为覆盖物数组，缺省时为当前地图上添加的所有覆盖物图层，//immediately代表是否需要动画过程，avoid代表上下左右的像素避让宽度，maxZoom代表fitView之后的最大级别marker.moveAlong(lineArr, 200)    //以指定的速度，点标记沿指定的路径移动。参数path为轨迹路径的经纬度对象的数组；speed为指定速度，单位：千米/小时；//回调函数f为变化曲线函数，缺省为function(k){return k}；参数circlable表明是否循环执行动画，默认为false
}

输入框搜索起始地列表(输入提示插件，根据输入关键字提示匹配信息)：

searchKey (keyword) {//   Toast.loading('正在搜索...')this.ToastHide('正在搜索...')let that = this//  AMap.Autocomplete根据输入关键字提示匹配信息，可将Poi类型和城市作为输入提示的限制条件。用户可以通过自定义回调函数取回并显示查询结果。若服务请求失败，系统将返回错误信息。最多支持10条建议，不可翻页。this.trafficMap.plugin('AMap.Autocomplete', function () {// 实例化Autocompletevar autoOptions = {// city 限定城市，默认全国city: '全国'}//  构造函数，提供输入提示功能var autoComplete = new window.AMap.Autocomplete(autoOptions)/* 根据输入关键字提示匹配信息，支持中文、拼音当status为complete时，result为AutocompleteResult；当status为error时，result为错误信息info；当status为no_data时，代表检索返回0结果*/autoComplete.search(keyword, function (status, result) {Toast.hide()// 搜索成功时，result即是对应的匹配数据console.log(status, result)if (status !== 'complete') {that.searchResult = []return}if (result.info !== 'OK') {that.searchResult = []return}// searchResult 为存储查询关键字结果的数组that.searchResult = result.tips})})
}

出行助手Vue项目中高德API的使用相关推荐

vue项目中高德地图的注册及使用
1.创建应用点击进入高德地图个人开发的注册:https://lbs.amap.com/dev/id/personal 然后可以登录支付宝进行认证. 注册完毕之后,点击右上角的控制台点击右上角的创建 ...
vue项目中高德地图总是出不来的问题
创建地图是个很简单的API,但是地图时不时的出不来,这个问题就严重了,一时真查不出原因. 经过无数的测试,发现地图需要规矩化问题 vue是单页面应用,两个id一样的map,会出现出不来的问题具体为 ...
vue项目中高德地图根据城市名定位到城市中心位置，并在该位置做标记
先看效果: 首先记得引入高德地图,并且要带上&plugin=AMap.DistrictSearch,如下: <script type="text/javascript" ...
在vue项目中使用高德地图JS API
在vue项目中使用高德地图JS API,而不是amap依赖包~ 一. 必做的准备工作注册账号并申请key 首先,注册开发者账号,成为高德开放平台开发者登陆之后,在进入「应用管理」页面「创建新应用 ...
在vue项目中使用高德地图
需求很重要,有需求你才有努力解决问题的方向,加油! 在我们使用vue构建项目的时候,难免在业务需求上会遇到使用高德地图的时候,这时候问题就来了. 我们该怎么在vue项目中插入高德地图?通过度娘我知道了 ...
vue与php接口对接,怎样使用vue项目中api接口
这次给大家带来怎样使用vue项目中api接口,使用vue项目中api接口的注意事项有哪些,下面就是实战案例,一起来看一下. 1. 在axiosconfig目录下的axiosConfig.jsimpor ...
如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图（含vue项目创建教程）
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...
网易云音乐API,的调用方法，vue项目中（在本地使用）
1. 在cmd 命令行下:安装并启动: git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git /* 下载 */cd Netea ...
vue项目中api接口管理总结
默认vue项目中已经使用vue-cli生成,安装axios,基于element-ui开发,axiosconfig目录和api目录是同级,主要记录配置的相关. 1. 在axiosconfig目录下的ax ...

出行助手Vue项目中高德API的使用

高德地图初始化加载定位到当前城市（具体位置）：

创建地图并初始化到具体位置：

H5实时定位：

定位结束，绘制实时路线图：

输入框搜索起始地列表(输入提示插件，根据输入关键字提示匹配信息)：

出行助手Vue项目中高德API的使用相关推荐

最新文章

热门文章