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 相关文章推荐
jQuery UI-Draggable 参数集合
Jan 10 Javascript
JavaScript类库D
Oct 24 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
遍历DOM对象内的元素属性示例代码
Feb 08 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
jQuery实现伪分页的方法分享
Feb 17 Javascript
JS留言功能的简单实现案例(推荐)
Jun 23 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
jquery实现穿梭框功能
Jan 19 jQuery
浅谈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
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
php 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
2020/04/04 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
window.opener用法和用途实例介绍
2013/08/19 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
2018/01/25 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
用Python输出一个杨辉三角的例子
2014/06/13 Python
tensorflow入门之训练简单的神经网络方法
2018/02/26 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
Python自动登录QQ的实现示例
2020/08/28 Python
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
.NET remoting的两种通道是什么
2016/05/31 面试题
普通院校学生的自荐信
2013/11/27 职场文书
酒吧总经理岗位职责
2013/12/10 职场文书
销售业务员岗位职责
2014/01/29 职场文书
家长对老师的感言
2014/03/11 职场文书
厨师长岗位职责范本
2014/08/25 职场文书
实习单位推荐信
2015/03/27 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL