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

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

1.引入方式

clipboard.png

可在app.js中全局引入

import BaiduMap from 'vue-baidu-map'

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

 也可以局部引入,组件需在node_modules/vue-baidu-map/components里面找,局部引入要在<baidu-map ak=''></baidu-map>中声明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属性)

<div class="map">
  <el-input v-model="addressKeyword" placeholder="请输入地址来直接查找相关位置"></el-input>
  <baidu-map class="bmView" :scroll-wheel-zoom="true" :center="location" :zoom="zoom" @click="getLocationPoint" ak="YOUR_APP_KEY">
    <bm-view style="width: 100%; height:100px; flex: 1"></bm-view>
    <bm-local-search :keyword="addressKeyword" :auto-viewport="true" style="display: none"></bm-local-search>
  </baidu-map>
</div>

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

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来隐藏这个容器

<div class="map">
  <el-input v-model="addressKeyword" placeholder="请输入地址来直接查找相关位置"></el-input>
  <!-- 给地图加点击事件getLocationPoint,点击地图获取位置相关的信息,经纬度啥的 -->
  <!-- scroll-wheel-zoom:是否可以用鼠标滚轮控制地图缩放,zoom是视图比例 -->
  <baidu-map
    class="bmView"
    :scroll-wheel-zoom="true"
    :center="location"
    :zoom="zoom"
    @click="getLocationPoint"
    ak="YOUR_APP_KEY"
  >
    <bm-view style="width: 100%; height:100px; flex: 1"></bm-view>
    <bm-local-search :keyword="addressKeyword" :auto-viewport="true" style="display: none"></bm-local-search>
  </baidu-map>
</div>
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);
      },
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值