Vue & Baidu Maps: Using Baidu Maps

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxxxxxxxxxxxxxxxxxxxxxx"></script>
    <title>voidvue_map</title>    
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

ak fills in the key you applied for yourself.

There are detailed instructions on the developer platform of Baidu Maps.

mymap.vue

<template>
  <div class="hello">
    <div style="margin-bottom:10px">
      <button @click="clickStart('jinting')">设定坐标</button>
      <button @click="clickEnd">退出设定</button>
    </div>
    <!-- map start -->
    <div style="" id="dituContent" class="ditu-content"></div>
    <!-- map end -->
  </div>
</template>

<script>
export default {
  name: 'mymap',
  data () {
    return {
      polygons: [],
      clickCity: '' ,
      polyline: null,
      marker: null ,
      cityName: '',
      status: 'none',
      centerPoint: [],
      savePointsArray: [],
      savePointsString: '',
      jinting: '' ,

      mapObj:null
    }
  },
  mounted () {
    this.initMap()
  },
  methods:{
    clickEnd(){
      console.log('======================== CLICK END ======================')
      this.clickCity = ''
      this.status = 'none'
    },
    initMap () {
      this .createMap() ; // Create a map
      
    },
    createMap(){
      let self = this
      let m = new BMap.Map("dituContent")
      let point = new BMap.Point(120.49,31.15)
      m.centerAndZoom(point,12)
      m.setCurrentCity("苏州")
      this.setMapEvent(m)
    },
    setMapEvent(m){
      m.enableDragging(); // Enable map drag event, enabled by default (can not be written) 
      m.enableScrollWheelZoom(); // Enable map wheel zoom in and out 
      m.enableDoubleClickZoom(); // Enable mouse double-click zoom, enabled by default ( optional) write) 
      m.enableKeyboard(); // Enable the keyboard up, down, left and right keys to move the map

      this .addMapControl(m); // Add a control to the map 
    },
    addMapControl(m){
      // Add a zoom control to the map 
      let ctrl_nav =  new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
      m.addControl(ctrl_nav);
      // Add a thumbnail control to the map 
      let ctrl_ove =  new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen: 1 });
      m.addControl(ctrl_ove);
      // Add a scale control to the map 
      let ctrl_sca =  new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
      m.addControl(ctrl_sca);

　　　　this.mapObj = m      
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .ditu-content{
    width:70%;
    height:600px;
    border:#ccc solid 1px;
    margin:0 auto;
  }
  .pointwords{
    word-wrap: break-word;
    text-align: center;
    padding: 0 20px;
  }
  .button{
    height: 100px;
  }
</style>

About the BMap map object:

Originally, I planned to pass it as a parameter to other functions, but I found that it was still inconvenient to use, so I still put it in the data of the vue page instance.

Vue & Baidu Maps: Using Baidu Maps

Guess you like