欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue项目中使用百度地图的方法

程序员文章站 2022-11-15 10:18:44
1.在百度地图申请密钥:  将 ...

1.在百度地图申请密钥:  将

<script type="text/javascript" src="=密钥" ></script> 中的 密钥替换成你申请的,在 vue项目的index.html引用。

2. 在build 文件下下的 webpack.base.conf.js贴入代码

externals: {
  "bmap": "bmap"
 },

vue项目中使用百度地图的方法

3. map.vue代码(demo可以直接使用,demo使用了vue-clipboard2插件,请自行安装)

<template>
  <div>
    <el-row >
     <el-col :offset="2" :span="8">
       <el-input :id="suggestid" v-model="address_detail" :clearable='clearable' placeholder="请输入店铺地址,获取店铺坐标" >
      </el-input>
    </el-col>
    <el-col :span="2">
      <el-button id="position" @click="search" type="primary">定位</el-button>
    </el-col>
    <el-col :span="12" >
     <el-tag type="success" v-clipboard:copy="userlocation.lng" v-clipboard:success="oncopy" v-clipboard:error="onerror" >经度 {{userlocation.lng}}</el-tag>
     <el-tag type="success" v-clipboard:copy="userlocation.lat" v-clipboard:success="oncopy" v-clipboard:error="onerror">纬度 {{userlocation.lat}}</el-tag>
     <el-tag type="success" ><<<<点击左侧按钮复制经纬度信息</el-tag>
    </el-col> 
  </el-row>
  <el-row>
    <el-col :offset="2" :span="18">
      <div id="map_canvas" class="allmap"></div>
    </el-col>
  </el-row>
  </div>
</template>
<script>
export default {
 data() {
  return {
   address_detail: "", //详细地址
   userlocation: { lng: "", lat: "" },
   clearable: true,
   suggestid: "suggestid",
   map : {},
   mk: {}
  };
 },
 created () {
   
 },
 methods: {
   drawmap() {
    this.map = new bmap.map("map_canvas");        // 创建地图实例
    this.map.addcontrol(new bmap.navigationcontrol());      // 启用放大缩小 尺
    this.map.enablescrollwheelzoom();
    this.getlocation();//获取当前坐标, 测试时获取定位不准。
  
    var point = new bmap.point(this.userlocation.lng, this.userlocation.lat); // 创建点坐标 
    this.map.centerandzoom(point, 13);         // 初始化地图,设置中心点坐标和地图级别 
    var marker = new bmap.marker(point);    // 创建标注  
    this.map.addoverlay(marker);           // 将标注添加到地图中
     
    var ac = new bmap.autocomplete({
    //建立一个自动完成的对象
    input: "suggestid",
    location: this.map
    });
    var myvalue;
   ac.addeventlistener("onconfirm", (e)=> {
    //鼠标点击下拉列表后的事件
    var _value = e.item.value;
    myvalue =_value.province +_value.city +_value.district +_value.street +_value.business;
    this.address_detail = myvalue;
    this.setplace();
   });
   },
   getmarker (point) {
        this.mk = new bmap.marker(point); 
        this.mk.addeventlistener("dragend", this.showinfo);
        this.mk.enabledragging();  //可拖拽
        this.getaddress(point);
        this.map.addoverlay(this.mk);//把点添加到地图上 
        this.map.panto(point);
   },
   getlocation () {
    //获取当前位置
    var geolocation = new bmap.geolocation(); 
    geolocation.getcurrentposition((r) =>{ 
      if(geolocation.getstatus() == bmap_status_success){ 
        this.getmarker(r.point);
        this.userlocation = r.point;
      }else { 
        alert('failed'+this.getstatus()); 
      } 
    });
   },
   //绑定marker的拖拽事件
     showinfo(e){
      var gc = new bmap.geocoder();
      gc.getlocation(e.point, (rs)=>{
        var addcomp = rs.addresscomponents;
        var address = addcomp.province + addcomp.city + addcomp.district + addcomp.street + addcomp.streetnumber;//获取地址
         
        //画图 ---》显示地址信息
        var label = new bmap.label(address,{offset:new bmap.size(20,-10)});
        this.map.removeoverlay(this.mk.getlabel());//删除之前的label
 
        this.mk.setlabel(label);
        this.address_detail = address;
        this.userlocation = e.point;
         
       });
    },
     //获取地址信息,设置地址label
     getaddress(point){
      var gc = new bmap.geocoder();
       
      gc.getlocation(point, (rs)=>{
        var addcomp = rs.addresscomponents;
        var address = addcomp.province + addcomp.city + addcomp.district + addcomp.street + addcomp.streetnumber;//获取地址
         
        //画图 ---》显示地址信息
        var label = new bmap.label(address,{offset:new bmap.size(20,-10)});
        this.map.removeoverlay(this.mk.getlabel());//删除之前的label
        this.address_detail = address;
        this.mk.setlabel(label);
         
       });
       
    },
    setplace() {
    this.map.clearoverlays(); //清除地图上所有覆盖物
    var th = this
    function myfun() {
     th.userlocation = local.getresults().getpoi(0).point; //获取第一个智能搜索的结果
     th.map.centerandzoom(th.userlocation, 18);
     th.getmarker(th.userlocation);
    }
 
    var local = new bmap.localsearch(this.map, {
     onsearchcomplete: myfun //智能搜索
    });
    local.search(this.address_detail);
   },
   search () {
       var localsearch = new bmap.localsearch(this.map);
       localsearch.enableautoviewport(); //允许自动调节窗体大小
       this.searchbyinputname(localsearch);
 },
   searchbyinputname(localsearch) {
     this.map.clearoverlays(); //清空原来的标注
     var th = this;
     var keyword = this.address_detail;
     localsearch.setsearchcompletecallback(function(searchresult) {
       var poi = searchresult.getpoi(0);
       th.userlocation = poi.point;
       th.map.centerandzoom(poi.point, 13);
       th.getmarker(th.userlocation);
    });
     localsearch.search(keyword);
   },
   oncopy () {
     this.$message('内容已复制到剪贴板!');
   },
   onerror () {
     this.$message('内容复制失败,请重试!');
 
   }
     
 },
 mounted() {
  this.$nexttick(function() {
   this.drawmap();
  });
   
 }
};
</script>
<style scoped>
.allmap {
 width: 100%;
 height: 400px;
 font-family: "微软雅黑";
 border: 1px solid green;
}
.el-tag {
 cursor: pointer;
}
</style>

总结

以上所述是小编给大家介绍的vue项目中使用百度地图的方法,希望对大家有所帮助