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


Posted in Javascript onJune 08, 2018

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"
 },

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

Javascript 相关文章推荐
许愿墙中用到的函数
Oct 07 Javascript
jQuery中获取checkbox选中项等操作及注意事项
Nov 24 Javascript
2014年50个程序员最适用的免费JQuery插件
Dec 15 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 Javascript
JS实现继承的几种常用方式示例
Jun 22 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 #Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 #Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 #jQuery
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 #Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 #Javascript
vue cli2.0单页面title修改方法
Jun 07 #Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 #Javascript
You might like
yii框架源码分析之创建controller代码
2011/06/28 PHP
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
php发送post请求函数分享
2014/03/06 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
jquery+php随机生成红包金额数量代码分享
2015/08/27 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python中atexit模块的基本使用示例
2015/07/08 Python
python在文本开头插入一行的实例
2018/05/02 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
详解Python多线程下的list
2020/07/03 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
override和overload的区别
2016/03/09 面试题
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
韩语专业本科生求职信
2013/10/01 职场文书
大学校庆邀请函
2014/01/11 职场文书
竞聘演讲稿范文
2014/01/12 职场文书
志愿者活动总结范文
2014/04/26 职场文书
初中差生评语
2014/12/29 职场文书
资金申请报告范文
2015/05/14 职场文书
运动会宣传稿100字
2015/07/23 职场文书
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers