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实现购物小球抛物线的方法实例
Nov 22 Vue.js
在Vue中使用mockjs代码实例
Nov 25 Vue.js
Vue如何实现验证码输入交互
Dec 07 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
Vue router配置与使用分析讲解
Dec 24 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
CodeIgniter安全相关设置汇总
2014/07/03 PHP
PHP分页类集锦
2014/11/18 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
2017/09/06 jQuery
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
js实现录音上传功能
2019/11/22 Javascript
js实现打字小游戏
2019/12/17 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
基于python 二维数组及画图的实例详解
2018/04/03 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
Python连接Redis的基本配置方法
2018/09/13 Python
部署Django到阿里云服务器教程示例
2020/06/03 Python
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
十岁生日同学答谢词
2014/01/19 职场文书
会计顶岗实习心得
2014/01/25 职场文书
售房协议书范本2014
2014/10/23 职场文书
护士辞职信怎么写
2015/02/27 职场文书
社区党员干部承诺书
2015/05/04 职场文书
起诉书格式范文
2015/05/20 职场文书
子女赡养老人协议书
2016/03/23 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书