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 相关文章推荐
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
vue router 动态路由清除方式
May 25 Vue.js
vue实现简易音乐播放器
Aug 14 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
多文件上载系统完整版
2006/10/09 PHP
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
PHP函数篇详解十进制、二进制、八进制和十六进制转换函数说明
2011/12/05 PHP
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
PHP5函数小全(分享)
2013/06/06 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
Javascript insertAfter() 实现函数代码
2011/10/12 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
微信小程序实现点击卡片 翻转效果
2019/09/04 Javascript
python类和函数中使用静态变量的方法
2015/05/09 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
python调用win32接口进行截图的示例
2020/11/11 Python
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
财务经理的岗位职责
2013/12/17 职场文书
咖啡馆创业计划书
2014/01/26 职场文书
给面试官的感谢信
2014/02/01 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
安全保证书
2015/01/16 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书