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

vue高德地图

图片示例

准备工作

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

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

安装与配置

npm安装

npminstall 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-itemlabel="设备位置"><el-buttonclass="dev-product"@click="openMap()"><spanclass="text":class="mapInfo.lat?'active':''">{{addressTip}}</span><iclass="el-icon-more"></i></el-button><divv-if="mapInfo.lat&&mapInfo.lng">经度：{{mapInfo.lng}}，纬度：{{mapInfo.lat}}</div></el-form-item>

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

2.js部分

<script>import amap from"../map.vue"exportdefault{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部分

<style lang="scss" scoped>
  .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
    }}}
</style>              

子组件

1.html部分

<template><divclass="map-container"><divclass="amap-page-container"><divclass="input-search"><el-inputclass="inpu"placeholder="请输入检索地址"v-model="address"><template#suffix><el-buttonicon="el-icon-search"@click="searchMap()"></el-button></template></el-input></div><el-amapvid="amap":plugin="plugin"class="amap-demo":center="center":zoom="zoom":events='events'><!-- 点击显示标记 --><el-amap-markerv-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><divclass="map-address">详细地址：{{address}}</div><divclass="map-mark"><divclass="mark-item"><span>经度</span><el-inputplaceholder="请输入经度"v-model="lng"maxlength="20"></el-input></div><divclass="mark-item"><span>纬度</span><el-inputplaceholder="请输入纬度"v-model="lat"maxlength="20"></el-input></div><el-buttonclass="mark"@click="handelQuery">查询</el-button></div></div></div></template>

2.js部分

<script>exportdefault{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.address
                  self.map.lng=self.lng
                  self.map.lat=self.lat
                  if(self.Nowlnglat[0]!=null&& self.Nowlnglat[1]!=null){let  Clnglat =self.Nowlnglat
                    self.center =  Clnglat 
                    self.markers =[{position: Clnglat,}]let geocoder =newAMap.Geocoder({radius:1000});//根据坐标获取位置  将经纬度 转换后成 地址信息 放在 输入框展示
                    geocoder.getAddress(Clnglat,function(status, result){if(status ==="complete"&& result.info ==="OK"){
                        self.address=result.regeocode.formattedAddress
                        self.lng=self.Nowlnglat[0]
                        self.lat=self.Nowlnglat[1]
                        self.map.address= self.address
                        self.map.lng=self.lng
                        self.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.address
                      self.map.lng=self.lng
                      self.map.lat=self.lat
                      if(self.Nowlnglat[0]!=null&& self.Nowlnglat[1]!=null){let  Clnglat =self.Nowlnglat
                        self.center =  Clnglat 
                        self.markers =[{position: Clnglat,}]let geocoder =newAMap.Geocoder({radius:1000});//根据坐标获取位置  将经纬度 转换后成 地址信息 放在 输入框展示
                        geocoder.getAddress(Clnglat,function(status, result){if(status ==="complete"&& result.info ==="OK"){
                            self.address=result.regeocode.formattedAddress
                            self.lng=self.Nowlnglat[0]
                            self.lat=self.Nowlnglat[1]
                            self.map.address= self.address
                            self.map.lng=self.lng
                            self.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.address
        var geocoder =newAMap.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.lng
            that.map.lat=that.lat
          }else{
            that.address=undefined
            that.lng=undefined
            that.lat=undefined
            that.$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.lng
        self.map.lat=self.lat
        self.center =[self.lng, self.lat];
        self.loaded =true;
        self.markers =[{position: self.center,}]var geocoder =newAMap.Geocoder({radius:1000//范围，默认：500});var marker =newAMap.Marker();functionregeoCode(){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=undefined
              self.lng=undefined
              self.lat=undefined
              self.$message({type:"error",message:"根据经纬度查询地址失败",});}});}regeoCode();
         self.$emit('mapDing', self.map);},handelQuery(){let self =this
        self.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 =newAMap.Geocoder({radius:1000//范围，默认：500});// var marker = new AMap.Marker();functionregeoCode(){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=undefined
              self.lng=undefined
              self.lat=undefined
              self.$message({type:"error",message:"根据经纬度查询地址失败",});}});}regeoCode();
        self.$emit('mapDing', self.map);}}}</script>

3.css部分

<style lang="scss" scoped>
.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;}}}
</style>