Vue uses Baidu Map

This is the 23rd day of my participation in the August More Text Challenge.More challenges in August

For development to do, the map function is often encountered, so after my consideration to use Baidu map

Because Baidu Map JavaScript API GL V1.0 is a set of application program interface written by JavaScript language, can help you build rich and interactive map application in the website, support PC and mobile browser based map application development, and support HTML5 features of map development.

Baidu Map JavaScript API support HTTP and HTTPS, free of charge, can be used directly. The number of times the interface can be used is unlimited. Before using it, you need to apply for a key (AK). Before you use baidu Map JavaScript API, please read baidu Map API Terms of use. For any non-profit application, please use it directly. For commercial application, please refer to the instructions.

JavaScript API GL uses WebGL to render maps, coverings, etc., and supports 3D viewing of maps. GL version interface is basically backward compatible with low migration cost. The current V1.0 version supports basic 3D map displays, basic map controls and coverings.

So before using baidu map, we will go to the website, baidu map lbsyun.baidu.com/apiconsole/… Register and create specific applications to obtain the AK accessing the application. As follows:

Use the sample

Start by installing dependency packages in your project

npm i vue-baidu-map --save
Copy the code

Imported in the entry file main.js

import BaiduMap from 'vue-baidu-map'; Vue. Use (BaiduMap, {ak: 'your BaiduMap key ak'})Copy the code

Then add a reference to the index.html entry file

<script type="text/javascript" SRC ="//api.map.baidu.com/api?v=1.1&ak= your AK"></script>Copy the code

Then create a vUE single page to add

<template> <div> <div id="map" style="width:1200px; height:500px;" ></div> </div> </template>Copy the code

In Mounted, write the method for creating a MAP instance

Var map = new map.map ("map"); CenterAndZoom (new map.point (113.370171,23.129587), 15); Map. addControl(new map. MapTypeControl({mapTypes:[BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]})); Map. SetCurrentCity (" guangzhou "); / / set the map shows the city This is you must set up the map. EnableScrollWheelZoom (true); // Enable mouse wheel zoomingCopy the code

If you want to remove the baidu Map logo, you can add the following in the CSS

.BMap_cpyCtrl {
    display: none;
}
.anchorBL {
    display: none;
}
Copy the code

Now you can create a map module!

parameter