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


            1.在百度地图申请密钥: http://lbsyun.baidu.com/  将

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥" ></script> 中的 密钥替换成你申请的,在 vue项目的index.html引用。

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





externals: {

  "BMap": "BMap"

 },





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项目中使用百度地图的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对中文源码网网站的支持！