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

创建Vue项目的流程

引入高德地图

进入高德开放平台注册账号创建新应用并添加key

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

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

设置容器，初始化地图。

<div id="container" class="container"> </div> // 容器
.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 地理编码与逆地理编码服务，提供地址与坐标间的相互转换

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.Geolocation,AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder"></script>

点击地图进行标记

因为我需要在点击后显示当前位置。所以需要根据选中的位置坐标去查找对应的地址，所以需要使用到插件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: "<div class='infos'>"+serviceAddress+"</div>",                            direction: 'top' // 文本标注方位 可选值：'top'|'right'|'bottom'|'left'|'center'，默认值:'right'                        }                    });// 获取到位置                    vm.preMark = marker;                }            }        });        });},

定位

需要引入高德提供的插件

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.Geolocation"></script>

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

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

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.Autocomplete"></script>

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

<el-row :gutter="20">    <el-col :span="6" :offset="14">        <el-input v-model="keywords" value="keywords" @change="searchAddress()">            <template slot="prepend">请输入关键字</template>        </el-input>    </el-col></el-row>

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<result.tips.length; i++) {            let item = result.tips[i]            // location 可能为空            if(item.location) {                if(lng == 0 && lat == 0) {                    lng = item.location.lng                    lat = item.location.lat                }                var marker = new AMap.Marker({ // 标记的是查询出来的坐标                    map: this.map,                    label: {                         content: "<div class='infos'>"+item.name+"</div>",direction: 'top' // 文本标注方位 可选值：'top'|'right'|'bottom'|'left'|'center'，默认值:'right'                    },                    clickable: true,                    extData:item.name,                    position: new AMap.LngLat(item.location.lng, item.location.lat),                      title: item.name                });                // 为标记添加监听事件                AMap.event.addListener(marker, 'click', function(e) {                    if(vm.preMark) { // 移除上一个标记                        vm.map.remove(vm.preMark);                    }                    let serviceAddress = e.target.getExtData()                    var marker = new AMap.Marker({ // 点击标记当前点击的位置                            map: vm.map,                            icon : require("../assets/location.png"),                            position: [e.lnglat.lng, e.lnglat.lat],                            offset: new AMap.Pixel(-13, -30),                            label: { content: "<div class='infos'>"+serviceAddress+"</div>",                            direction: 'top' // 文本标注方位                                            // 可选值：'top'|'right'|'bottom'|'left'|'center'，默认值:'right'                        }                    });                    // 记录当前标记，用作移除标记                    vm.preMark = marker;                    // 得到的数据                });                                     markerList.push(marker)            }        }        vm.map.setCenter(new AMap.LngLat(lng, lat))        vm.map.add(markerList);    }},

搜索位置，1.2下拉框展示

和1.1不同的是输入框绑定搜索的结果并作为下拉框显示出来

loadSearchAddress() {    let vm = this    AMap.plugin('AMap.Autocomplete', function(){        // 实例化Autocomplete        var autoOptions = {            //city 限定城市，默认全国            city: '全国',            input: 'input_tip'        }        var autoComplete= new AMap.Autocomplete(autoOptions);        AMap.event.addListener(autoComplete, 'select', function(e){            // 为了验证方法是否有效            alert(e)        })            })},

搜索位置，1.3POI展示结果

使用POI展示搜索结果

loadPlaceSearch() {    let vm = this    AMap.service(["AMap.PlaceSearch"], function() {        //构造地点查询类        var placeSearch = new AMap.PlaceSearch({             pageSize: 5, // 单页显示结果条数            pageIndex: 1, // 页码            // city: "010", // 兴趣点城市            citylimit: false,  //是否强制限制在设置的城市内搜索            map: vm.map, // 展现结果的地图实例            panel: "panel", // 结果列表将在此容器中进行展示。            autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围        });        //关键字查询        placeSearch.search(vm.keywords);    });}

搜索位置1.4输入提示和poi插件结合

输入提示和poi插件结合使用

loadInputTipPlaceSearch() {    let vm = this    AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){        var autoOptions = {            city: "北京", //城市，默认全国            input: "input_tip"//使用联想输入的input的id        };        let autocomplete= new AMap.Autocomplete(autoOptions);        var placeSearch = new AMap.PlaceSearch({            city:'北京',            map:vm.map        })        AMap.event.addListener(autocomplete, "select", function(e){            //TODO 针对选中的poi实现自己的功能            placeSearch.setCity(e.poi.adcode);            placeSearch.search(e.poi.name)        });    });}

代码地址

github地址 https://github.com/zhaojinyi/vue-project.git