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 相关文章推荐
JS上传前预览图片实例
Mar 25 Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
jquery为页面增加快捷键示例
Jan 31 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
node.js缺少mysql模块运行报错的解决方法
Nov 13 Javascript
js实现水平滚动菜单导航
Jul 21 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
解决vue组件中click事件失效的问题
Nov 09 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 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
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
微信小程序 二维码canvas绘制实例详解
2017/01/06 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
python切换hosts文件代码示例
2013/12/31 Python
python实现祝福弹窗效果
2019/04/07 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
土木工程师岗位职责
2013/11/24 职场文书
购房意向书范本
2014/04/01 职场文书
合作经营协议书
2014/04/17 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
相亲大会策划方案
2014/06/05 职场文书
安全责任书范文
2014/08/25 职场文书
学风建设演讲稿
2014/09/12 职场文书
教师读书活动心得体会
2016/01/14 职场文书
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android