高德vue-amap使用（一）标记点位获取地址及经纬度

vue高德地图

• 图片示例
• 准备工作
• 安装与配置
• • npm安装
  • main.js配置
• 使用
• • 父组件
  • 子组件

图片示例

准备工作

高德开放平台：https://lbs.amap.com/

注册登录后进入控制台，在应用管理下我的应用里创建应用添加key，就可以看到你的安全密钥了

安装与配置

npm安装

npm install vue-amap --save

main.js配置

import VueAMap from 'vue-amap'; //引入高德地图Vue.use(VueAMap);VueAMap.initAMapApiLoader({key: '14efe7b9c0a51017c1ee7c641758ba69',plugin: [ // 这里根据自己项目按需引入插件'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale','AMap.OverView', 'AMap.ToolBar','AMap.MapType','AMap.PolyEditor', 'AMap.CircleEditor',// 圆形编辑器插件"AMap.Geolocation", // 定位控件，用来获取和展示用户主机所在的经纬度位置"AMap.Geocoder", // 地理编码与逆地理编码服务，用于地址描述与坐标间的相互转换"AMap.CitySearch",]});window._AMapSecurityConfig = {securityJsCode:'你的安全密钥',}// 解决高德地图刷新显示不出来const amapKeys = Object.keys(localStorage).filter(key => key.match(/^_AMap_/))amapKeys.forEach(key => { localStorage.removeItem(key) })

使用

父组件

1.html部分

<el-form-item label="设备位置"><el-button class="dev-product" @click="openMap()"><span class="text":class="mapInfo.lat" />">{{addressTip}}</span><i class="el-icon-more"></i></el-button><div v-if="mapInfo.lat&&mapInfo.lng">经度：{{mapInfo.lng}}，纬度：{{mapInfo.lat}}</div></el-form-item>

<el-dialog title="设备位置" :visible.sync="map" width="900px" id="map"> <amap @mapDing="getCoordinate" :Nowlnglat="Nowlnglat"></amap> <div slot="footer" class="dialog-footer"> <el-button @click="map = false" class="button-minwidth">{{$t('Base.cancels')}}</el-button> <el-button type="primary" @click="submitMap" class="button-minwidth">{{$t('Base.confirms')}}</el-button> </div></el-dialog>

2.js部分

<script>import amap from "../map.vue"export default {components: {amap},data() {return {addressTip:'请选择设备位置',map:false,mapInfo:{},Nowlnglat:[],//经纬度传值lng:113.03,lat:28.13}},methods: {openMap(){this.map=trueif(this.lng&&this.lat){this.mapInfo={lng:this.lng,lat:this.lat}this.Nowlnglat=[this.lng,this.lat]}},getCoordinate(map){this.mapInfo=map},submitMap(){this.map=falsethis.addressTip=this.mapInfo.address}}</script>

3.css部分

.dev-product{width: 300px;height: 32px;padding: 0 8px;display: flex;align-items: center;::v-deep span{width: 100%;overflow: hidden;display: flex;justify-content: space-between;padding-left: 5px;.text{width: 92%;color: #c0c4cc;}.active{width: 92%;color: #303133 ;}i{color:#D8D8D8}}}

子组件

1.html部分

 <template><div class="map-container"><div class="amap-page-container"><div class="input-search"><el-input class="inpu" placeholder="请输入检索地址" v-model="address"><template #suffix><el-button icon="el-icon-search"@click="searchMap()"></el-button></template></el-input></div><el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center" :zoom="zoom" :events='events'><el-amap-marker v-for="(marker, index) in markers" :key="marker.index" :position="marker.position":icon="marker.icon" :title="marker.title" :events="marker.events" :visible="marker.visible":draggable="marker.draggable" :vid="index"></el-amap-marker></el-amap><div class="map-address">详细地址：{{address}}</div><div class="map-mark"><div class="mark-item"><span>经度</span><el-input placeholder="请输入经度" v-model="lng" maxlength="20"></el-input></div><div class="mark-item"><span>纬度</span><el-input placeholder="请输入纬度" v-model="lat" maxlength="20"></el-input></div> <el-button class="mark" @click="handelQuery">查询</el-button></div></div></div></template>

2.js部分

<script>export default {name: "v-map",props: ["Nowlnglat"],data() {let self = this;return {map:{address:'',lng:'',lat:''},tishi: '',//地图相关address: '', //获取的位置zoom: 13, // 地图缩放center: [122.59996, 26.197646], // 初始中心lng: 0, //经纬度lat: 0,loaded: false,markers: [],// 点击显示的标记默认的定位//自动定位到当前位置plugin: [{timeout: 1000, //超过10秒后停止定位panToLocation: true, //定位成功后将定位到的位置作为地图中心点zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见pName: 'Geolocation',events: {init(o) {// o 是高德地图定位插件实例o.getCurrentPosition((status, result) => {if (result && result.position) {self.address = result.formattedAddress;self.lng = result.position.lng;self.lat = result.position.lat;self.map.address= self.addressself.map.lng=self.lngself.map.lat=self.latif(self.Nowlnglat[0] != null && self.Nowlnglat[1] != null){letClnglat =self.Nowlnglatself.center =Clnglat self.markers = [{position: Clnglat,}]let geocoder = new AMap.Geocoder({radius: 1000});//根据坐标获取位置将经纬度 转换后成 地址信息 放在 输入框展示geocoder.getAddress(Clnglat,function (status, result) {if (status === "complete" && result.info === "OK") {self.address=result.regeocode.formattedAddressself.lng=self.Nowlnglat[0]self.lat=self.Nowlnglat[1]self.map.address= self.addressself.map.lng=self.lngself.map.lat=self.lat}});}else{self.center = [self.lng, self.lat];self.markers = [{position: self.center}]}self.loaded = true;self.$nextTick();} else {o.getCityInfo((status, result) => {if (result && result.center) {self.address = result.province+result.city;self.lng = result.center[0];self.lat = result.center[1];self.map.address= self.addressself.map.lng=self.lngself.map.lat=self.latif(self.Nowlnglat[0] != null && self.Nowlnglat[1] != null){letClnglat =self.Nowlnglatself.center =Clnglat self.markers = [{position: Clnglat,}]let geocoder = new AMap.Geocoder({radius: 1000});//根据坐标获取位置将经纬度 转换后成 地址信息 放在 输入框展示geocoder.getAddress(Clnglat,function (status, result) {if (status === "complete" && result.info === "OK") {self.address=result.regeocode.formattedAddressself.lng=self.Nowlnglat[0]self.lat=self.Nowlnglat[1]self.map.address= self.addressself.map.lng=self.lngself.map.lat=self.lat}});}else{self.center = result.center;self.markers = [{position: self.center,}]}self.loaded = true;self.$nextTick();}});}});}}}],// 点击地图获取当前位置并显示标记events: {click(e) {self.chaadd(e.lnglat)}}}},created() {this.$emit('mapDing', this.map);},methods: {searchMap() {let that = this;let address = this.address;that.map.address=that.addressvar geocoder = new AMap.Geocoder({city: "", //城市设为北京，默认：“全国”});geocoder.getLocation(address, function(status, result) {if (status === 'complete' && result.geocodes.length) {var lnglat = result.geocodes[0].location;that.center = [lnglat.lng, lnglat.lat]that.lng = lnglat.lng;that.lat = lnglat.lat;that.markers = [{position: that.center,}]that.map.lng=that.lngthat.map.lat=that.lat} else {that.address=undefinedthat.lng=undefinedthat.lat=undefinedthat.$message({type: "error",message: "根据地址查询位置失败",});}});that.$emit('mapDing', that.map);},chaadd(e) {let self = this;let { lng, lat} = e;self.lng = lng;self.lat = lat;self.map.lng=self.lngself.map.lat=self.latself.center = [self.lng, self.lat];self.loaded = true;self.markers = [{position: self.center,}]var geocoder = new AMap.Geocoder({radius: 1000 //范围，默认：500});var marker = new AMap.Marker();function regeoCode() {var lnglat = [lng, lat]geocoder.getAddress(lnglat, function(status, result) {if (status === 'complete' && result.regeocode) {self.address = result.regeocode.formattedAddress;self.map.address=self.address} else {self.address=undefinedself.lng=undefinedself.lat=undefinedself.$message({type: "error",message: "根据经纬度查询地址失败",});}});}regeoCode(); self.$emit('mapDing', self.map);},handelQuery(){let self =thisself.map.lng=parseFloat(self.lng)self.map.lat=parseFloat(self.lat)self.center = [parseFloat(self.lng), parseFloat(self.lat)];self.loaded = true;self.markers = [{position: self.center,}]var geocoder = new AMap.Geocoder({radius: 1000 //范围，默认：500});// var marker = new AMap.Marker();function regeoCode() {var lnglat = [parseFloat(self.lng), parseFloat(self.lat)]geocoder.getAddress(lnglat, function(status, result) {if (status === 'complete' && result.regeocode) {self.address = result.regeocode.formattedAddress;self.map.address=self.address} else {self.address=undefinedself.lng=undefinedself.lat=undefinedself.$message({type: "error",message: "根据经纬度查询地址失败",});}});}regeoCode();self.$emit('mapDing', self.map);}}}</script>

3.css部分

.map-container{height: 526px;width: 100%;padding: 20px;display: flex;justify-content: center;.amap-page-container {height: 400px;width: 100%;position: relative;.input-search {position: absolute;top: 10px;right: 0px;z-index: 5;width: 400px;::v-deep .el-input__inner{width: 271px !important;padding: 0 10px;}.inpu {width: calc(100% - 10px);}::v-deep .el-input__suffix{position: absolute;height: 100%;right: 0 !important;top: 0;}.el-button--medium{height: 32px;width: 120px;background: #f2f6fc;display: flex;padding: 0;align-items: center;justify-content: center;}}}.map-address{margin-top: 15px;margin-bottom: 15px;}.map-mark{display: flex;flex-direction: row;.mark-item{width: 248px;display: flex;align-items: center;justify-content: space-between;margin-right: 20px;span{white-space: nowrap;margin-right: 20px;}::v-deep .el-input__inner{width: 200px !important;}::v-deep .el-input-number__decrease{display: none;}::v-deep .el-input-number__increase{display: none;}}.mark{width: 80px;height: 32px;background: #087CF2;color: #ffffff;border: 1px solid #087cf2;padding: 0;}}}