如何引用百度地图API

第一步：申请百度地图密钥

点击该链接：http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey

第二步：引入百度地图包

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>

在vue页面中是引入至index.html页面。

第三步：创建地图容器元素。

地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。

一般将div取名为allmap

第四步：在该vue页面引用地图包

import BMap from 'BMap'

import BMAP_STATUS_SUCCESS from 'BMAP_STATUS_SUCCESS'

同时检查webpack.base.conf.js文件中有无扩展定义下方内容‘

externals: {

'BMap': 'BMap',

'BMAP_STATUS_SUCCESS': 'BMAP_STATUS_SUCCESS',

'BMAP_ANCHOR_TOP_LEFT': 'BMAP_ANCHOR_TOP_LEFT',

'BMAP_ANCHOR_TOP_RIGHT': 'BMAP_ANCHOR_TOP_RIGHT',

'BMAP_ANCHOR_BOTTOM_RIGHT': 'BMAP_ANCHOR_BOTTOM_RIGHT',

'BMAP_ANCHOR_BOTTOM_LEFT': 'BMAP_ANCHOR_BOTTOM_LEFT',

'BMAP_NAVIGATION_CONTROL_SMALL': 'BMAP_NAVIGATION_CONTROL_SMALL',

},

’

第五步：具体功能选择不同的代码

http://lbsyun.baidu.com/jsdemo.htm#a1_2

根据示例来满足不同的功能。