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 相关文章推荐
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
springboot+VUE实现登录注册
May 27 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
Vue.Draggable实现交换位置
Apr 07 Vue.js
Vue2项目中对百度地图的封装使用详解
Jun 16 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
apache+php+mysql安装配置方法小结
2010/08/01 PHP
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
Element Collapse 折叠面板的使用方法
2020/07/26 Javascript
王纯业的Python学习笔记 下载
2007/02/10 Python
python中urllib模块用法实例详解
2014/11/19 Python
pandas重新生成索引的方法
2018/11/06 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
python如何统计代码运行的时长
2019/07/24 Python
python SocketServer源码深入解读
2019/09/17 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
素质拓展感言
2014/01/29 职场文书
上班玩手机检讨书
2014/02/17 职场文书
社区文化建设方案
2014/05/02 职场文书
大学生求职信范文
2014/05/24 职场文书
幼儿园社区活动总结
2014/07/07 职场文书
幼师大班个人总结
2015/02/13 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
浅谈Python数学建模之固定费用问题
2021/06/23 Python
Python Django获取URL中的数据详解
2021/11/01 Python
利用Java连接Hadoop进行编程
2022/06/28 Java/Android