preface

“

Maps are also very common some of the needs of today, Lao Yan with you to use a simple map

The directory structure

  • The preparatory work
  • 1. Create scaffolding
  • 2. Install maps
  • 3. Import in main
  • 4. Simply use Baidu Map
  • 5. Map zooming
  • 6. Customize map styles
  • 7. Map marking

The preparatory work

  • Register baidu Map and create AK

    • To register your account, go to http://lbsyun.baidu.com/
    • Then go to the console -> My App -> Create App
    • Replication access applicationak

  • vue-cli

    • cliCreate your own

  • npm

    • The installationnodeEnvironment bring

1. Create scaffolding

vue create baidumap

&&

cd baidumap

&&

yarn serve

Copy the code

2. Install maps

npm install vue-baidu-map

Copy the code

3. Import in main

Ak is key in baidu map developer platform applications See http://lbsyun.baidu.com/apiconsole/key

So we’ve just done all the work that we did in front of this ak and I’ll just copy and paste it down here

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap,{ak:'Paste your Baidu map AK here'})

Copy the code

4. Simply use Baidu Map

  • In the Home page

html

<baidu-map

    id="allmap"

    @ready="mapReady">

</baidu-map>

Copy the code

js

data(){

  return{

    point: "".

  }

},

methods: {

    mapReady({ BMap, map }) {

      // Select a latitude and longitude as the center point

      this.point = new BMap.Point(113.27.23.13);

      map.centerAndZoom(this.point, 12);

    },

}

Copy the code

css

/* Set the map size */

#allmap{

  height: 600px;

  width: 600px;

  margin: 0 auto;

}

Copy the code

5. Map zooming

I’ve just written this simple map, but it doesn’t seem to be zooming in yet

So let’s add :scroll wheel-zoom=”true”

<baidu-map

    id="allmap"

    :scroll-wheel-zoom="true"

    @ready="mapReady">

</baidu-map>

Copy the code

Let’s see what happens


6. Customize map styles

MapStyle

attribute type describe
style String Personalized template
styleJson Object Personalized Json style

html

<baidu-map

   id="allmap"

   @ready="mapReady"

   :scroll-wheel-zoom="true"

   :mapStyle="mapStyle"

 >

</baidu-map>

Copy the code

js

  data(){

    return{

      point: "".

      // Custom style

      mapStyle:{

        styleJson: [

          {

            featureType: "water".

            elementType: "geometry".

            stylers: {

              color: "#20ab6a".

            },

          },

].

      },

    }

  },

Copy the code

In the image below, it is not hard to see that the river, its current and its change into # 20AB6a


Er… The color of the river seems a little strange, so let’s switch back

7. Map marking

Although we achieved the map display effect, the map without labels always felt a little bit worse than soul

<baidu-map

  id="allmap"

  @ready="mapReady"

  :scroll-wheel-zoom="true"

>

  <! -- BM-marker is an animation that marks a point beating at the latitude and longitude of a point -->

  <bm-marker :position="point" animation="BMAP_ANIMATION_BOUNCE">

  </bm-marker>

</baidu-map>

Copy the code

Also a brief talk, because the official website API is very detailed, I will take you into the door ha ha

API address: http://lbsyun.baidu.com/cms/jsapi/reference/lite.html

The last

  1. If you like this article, please give me a thumbs up and a look, it will be the biggest inspiration for my creation

  2. If you want to continue to receive good articles, you can follow sad Diary, we will send you good articles at 8am every day, Monday through Friday