参考链接:

Vue（vue-amap）接入高德地图获取坐标与地址信息
‘AMapUI‘ is not defined 异常的话按照这个处理，没有异常就可以不用看

tips1: 本组件直接将main.js全局注册直接放入到 created 方法中可忽略上述链接在 main.js 注册

tips2: 组件内的图标使用的是阿里巴巴矢量图，需要自己修改一下图标那块的代码，或者直接使用图片也行。

效果图：

1. 初始样式

2. 地图选点样式

3. 搜索样式

4. 选点后样式

5. 选点后样式

组件代码

<template><div><div class="selector-box"><div><!-- 阿里图标需替换 --><i type="iconweizhi" /><a-button :disabled="disabled" v-if="value.length == 0" type="link" @click="showMapSelector">选择地址</a-button><a-button :disabled="disabled" v-else type="link" @click="showMapSelector">经度：{{value[0]}}纬度：{{value[1]}}</a-button></div><!-- 阿里图标需替换 --><i v-if="value.length != 0 && !disabled" class="close-icon" type="iconai54" @click="clearLocation" /></div><a-modal title="选择地址" :visible="isShowMap" width="800px" @ok="save" @cancel="closeModal"><a-row class="m-b-10"><a-col :span="15"><a-input id="search" v-model="searchKey" placeholder="请输入地址"></a-input><div class="tip-box beauty-scroll" id="searchTip"></div></a-col><a-col :span="9"><a-button type="link" @click="resetMap">重置</a-button></a-col></a-row><div class="container m-b-10"><el-amap :key="key" class="amap-box" :amap-manager="amapManager" :vid="'amap-vue' + key" :zoom="zoom" :plugin="plugin":center="center" :events="events"><!-- 标记 --><el-amap-marker v-for="(marker, index) in markers" :position="marker" :key="index"></el-amap-marker></el-amap></div><p>当前地址为：{{address}}</p><p>经纬度：({{lng}},{{lat}})</p></a-modal></div>
</template><script>/*** 高德地图选点组件* * @property {Array} value 地图坐标点* @property {Boolean} disabled 组件是否可用* * @event {Function()} change 点击确认或清除坐标点* @return {Object} location 经纬度 / address 位置* * @demo <by-amap-point-selector v-model="location" @change="changeLocation" />* */import {AMapManager,lazyAMapApiLoaderInstance} from 'vue-amap';import VueAMap from 'vue-amap';import Vue from 'vue';let amapManager = new AMapManager();let defaultPoint = [116.397451, 39.909187];export default {props: {// 初始化位置value: {type: Array,default: function() {return []}},// 是否禁用disabled: {type: Boolean,default: false}},created() {// 初始化高德地图 Vue.use(VueAMap);VueAMap.initAMapApiLoader({key: '你的高德地图KEY',plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType','AMap.PlaceSearch','AMap.Geolocation', 'AMap.Geocoder'],v: '1.4.4',uiVersion: '1.0.11'});},data() {let _this = this;// 高德地图事件处理const events = {// 地图初始化完毕init() {lazyAMapApiLoaderInstance.load().then(() => {_this.initSearch()})},// 地图点击click(e) {_this.markers = []let {lng,lat} = e.lnglat_this.lng = lng_this.lat = lat_this.center = [lng, lat]_this.markers.push([lng, lat]);_this.getAddress(lng, lat).then(res => {_this.address = res.formattedAddress;});}};// 高德地图插件const plugin = [{// 定位pName: 'Geolocation',events: {init(o) {console.log('Geolocation:', o);// o是高德地图定位插件实例// o.getCurrentPosition((status, result) => {//    if (result && result.position) {//      // 设置经度//       _this.lng = result.position.lng;//         // 设置维度//       _this.lat = result.position.lat;//         // 设置坐标//       _this.center = [_this.lng, _this.lat];//       _this.defaultCenter = _this.center;//      _this.markers.push([_this.lng, _this.lat]);//       // 获取地址//       _this.getAddress(_this.lng, _this.lat).then(res => {//          _this.address = _this.searchKey = res.formattedAddress;//         });//   }// })},// click(e) {//     console.log(e);// }}},{// 工具栏pName: 'ToolBar',events: {// init(instance) {//  console.log(instance);// }}},{// 搜索pName: 'PlaceSearch',events: {// init(instance) {//    console.log(instance)// }}}];return {key:+new Date(),isShowMap: false, // 展示选点弹窗address: null, // 地址searchKey: '', // 搜索markers: [defaultPoint], // 地图标点center: defaultPoint, // 当前坐标位置zoom: 12, // 最大缩放比例lng: 0, // 经度lat: 0, // 纬度amapManager, // 高德地图管理器events, // 高德地图事件处理plugin, // 高德地图插件}},methods: {// 展示地图选点组件showMapSelector() {this.isShowMap = true;this.$nextTick(() => {this.resetMap();})},// 初始化搜索initSearch() {let vm = thislet map = this.amapManager.getMap()AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {var poiPicker = new PoiPicker({input: 'search',placeSearchOptions: {map: map,pageSize: 10},suggestContainer: 'searchTip',searchResultsContainer: 'searchTip'})vm.poiPicker = poiPicker// 监听poi选中信息poiPicker.on('poiPicked', function(poiResult) {let source = poiResult.sourcelet poi = poiResult.itemif (source !== 'search') {poiPicker.searchByKeyword(poi.name)} else {poiPicker.clearSearchResults()vm.markers = []let lng = poi.location.lnglet lat = poi.location.latlet address = poi.cityname + poi.adname + poi.namevm.center = [lng, lat]vm.markers.push([lng, lat])vm.lng = lngvm.lat = latvm.address = addressvm.searchKey = address}})})},// 返回经纬度地址getAddress(lng, lat) {let geocoder = new AMap.Geocoder({radius: 1000,extensions: 'all'})return new Promise((resolve) => {geocoder.getAddress([lng, lat], function(status, result) {if (status === 'complete' && result.info === 'OK') {if (result && result.regeocode) {resolve(result.regeocode)}}})})},// 重置地图组件resetMap() {let tempPos = this.value.length > 0 ? this.value : defaultPoint;this.center = tempPos;this.markers = [tempPos];this.lng = tempPos[0];this.lat = tempPos[1];this.searchKey = '';// 延迟调用地址避免报错setTimeout(() => {this.getAddress(this.lng, this.lat).then(res => {this.address = res.formattedAddress;});}, 1000);},// 保存save() {this.change({address: this.address,location: [this.lng, this.lat]})this.closeModal();},// 清除当前位置clearLocation() {this.change({address: '',location: []})},// 修改数据change(res) {this.$emit('input', res.location);this.$emit('change', res);},// 退出closeModal() {this.isShowMap = false;}}}
</script><style scoped lang="less">.container {width: 100%;height: 500px;}p {margin: 0;}.m-b-10 {margin-bottom: 10px;}.tip-box {width: 100%;max-height: 260px;position: absolute;top: 33px;overflow-y: auto;background-color: #fff;z-index: 999;}.selector-box {width: 300px;padding: 0 10px;display: flex;justify-content: space-between;align-items: center;border: 1px solid #d9d9d9;background-color: #fff;>div {display: flex;justify-content: flex-start;align-items: center;}}.close-icon {color: rgba(0, 0, 0, .25);}
</style>

Ant design Of Vue vue-amap 高德地图选点组件相关推荐

vue/react高德地图选点组件（坐标拾取工具）
一些项目会常用到这个功能,把自己做的组件分享一下,vue版和react版都有 vue版 github地址 (vue3) react版 github地址效果安装 vue: npm install v ...
Vue中使用高德地图（vue-amap）的采坑记录小白入门
这里写目录标题写在开始 step.1 安装组件 step.2 引入组件 step.3注册高德高德开发者账号,申请KEY step.4 正式使用写在开始俗话说授人以鱼不如授人以渔,直接记录代码的话 ...
Vue 中使用高德地图api
比较简单的原生方式 <template><div style="margin: 0px;padding: 0px"><div id="pan ...
vue中引用高德地图根据经纬度计算两地距离
vue中引用高德地图根据经纬度计算两地距离一.示例图: npm安装 npm install vue-amap --save 在min.js文件中引入vue-amap import VueAMap f ...
在Vue中使用高德地图
在Vue中使用高德地图一.如何在Vue中引入基础高德地图 1.步骤一:注册并登录高德地图开放平台,申请密钥 2.步骤二:安装高德地图加载器 3.封装一个自定义地图组件,并初始化地图二.根据关键词搜 ...
Vue中使用高德地图
Vue中使用高德地图定位及poi搜索,以及其他插件的使用方法 1.第一步安装 npm install vue-amap --save 2.引入vue-amap main.js import Vue f ...
Vue项目中用高德地图实现定位
说明:本文主要是介绍如何在Vue项目中接入百度地图并定位当前城市,更深层次的内容稍后有空整理. 可能还有更牛的实现方案,目前我这里记录的是我自己跑通的一个版本,希望对你有所帮助,仅供参考. Vue项目 ...
Vue引用原生高德地图标注
Vue引用原生高德地图标注一.引用高德? 首先在vue项目中的pubic下的index.html的head中引用. 二.在你的模板中设置一个div你的地图容器 <template>< ...
vue项目使用高德地图
vue项目使用高德地图-部分功能介绍在此做个笔记,引入方式使用了高德2.0 loadsh的加载方式 1.引入高德地图方式-NPM npm i @amap/amap-jsapi-loader --sa ...

Ant design Of Vue vue-amap 高德地图选点组件

参考链接:

效果图：

组件代码

Ant design Of Vue vue-amap 高德地图选点组件相关推荐

最新文章

热门文章