高德地图知识积累

一、高德地图的申请

使用高德地图开发首先要先申请高德地图的Key

然后在高德地图控制台里面“我的应用”中创建应用，并添加key就可以拿到密钥key和安全密钥了。

二、创建高德地图实例

1、Vue项目

（1）项目中先安装依赖npm install -S vue-amap

（2）在main.js中导入地图import VueAMap from 'vue-amap'并引入Vue.use()，后创建地图实例

VueAMap.initAMapApiLoader ({

key: '你的key',// 高德的key

// 插件集合

plugin: [

'AMap.AutoComplete', // 输入提示插件

'AMap.PlaceSearch', // POI搜索插件

'AMap.Scale', // 右下角缩略图插件 比例尺

'AMap.OverView', // 地图鹰眼插件

'AMap.ToolBar', // 地图工具条

'AMap.MapType', // 类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制

'AMap.PolyEditor', // 编辑 折线多，边形

'AMap.CircleEditor', // 圆形编辑器插件

'AMap.Geolocation', // 定位控件，用来获取和展示用户主机所在的经纬度位置，提供了获取用户当前准确位置、所在城市的方法

'AMap.GraspRoad', //轨迹纠偏

'AMap.ControlBar',// 组合了旋转、倾斜、复位、缩放在内的地图控件，在3D地图模式下会显示

'AMap.Geocoder',// 地理编码与逆地理编码服务，用于地址描述与坐标间的相互转换

'AMap.MoveAnimation', //轨迹回放动画

"AMap.CitySearch"//城市查询，IP定位获取当前城市信息

],

v:’2.0’ //高德sdk版本，默认为1.4.4

uiVersion:’1.1’ //高德ui的版本

})

2、微信小程序

在创建的项目中，新建一个名为 libs 目录，将 amap-wx.js （amap-wx.js 从相关下载页面下载的 zip 文件解压后得到）文件拷贝到 libs 的本地目录下

将高德地key封装为全局常量即可。就可以使用了，在使用到的页面引入高的的文件和他的Key。

三、封装地图组件

1、html中写地图标签

<el-map

:zoom = “amap.zoom” //地图初期所显示的放大级别

:center = “amap.center” //地图初期显示中心点位置

:plugin="amap.plugin"//地图初期加载的插件

:events="amap.events" //地图对应事件

></el-map>创建地图标签

<el-amap –marker

position = [lng.lat] //标签点的坐标位置

/>创建定位点标签

<el-amap –polyline

:path= “poly //折现图的定位点数组

/>创建折线图标签

在data中设置标签中的变量，就可以加载出地图和地图上的标点，以及折现图。

2、html中写div标签，script中实例化地图。

使用<div/>标签为标签设置好id，在scrip中创建地图

This.map = new AMap.Map(id,{

zoom:this.zoom,

center:this.center

})

如此地图实例就创建好了

在地图上加点

this.marker = new AMap.Marker({

map:this.map,

position:this.position

})

在地图上添加折现图

This.poly = new AMap.polyLine({

map:this.map,

path:this.path

})

3、微信小程序中

<map longitude = “{{ longitude }}” latitude = “{{ latitude }}” markers=”{{ markers }}” polyline = “{{ polyline }}”></map>

{{}}中内容为data里设置。

四、地图功能

1、地理解析编码/逆地理解析编码

AMap.plugin('AMap.Geocoder', function() {

var geocoder = new AMap.Geocoder({

// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode

city: '全国'

})

//正地理解析编码

geocoder.getLocation(‘地址’，function(status, result){})

//逆地理解析

geocoder.getAddress(lnglat, function(status, result) {})

})

2、轨迹纠偏

先获取轨迹纠偏参数格式为: let path = [{"x":116.478928,"y":39.997761,"sp":19,"ag":0, "tm":1},{…}]

其中：x、y、sp、ag、tm分别代表经度、纬度、速度、角度、时间。

之后调取轨迹纠偏：

AMap.plugin(‘AMap.GraspRoad’,function(){

Let grasp = new AMap.GraspRoad();

Grasp.driving(originPath,function(error,result){

Let newPath = result.data.points //纠偏后轨迹

Let distance = result.data.distance //里程

})

})

3、地图轨迹回放动画

首先要有一段格式规范的轨迹格式为 let path = [[lng,lat],[lng.lat],[…],…]

设置一个移动点

Let marker = new AMap.Marker({

map:this.map,

position:path[0],

icon:icon //移动点样式

})

在地图上绘制轨迹

var polyline = new AMap.Polyline({

map: map,

path: path,

showDir:true,

strokeColor: "#28F", //线颜色

strokeOpacity: 1, //线透明度

strokeWeight: 6, //线宽

strokeStyle: "solid" //线样式

});

开始动画

marker.moveAlong(path, {

duration: 500, // 每一段的时长

autoRotation: true, // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置

绘制移动的轨迹

var passedPolyline = new AMap.Polyline({

map: map,

strokeColor: "#AF5", //线颜色

strokeWeight: 6, //线宽

});

再然后给点设置事件，移动的轨迹事件

marker.on('moving', function (e) {

passedPolyline.setPath(e.passedPath);

map.setCenter(e.target.getPosition(),true)//地图随移动点为中心移动

});

});

暂停动画

marker.pauseMove();

继续动画

marker.resumeMove();

停止动画

marker.stopMove();

4、输入提示及POI搜索

AMap.plugin(['AMap.AutoComplete','AMap.PlaceSearch'],function(){

var autoOptions = {

city: "北京",// 城市，默认全国

input: "input"// 使用联想输入的input的id

}

var autocomplete= new AMap.AutoComplete(autoOptions)

var placeSearch = new AMap.PlaceSearch({

city:'北京',

map:map

})

autocomplete.on('select', function(e){

placeSearch.search(e.poi.name) //TODO 针对选中的poi实现自己的功能

})

})

5、输入提示及POI搜索的标签方法

<el-amap –search-box

:searchoption = “searchOption”

:onsearchresult = “OnSearchResult”

/>

然后再script中

data里定义searchOption:{

city:’全国’，

citylimt:true

}

在方法中执行OnSearchReslt(){}搜索回调函数

6、其他方法

this.map.remove()//清除地图上覆盖物

map.getAllOverlays();//获取地图上的覆盖物

this.map.setFitView() //地图自适应

7、微信小程序使用高德获取当前定位信息

高德的Key和文件已经在上文中提到过引入

let myAmapFun = new amapFile.AmapWX({

key:config.key

})

//获取地址描述信息。

myAmapFun.getRegeo({

success:(res =>{

res.regeocodeData.formatted_address //地址信息

})

})

//获取周边的POI。

myAmapFun.getPoiAround({

location:[lng,lat] //经纬度坐标。为空时，基于当前位置进行地址解析。格式：'经度,纬度

success(data=>{})//调用成功的回调函数。

fail(info=>{})//调用失败的回调函数。

})

//获取驾车路线。

myAmapFun.getDrivingRoute({

origin：[lng,lat]出发地的经纬度坐标，格式：'经度,纬度'。

destination：[lng,lat]目的地的经纬度坐标，格式：'经度,纬度'

success(data=>{})//调用成功的回调函数。

})