调用百度地图API，获取经纬度，搜索指定位置

程序员文章站 2022-07-03 19:47:45

...

不多说，直接上代码

注册百度开发者帐号，拿到**ak，教程很多，直接搜索"百度地图AK申请流程"就知道怎么做

封装loadBMao.js

/**
 * 动态加载百度地图api函数
 * @param {String} ak  百度地图AK，必传
 */
export default function loadBMap(ak) {
    return new Promise(function(resolve, reject) {
      if (typeof window.BMap !== 'undefined') {
        resolve(window.BMap)
        return true
      }
      window.onBMapCallback = function() {
        resolve(window.BMap)
      }
      let script = document.createElement('script')
      script.type = 'text/javascript'
      script.src =
      'http://api.map.baidu.com/api?v=3.0&ak=' + ak + '&callback=onBMapCallback'
      script.onerror = reject
      document.head.appendChild(script)
    })
  }

渲染地图以及地图方法调用

<template>
    <div>
        <el-dialog title="地图" 
            :close-on-click-modal="false"
            :show-close="false"
            :visible.sync="visible" top="10vh" 
            width="1000px">
            <el-autocomplete
                style="width:100%;"
                popper-class="autoAddressClass"
                v-model="form.address"
                :fetch-suggestions="querySearchAsync"
                :trigger-on-focus="false"
                placeholder="详细地址"
                @select="handleSelect"
                clearable>
                <template slot-scope="{ item }">
                    <i class="el-icon-search fl mgr10"></i>
                    <div style="overflow:hidden;">
                    <div class="title">{{ item.title }}</div>
                    <span class="address ellipsis">{{ item.address }}</span>
                    </div>
                </template>
            </el-autocomplete>
            <div id="map-container" style="width:100%;height:600px;"></div>
            <span slot="footer">
                <el-button size="mini" type="success" @click="$parent.mapVisible = false">取消</el-button>
                <el-button size="mini" type="warning" @click="doSave('form')">保存</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import loadBMap from './loadBMap.js'
//props 是vue写法，在编辑地图经纬度的时候，还原位置，不需要的可以不用
export default {
    props:{
        point:{
            type:Object,
            default(){
                return {
                    lgtd:'',
                    lttd:''
                } 
            }
        }
    },
    data() {
        return {
            form: {
            address: '', //详细地址
            addrPoint: { //详细地址经纬度
                lng: 106.63,
                lat: 26.85
            }
            },
            visible:true,
            map: '', //地图实例
            mk: '', //Marker实例
            mapType1:null,
            mapType2:null,
            overView:null,
            overViewOpen:null
            
        }
    },
    //这里运用async/await 进行异步处理，保证BMap加载进来后才执行后面的操作
    async mounted() {
        await loadBMap('xaw3EFM50tCqzw6GBncqGWGtXNPpz3P0') //加载引入BMap
        this.form.addrPoint.lng = this.point.lgtd || 106.63;
        this.form.addrPoint.lat = this.point.lttd || 26.85;
            this.mapType1 = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]});
            this.mapType2 =new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT});
            this.overView =new BMap.OverviewMapControl();
            this.overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT})
        this.initMap()
        this.add_control() //这里调用卫星地图 不需要的可以不要这个方法
    },
    watch:{
        point:{
            handler(val){
                this.form.addrPoint.lng = val.lgtd || 106.63;
                this.form.addrPoint.lat = val.lttd || 26.85;
                this.initMap()
            },
            deep:true
        }
    },
    methods: {
         //初始化地图，
        initMap() {
            var that = this;
            this.map = new BMap.Map("map-container", {enableMapClick:false})  
            var point = new BMap.Point(this.form.addrPoint.lng,this.form.addrPoint.lat);
            this.map.centerAndZoom(point,12)
            this.mk = new BMap.Marker(point,{enableDragging:true}) 
            this.map.addOverlay(this.mk) 
            this.mk.addEventListener('dragend', function(e){
                that.getAddrByPoint(e.point) 
            })
            this.map.addEventListener('click', (e)=>{
                that.getAddrByPoint(e.point) 
            })
            var navigationControl = new BMap.NavigationControl({ 
                anchor: BMAP_ANCHOR_TOP_RIGHT, 
                type: BMAP_NAVIGATION_CONTROL_SMALL 
            })
            this.map.addControl(navigationControl ) 
            
            var  geolocationControl = new BMap.GeolocationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}) 
                geolocationControl.addEventListener("locationSuccess", function(e){ 
                that.getAddrByPoint(e.point) 
            });
            geolocationControl.addEventListener("locationError",function(e){ 
                alert(e.message);
            });
            this.map.addControl(geolocationControl) 
        },
            

        /**
         * 逆地址解析函数（根据坐标点获取详细地址）
         * @param {Object} point   百度地图坐标点，必传
         */
        getAddrByPoint(point){
            var that = this;
            var geco = new BMap.Geocoder();
            geco.getLocation(point, (res)=>{
                console.log(res)  
                that.$parent.form.lgtd = res.point.lng;
                that.$parent.form.lttd = res.point.lat;
                that.mk.setPosition(point) 
                that.map.panTo(point)
                that.form.address = res.address;  
                that.form.addrPoint = point;  
                
            })
            this.delete_control()
            setTimeout(()=>{
                this.add_control();
            },1000)
        },
        /**
         * 浏览器定位函数
         */
        geolocation() {
            var that = this;
            var geolocation = new BMap.Geolocation();
                geolocation.getCurrentPosition(function(res){
                    if(this.getStatus() == 'BMAP_STATUS_SUCCESS'){
                    that.getAddrByPoint(res.point) 
                    } else {
                    alert('failed'+this.getStatus()); 
                    }        
                },{enableHighAccuracy: true}) 
            },
        querySearchAsync(str,cb){
            var options = {
                onSearchComplete: function(res){ //检索完成后的回调函数
                var s = [];
                if (local.getStatus() == BMAP_STATUS_SUCCESS){
                    for (var i = 0; i < res.getCurrentNumPois(); i ++){
                    s.push(res.getPoi(i));
                    }
                    cb(s) 
                } else{
                    cb(s)
                }
                }
            }
            var local = new BMap.LocalSearch(this.map, options) 
            local.search(str) 
        },
        handleSelect(item) {
            this.form.address = item.address + item.title; 
            this.form.addrPoint = item.point; 
            this.map.clearOverlays() 
            this.mk = new BMap.Marker(item.point) 
            this.map.addOverlay(this.mk) 
            this.map.panTo(item.point) 
        },
        delete_control(){
            this.map.removeControl(this.mapType1);   //移除2D图，卫星图
            this.map.removeControl(this.mapType2);
            this.map.removeControl(this.overView);
            this.map.removeControl(this.overViewOpen);
        },
        add_control(){
            this.map.addControl(this.mapType1);          //2D图，卫星图
            this.map.addControl(this.mapType2);          //左上角，默认地图控件
            this.map.addControl(this.overView);          //添加默认缩略地图控件
            this.map.addControl(this.overViewOpen);      //右下角，打开


        },
        doSave(){
             //保存后，关闭组建
            this.$parent.mapVisible = false
            //this.$emit("update:point",{lgtd:this.form.lng,lttd:this.form.lat})
        }

    },
}
</script>
<style lang="scss" scoped>
#map-container{
    margin-top: 10px;
}
</style>
<style lang="scss">
.autoAddressClass{
  li {
    i.el-icon-search {margin-top:11px;}
    .mgr10 {margin-right: 10px;}
    .title {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .address {
      line-height: 1;
      font-size: 12px;
      color: #b4b4b4;
      margin-bottom: 5px;
    }
  }
}
</style>

效果图
目前卫星下点击会回到普通地图，正在处理......
参考资料 https://github.com/Marco-hui/vue-admin-web

相关标签： web VUE echart 定位百度地图

上一篇：蓝桥杯【JAVA】—— 矩阵乘法

下一篇： SpringCloud Config实现server端配置自动刷新（SpringCloud 2.0+版本）

调用百度地图API，获取经纬度，搜索指定位置

python调用百度地图WEB服务API获取地点对应坐标值

AngularJs 利用百度地图API 定位当前位置获取地址信息

python通过百度地图API获取某地址的经纬度详解

利用百度地图API获取当前位置信息的实例

vue中调用百度地图获取经纬度的实现

怎么根据百度地图位置获取经纬度？

【最新版】从百度api获取经纬度，用pyecharts v1 Geo 在地图上根据经纬度和量值，画出散点图

【python】python利用百度地图API：获取经纬度、地图撒点

调用百度地图API，获取经纬度，搜索指定位置

百度地图API调用实现获取经纬度以及标注

调用百度地图API，获取经纬度，搜索指定位置

python调用百度地图WEB服务API获取地点对应坐标值

AngularJs 利用百度地图API 定位当前位置 获取地址信息

python通过百度地图API获取某地址的经纬度详解

利用百度地图API获取当前位置信息的实例

vue中调用百度地图获取经纬度的实现

怎么根据百度地图位置获取经纬度？

【最新版】从百度api获取经纬度，用pyecharts v1 Geo 在地图上根据经纬度和量值，画出散点图

【python】python利用百度地图API：获取经纬度、地图撒点

调用百度地图API，获取经纬度，搜索指定位置

百度地图API调用实现获取经纬度以及标注

AngularJs 利用百度地图API 定位当前位置获取地址信息