vue项目中使用百度地图(vue-baidu-map)

番茄西红柿发布于2019-08-26 10:35 / 595人阅读

摘要：当属性为合法地名字符串时例外，因为百度地图会根据地名自动调整的值由于百度地图只有一种加载方式，因此组件及其所有子组件的渲染只能是异步的。

在使用vue做项目的时候，有用到百度地图，使用了vue-baidu-map插件，包括拾取位置坐标，搜索位置等

1.引入方式

可在app.js中全局引入

import BaiduMap from "vue-baidu-map"

Vue.use(BaiduMap, {
  /* 需要注册百度地图开发者来获取你的ak */
  ak: "YOUR_APP_KEY"
})

也可以局部引入，组件需在node_modules/vue-baidu-map/components里面找，局部引入要在中声明ak属性

import BaiduMap from "vue-baidu-map/components/map/Map.vue"
import BmView from "vue-baidu-map/components/map/MapView.vue"
import BmLocalSearch from "vue-baidu-map/components/search/LocalSearch.vue"
export default {
  components: {
      BaiduMap,
      BmView,
      BmLocalSearch
  },
}

使用(局部引用需要加上ak属性)

注意点：(地图需要显示的定义高度)

BmView 是用于渲染百度地图实例可视化区域的容器，通常与 LocalSearch 等会输出其它视图的组件结合使用
BaiduMap 组件容器本身是一个空的块级元素，如果容器不定义高度，百度地图将渲染在一个高度为 0 不可见的容器内
没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。当center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值
由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。

百度地图开发平台jsAPI：百度地图jsAPI

vue-baidu-map文档：vue-baidu-map文档

高德地图vue-amap文档：高德地图文档

2.搜索

搜索是利用bm-local-search来进行搜索，这个不知道是不是因为我外层用了固定定位，导致我在输入框中输入位置后，就把地图给覆盖了，没有做到官方文档那种，然后我就用了display: none来隐藏这个容器

data() {
    return {
      location: {
        lng: 116.404,
        lat: 39.915
      },
      zoom: 12.8,
      addressKeyword: "",
    };
},
methods: {
    getLocationPoint(e) {
      this.lng = e.point.lng;
      this.lat = e.point.lat;
      /* 创建地址解析器的实例 */
      let geoCoder = new BMap.Geocoder();
      /* 获取位置对应的坐标 */
      geoCoder.getPoint(this.addressKeyword, point => {
        this.selectedLng = point.lng;
        this.selectedLat = point.lat;
      });
      /* 利用坐标获取地址的详细信息 */
      geocoder.getLocation(e.point, res=>{
          console.log(res);
      },
}

正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）

往期推荐：

实现单行及多行文字超出后加省略号

判断iOS和Android及PC端

使用vue开发移动端管理后台

画三角形

GPU云服务器云服务器 ios百度地图使用 vue 中使用 webrtc vue中使用webrtc 百度地图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106441.html

vue.js下引入百度地图jsApi的两种方法

摘要：下引入百度地图的两种方法前言今天有个项目需要用到百度地图，一般我们在移动端使用百度地图，都是直接通过这样的方式，直接引入百度地图的。通过模块化引入的方法实际上百度地图官方去年已经开源了基于的和的对应开源组件，我们可以直接通过安装，然后使用。 vue.js下引入百度地图jsApi的两种方法前言今天有个项目需要用到百度地图，一般我们在移动端使用百度地图，都是直接通过这样的方式，直接引入...

muddyway 2019-08-23 10:23 评论0 收藏0
vue 地图可视化（1）

摘要：百度地图百度地图作为项目中地图可视化最重要的一部分，不止其为国人自己的地图，还因为其完善的技术文档案例和多样化的开源插件等上有的组件可以直接使用，有兴趣的同学可以直接上手这里不采用已经封装好的地图组件，而是从零开始，采用原生的百度地图一百度地图百度地图作为项目中地图可视化最重要的一部分，不止其为国人自己的地图，还因为其完善的技术文档案例和多样化的开源插件（echarts、Mapv等...

1treeS 2019-08-22 16:08 评论0 收藏0
vue-baidu-map 进入页面自动定位的解决方案！

摘要：我试过，以上这种方法好像是可行，效果可以出来，但我们最好采用作者提供的正确方法推荐这种方法那下面解决进入页面自动定位的方法也是在这里。写在前面：我只是一个前端小白，文章中的提到可能会有不足之处，仅提供一个参考。若有不完善的地方，欢迎各位大佬指出！，希望对你有帮助！好了，入正题。其实之前也被这问题困扰过，在网上也查了一番，没找到解决方法。直到今天，在GitHub冒昧地向大佬提了一个i...

GeekGhc 2019-08-22 16:46 评论0 收藏0
vue 百度地图api进行地理解析(解决跨域问题)

摘要：我采用了插件原生百度地图的二次封装，但是插件里的红点标记需要用到经纬度值。先扯一会儿首先非常感谢大家的阅读(感谢已加粗)，这是我人生中第一次写技术文章(以前打字都费劲)，本人小white一个(秀一下英语词汇量)，技术不咋地，就是爱分享，动不动还来个原创，你说气人不~ 闲话少说，进入主题！！！重点部分最近在做一个基于vue的设备管理系统，其中有一个需求：需要把设备所在地的...

Freeman 2019-08-26 10:13 评论0 收藏0