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

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

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

1. 设置一个div挂载高德地图：
2. 引入高德API：

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

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, // 是否使用高精度定位，默认:true
          timeout: 10000, // 超过10秒后停止定位，默认：5s
          buttonPosition: '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 = this
  	let 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 () {
    // 实例化Autocomplete
    var 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
    })
  })
}