主要是想记录一下使用高德地图地位以及标记当前位置，搜索位置的过程。

创建Vue项目的流程

引入高德地图

在index.html 的head中引入代码。

复制代码

设置容器，初始化地图。

.container { // 容器大小 margin-left: 10%; width: 80%; height: 300px;}

mounted() { this.initMap()},

methods: { initMap() { this.map = new AMap.Map('container', { zoom:11,//级别 center: [116.397428, 39.90923],//中心点坐标 }); }}

复制代码

这样，地图显示就完成了

使用的插件

AMap.Geolocation      定位，提供了获取用户当前准确位置、所在城市的方法

AMap.Autocomplete  输入提示，提供了根据关键字获得提示信息的功能

AMap.PlaceSearch     地点搜索服务，提供了关键字搜索、周边搜索、范围内搜索等功能

AMap.Geocoder         地理编码与逆地理编码服务，提供地址与坐标间的相互转换

点击地图进行标记

因为我需要在点击后显示当前位置。所以需要根据选中的位置坐标去查找对应的地址，所以需要使用到插件AMap.Geocoder

loadClickMap() { let vm = this this.map.on('click', function(e) { let lng = e.lnglat.getLng() let lat = e.lnglat.getLat() // 这里通过高德 SDK 完成。根据坐标点获取地址 var geocoder = new AMap.Geocoder({ radius: 1000, extensions: "all" }); geocoder.getAddress([lng, lat], (status, result) => { if (status === 'complete' && result.info === 'OK') { if (result && result.regeocode) { if(vm.preMark) { vm.map.remove(vm.preMark); } let serviceAddress = result.regeocode.formattedAddress; var marker = new AMap.Marker({ map: vm.map, icon : require("../assets/location.png"), position: [e.lnglat.getLng(), e.lnglat.getLat()], offset: new AMap.Pixel(-13, -30), label: { content: "

", direction: 'top' // 文本标注方位 可选值：'top'|'right'|'bottom'|'left'|'center'，默认值:'right' } });// 获取到位置 vm.preMark = marker; } } }); });},

复制代码

定位

需要引入高德提供的插件

复制代码

加载插件，自定义回调方法

getCurrentLocation() { let vm = this vm.map.plugin('AMap.Geolocation', function() { var geolocation = new AMap.Geolocation({ enableHighAccuracy: true,//是否使用高精度定位，默认:true timeout: 10000, //超过10秒后停止定位，默认：无穷大 maximumAge: 0, //定位结果缓存0毫秒，默认：0 convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true showButton: true, //显示定位按钮，默认：true buttonPosition: 'RB', //定位按钮停靠位置，默认：'LB'，左下角 buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20) showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true zoomToAccuracy:true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false }); vm.map.addControl(geolocation) geolocation.getCurrentPosition(); // 获取用户当前的精确位置信息 AMap.event.addListener(geolocation, 'complete', getLocationComplete); // AMap.event.addListener(geolocation, 'error', onError) function getLocationComplete(data) { alert(data.formattedAddress) } })},

复制代码

搜索位置，1.1标记返回的位置

引入插件AMap.Autocomplete

复制代码

2.定义文本框。我当前使用得是element-UI样式

请输入关键字

复制代码

3.根据输入的关键字查找地址，并对查找出的地址进行标记。

searchAddress() { let keywords = this.keywords let vm = this AMap.plugin('AMap.Autocomplete', function(){ // 实例化Autocomplete var autoOptions = { //city 限定城市，默认全国 city: '全国', } var autoComplete= new AMap.Autocomplete(autoOptions); autoComplete.search(keywords, (status, result) => {vm.handleSearchResult(status, result)}) })},

handleSearchResult(status, result) { let vm = this // data 里包含info,count, tips if(status == "complete" && result && result.count > 0) { var markerList = []; // 标记列表 let lng = 0, lat = 0; // 记录中心点 for(let i=0; i"+item.name+"