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 相关文章推荐
javascript之函数直接量(function(){})()
Jun 29 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
jQuery利用sort对DOM元素进行排序操作
Nov 07 Javascript
JavaScript中的工厂函数(推荐)
Mar 08 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
Aug 18 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 Javascript
vue filter 完美时间日期格式的代码
Aug 14 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 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
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
php新建文件的方法实例
2019/09/26 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
js 编程笔记 无名函数
2011/06/28 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
2017/03/08 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
vue-router的hooks用法详解
2020/06/08 Javascript
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
python中sleep函数用法实例分析
2015/04/29 Python
Python中方法链的使用方法
2016/02/23 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
python爬虫实现获取下一页代码
2020/03/13 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
python中如何设置代码自动提示
2020/07/15 Python
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
世界上最大的乐谱选择:Sheet Music Plus
2020/01/18 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
写给老婆的保证书
2015/02/27 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书