前端VUE使用百度地图 、vue-baidu-map

前端VUE使用百度地图

捣鼓了好几天的地图，小白入手，记录一下下！具体的可以查看https://dafrok.github.io/vue-baidu-map

一、安装依赖

npm install vue-baidu-map --save

二、引入

在main.js中全局注册使用

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})

在index.html文件中添加

<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的ak"></script>

三、简单的使用

<template>
  <div class="map">
    <baidu-map
      class="mapId"
      :center="center"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
      @moving="syncCenterAndZoom"
      @moveend="syncCenterAndZoom"
      @zoomend="syncCenterAndZoom"
      @ready="readyMap"
    >
 <!--      //页面的打点显示-->   
      <bm-point-collection
        :points="points"
        shape="BMAP_POINT_SHAPE_STAR"
        color="red"
        size="BMAP_POINT_SIZE_SMALL"
        @click="clickHandler">
      </bm-point-collection>
      
<!--      //地理位置的搜索功能-->
<!--      <bm-local-search-->
<!--        :keyword="keyword"-->
<!--        :auto-viewport="true"-->
<!--        :location="location"-->
<!--      ></bm-local-search>-->

<!--      //缩放比例尺的展示-->
<!--      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>-->

<!--      //定位-->
<!--      <bm-geolocation-->
<!--        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"-->
<!--        :showAddressBar="true"-->
<!--        :autoLocation="true"-->
<!--      ></bm-geolocation>-->

<!--      //添加一个小红点的，并将当前的经纬度写入数据中-->
<!--      <bm-marker :position="{lng:center.lng, lat: center.lat}"></bm-marker>-->
    </baidu-map>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        center: {
          lng: 116.404,
          lat: 39.915
        },//初始的中心位置
        zoom: 4,//缩放级别
        points: [],//打点的地方
        //百度地图初始化数据
        baidumapSwitch:false,
        location: "",
        keyword: ""
      }
    },
    mounted(){
    this.addPoints ()
    },
    methods: {
      //地图实例:初始化加载地图
      readyMap({ BMap, map }) {
        // console.log(BMap, "BMap");
        // console.log(map, "map");
      },
      clickHandler(e){
        console.log(e.point.lng);
        console.log(e.point.lat);
        this.center.lng = e.point.lng;
        this.center.lat = e.point.lat;
      },
      syncCenterAndZoom (e) {
        const {lng, lat} = e.target.getCenter()
        this.center.lng = lng
        this.center.lat = lat
        this.zoom = e.target.getZoom()
        console.log(this.zoom);
      }
 },
      //添加海量点
      addPoints () {
        const points = [];
        for (var i = 0; i < n; i++) {
          const position = {lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21}
          points.push(position)
        }
         this.points = points
      }
    }
  }
</script>
<style lang="scss" scoped>
  .map {
    background-color: #32d0ab;
   .mapId{
     height:600px;
     width:100%;
   }
  }
</style>