主要是想记录一下使用高德地图地位以及标记当前位置，搜索位置的过程。
创建Vue项目的流程
引入高德地图
-
在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 地理编码与逆地理编码服务，提供地址与坐标间的相互转换
点击地图进行标记
因为我需要在点击后显示当前位置。所以需要根据选中的位置坐标去查找对应的地址，所以需要使用到插件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) }); });}
