vue引用高德地图实现选择定位，根据经纬度标注功能

引用vue-amap

yarn add vue-amap

main配置

// 引入vue-amap
import VueAMap from 'vue-amap';Vue.use(VueAMap);// 初始化vue-amap，高德的key值需要自己去申请
VueAMap.initAMapApiLoader({key: '',plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder'],v: '1.4.4',uiVersion: '1.0'
});

定位MAP组件封装

<template><div class="mapcontainer"><div class="search-box"><input v-model="searchKey" type="search" id="search" /><button @click="searchByHand">搜索</button><div class="tip-box" id="searchTip"></div></div><!--amap-manager： 地图管理对象vid：地图容器节点的IDzooms： 地图显示的缩放级别范围，在PC上，默认范围[3,18]，取值范围[3-18]；在移动设备上，默认范围[3-19]，取值范围[3-19]center： 地图中心点坐标值plugin：地图使用的插件events： 事件--><el-amapclass="amap-box":amap-manager="amapManager":vid="'amap-vue'":zoom="zoom":plugin="plugin":events="events":center="center"><!-- 标记 --><el-amap-marker v-for="(marker, index) in markers" :position="marker" :key="index"></el-amap-marker></el-amap></div>
</template><script>
import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap';
const amapManager = new AMapManager();
export default {name: 'Map',props: {lnglat: {default: () => {return {lng: '', lat: ''};},type: Object}},data() {const self = this;return {address: null,searchKey: '',amapManager,markers: [],searchOption: {city: '宁波',citylimit: true},saveData: {pos: [],adname: '',name: ''},center: [121.329402, 31.228667],zoom: 15,lng: 0,lat: 0,loaded: false,events: {init() {lazyAMapApiLoaderInstance.load().then(() => {self.initSearch();});},// 点击获取地址的数据click(e) {// console.log(e)self.markers = [];const { lng, lat } = e.lnglat;self.lng = lng;self.lat = lat;self.center = [lng, lat];self.markers.push([lng, lat]);// 这里通过高德 SDK 完成。const geocoder = new AMap.Geocoder({radius: 1000,extensions: 'all'});geocoder.getAddress([lng, lat], function(status, result) {if (status === 'complete' && result.info === 'OK') {if (result && result.regeocode) {// console.log(result);self.address = result.regeocode.formattedAddress;self.searchKey = result.regeocode.formattedAddress;self.$nextTick();const poi = result.regeocode.addressComponent;const d = {pos: [lng, lat],adname: poi.district,// name: poi.name,address: self.address};self.$emit('poi', d);}}});}},// 一些工具插件plugin: [// {//   pName: 'Geocoder',//   events: {//     init (o) {//       console.log(o.getAddress())//     }//   }// },{// 定位pName: 'Geolocation',events: {init(o) {// o是高德地图定位插件实例o.getCurrentPosition((status, result) => {if (result && result.position) {// 设置经度self.lng = self.lnglat.lng || result.position.lng;// 设置维度self.lat = self.lnglat.lat || result.position.lat;// 设置坐标self.center = [self.lng, self.lat];self.markers.push([self.lng, self.lat]);// loadself.loaded = true;// 页面渲染好后self.$nextTick();}});}}},{// 工具栏pName: 'ToolBar',events: {init(instance) {// console.log(instance);}}},{// 鹰眼pName: 'OverView',events: {init(instance) {// console.log(instance);}}},{// 地图类型pName: 'MapType',defaultType: 0,events: {init(instance) {// console.log(instance);}}},{// 搜索pName: 'PlaceSearch',events: {init(instance) {// console.log(instance)}}}]};},created() {this.searchKey = this.lnglat.address;},methods: {initSearch() {const vm = this;const 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) {const source = poiResult.source;const poi = poiResult.item;if (source !== 'search') {poiPicker.searchByKeyword(poi.name);} else {poiPicker.clearSearchResults();vm.markers = [];const lng = poi.location.lng;const lat = poi.location.lat;const address = poi.cityname + poi.adname + poi.name;vm.center = [lng, lat];vm.markers.push([lng, lat]);vm.lng = lng;vm.lat = lat;vm.address = address;vm.searchKey = address;const d = {pos: [lng, lat],adname: poi.adname,name: poi.name,address:poi.pname +' ' +poi.cityname +' ' +poi.adname +' ' +poi.address +' ' +poi.name};// console.log(JSON.stringify(poi, null, 3));// vm.$parent.getPos([lng, lat], poi.adname, poi.name);vm.$emit('poi', d);}});});},searchByHand() {if (this.searchKey !== '') {this.poiPicker.searchByKeyword(this.searchKey);}}}
};
</script><style lang="less">
.mapcontainer {width: 100%;height: 400px;/* position: absolute;left: 50%;top: 50%;transform: translate3d(-50%, -50%, 0); */border: 1px solid #999;margin-top: 40px;position: relative;.search-box {width: 100%;border: 1px solid #999;margin: 0 auto;height: 42px;position: absolute;top: -50px;left: 0;z-index: 888;display: flex;justify-content: space-between;}.search-box input {width: 80%;height: 100%;border: none;outline: none;padding: 0 8px;box-sizing: border-box;}.search-box button {width: 20%;height: 100%;border: none;background: #1890FF;color: #fff;outline: none;}.tip-box {width: 100%;max-height: 260px;position: absolute;top: 40px;overflow-y: auto;background-color: #fff;}
}</style>

使用方式

<Map v-if="showMap" @poi="poi" :lnglat="form" />
<a-button @ok="setAddress">地图选点</a-button>

//数据
form:{lng:121.536353,lat:29.875806,address: "浙江省宁波市海曙区西门街道中山西路科创大厦(布政巷)"
}
//方法
poi(e) {console.log(e);this.pois = e;
},
setAddress() {this.$set(this.form, 'address', this.pois.address);this.$set(this.form, 'lng', this.pois.pos[0]);this.$set(this.form, 'lat', this.pois.pos[1]);this.$refs['address'].onFieldBlur();},

vue引用高德地图实现选择定位，根据经纬度标注功能相关推荐

Vue 使用高德地图，精确定位ip定位，获取城市、地区位置
1.高德地图开放平台-注册账号并申请Key 1) 首先,注册开发者账号,成为高德开放平台开发者 2)登陆之后,在进入「应用管理」页面「创建新应用」 3)为应用添加 Key,「服务平台」一项请选择「 ...
vue使用高德地图，精确定位ip定位，获取城市、地区位置
1.高德地图准备点进入网址:https://lbs.amap.com/api/javascript-api/guide/abc/prepare (1)注册开发者账号 (2)进入控制台 (3)申请高德 ...
Vue 引入高德地图+点击定位
1. npm安装高德地图 npm i @amap/amap-jsapi-loader --save 2. 组件中引入 import AMapLoader from '@amap/amap-jsapi- ...
vue 使用高德地图点击标记点以及经纬度转地理位置
1.在index.html这种引入高德地图 <script type="text/javascript" src="https://webapi.amap.com/ ...
js应用高德地图API精确定位到门牌号标注并输出当前地址和经纬度
主要就是两个方法,逆地址解析和地址解析过程,以及Chrome只支持https的定位. <head><meta charset="utf-8"><met ...
vue中引用高德地图根据经纬度计算两地距离
vue中引用高德地图根据经纬度计算两地距离一.示例图: npm安装 npm install vue-amap --save 在min.js文件中引入vue-amap import VueAMap f ...
vue调用高德地图实现定位
vue调用高德地图实现定位第一步创建高德地图key 第二步:下载vue-amap npm install vue-amap --save 第三步:在项目main.js引入vue-amap impor ...
vue使用高德地图-进行显示地图和查询天气
vue使用高德地图高德地图显示,实现了天气查询效果(Vue) 在index.html中引入高德地图的css和js vue 插件列表问题解决: 高德地图显示,实现了天气查询效果(Vue) 在ind ...
vue使用高德地图aMap实现轨迹动画查询显示
vue使用高德地图搜索地址添加标记marker,定位,拖拽选址功能https://blog.csdn.net/SmartJunTao/article/details/123955679 实现效果: 需 ...

vue引用高德地图实现选择定位，根据经纬度标注功能

vue引用高德地图实现选择定位，根据经纬度标注功能相关推荐

最新文章

热门文章