vue整合百度地图显示指定地点信息


Posted in Vue.js onApril 06, 2022

先看看效果图

vue整合百度地图显示指定地点信息

一、安装相关依赖

npm i --save vue-baidu-map

二、在main.js中引用

import BaiduMap from "vue-baidu-map"
Vue.use(BaiduMap,{
  ak: '你的密钥(百度地图开放API官网可免费申请)'
})

三、创建地图工具 map.js

export function MP(ak) {  
    return new Promise(function (resolve, reject) {  
      window.init = function () {  
        resolve(BMap)  
      }  
      var script = document.createElement("script");  
      script.type = "text/javascript";  
      script.src = "http://api.map.baidu.com/api?v=2.0&ak="+"你的密钥"+"&callback=init";  
      script.onerror = reject;  
      document.head.appendChild(script);  
    })  
  }  

在需要用到地图的文件引入该工具

import { MP } from "@/utils/map.js";

四、绘制地图

1、创建一个容器展示地图,给容器指定一个id,根据页面的具体需求指定容器的宽和高

<div class="map">
    <div id="container" style="height: 300px; width: 100%" ref="allmap"></div>
</div>

2、在data中定义需要用到的数据

data() {
    return {
        dialogMap: false,
    mapPointName: "",
    mapGetshow: true
    }
}

3、定义全局的map地图对象和geocoder地理编码对象

var map;
let geoc = null;

4、创建一个定位地点的方法,添加要展示的地点的名称,此处也可动态指定

mapNameChange() {
      let that = this,
        point,
        marker = null;
      let local = new BMap.LocalSearch(map, {
        renderOptions: { map: map },
        onSearchComplete: (res) => {
          if (local.getResults() != undefined) {
            map.clearOverlays(); //清除地图上所有覆盖物
            if (local.getResults().getPoi(0)) {
              point = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
              map.centerAndZoom(point, 10);
              marker = new BMap.Marker(point); // 创建标注
              map.addOverlay(marker); // 将标注添加到地图中
              marker.enableDragging(); // 可拖拽
              geoc.getLocation(point, function (rs) {
                var addComp = rs.addressComponents;
                that.mapPointName =
                  addComp.province +
                  ", " +
                  addComp.city +
                  ", " +
                  addComp.district +
                  ", " +
                  addComp.street +
                  ", " +
                  addComp.streetNumber;
              });
            } else {
              console.log("未搜索到结果")
            }
          } else {
            alert("未搜索到结果");
          }
        },
      });
      local.search("岳阳楼"); //要展示的地点
    },

5、在mounted函数中调用上述方法并绘制地图

mounted() {
    this.$nextTick(function () {
      var _this = this;
      MP(_this.ak).then((BMap) => {
        let that = this;
        this.dialogMap = !this.dialogMap;
        if (that.mapGetshow) {
          map = new BMap.Map("container");    //存放地图容器的id
          geoc = new BMap.Geocoder();
          map.enableScrollWheelZoom();
        }
        _this.mapNameChange()    //调用定位地点的方法
      });
    });
  }

到此这篇关于vue整合百度地图显示指定地点信息的文章就介绍到这了,更多相关vue 百度地图显示地点内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
vue 动态创建组件的两种方法
Dec 31 Vue.js
vue动态设置路由权限的主要思路
Jan 13 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue中使用mockjs配置和使用方式
VUE使用draggable实现组件拖拽
Apr 06 #Vue.js
教你部署vue项目到docker
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 #Vue.js
vue中div禁止点击事件的实现
Apr 02 #Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 #Vue.js
Vue+TypeScript中处理computed方式
Apr 02 #Vue.js
You might like
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
js实现导航跟随效果
2018/11/17 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
分享Python字符串关键点
2015/12/13 Python
Python闭包思想与用法浅析
2018/12/27 Python
Python创建字典的八种方式
2019/02/27 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
Python操作excel的方法总结(xlrd、xlwt、openpyxl)
2019/09/02 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
python 录制系统声音的示例
2020/12/21 Python
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
linux面试题参考答案(5)
2016/11/05 面试题
酒店销售主管岗位职责
2014/01/04 职场文书
家具促销活动方案
2014/02/16 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
会计核算科岗位职责
2014/03/19 职场文书
设计大赛策划方案
2014/06/13 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
财会专业大学生求职信
2014/09/26 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS