The vue project imports Baidu map API

The vue project imports Baidu map API

Some projects require the embedding of maps. This article mainly introduces the method of calling Baidu Map API in the vue project. Other map calls are similar.

1. Account registration

Register an account on Baidu Map Open Platform and log in
Website address: http://lbsyun.baidu.com/index.php?title=jspopularGL

2. Get the key

Enter the development document and apply for a key


3. Create a project

4. Project import

At this point, we have obtained the key, and then we can import it in the project

First install Baidu Maps

npm install vue-baidu-map --save

Then register (here I use partial registration)

//局部注册   百度地图
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'

Finally import in the interface file

<template>
    <baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:1080px" @click="getClickInfo" :scroll-wheel-zoom='true'>
    </baidu-map>
</template>
<script>
export default {
  name: 'TestBaiDu',
  data () {
    return {
      center: {lng: 109.45744048529967, lat: 36.49771311230842},
      zoom: 13
    }
  },
  methods: {
    handler ({BMap, map}) {
      var point = new BMap.Point(109.49926175379778, 36.60449676862417)
      map.centerAndZoom(point, 13)
      var marker = new BMap.Marker(point) // 创建标注
      map.addOverlay(marker) // 将标注添加到地图中
      var circle = new BMap.Circle(point, 6, { strokeColor: 'Red', strokeWeight: 6, strokeOpacity: 1, Color: 'Red', fillColor: '#f03' })
      map.addOverlay(circle)
    },
    getClickInfo (e) {
      console.log(e.point.lng)
      console.log(e.point.lat)
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat
    }
}

5. Effect display