1、首先在index.html中引入百度地图
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的秘钥"></script>
2、在组建中设置一个容器
<template> <div class="box"> <div id="boxMap"></div> </div> </template>
3、设置容器样式
.box{ width: 100%; min-height: 800px; } #boxMap { width: 100%; min-height: 800px; }
4、创建地图实例
export default { data() { return {} }, methods: { _getMapData() { let map = new BMap.Map("firePowerMap"); // 创建Map实例 let point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 12); map.setCurrentCity("北京"); // 地图显示的城市 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 window.map = map;//将map变量储存在全局
//****将map变量存储在全局,只有将地图储存在全局,别的方法才能取到 } }
必须要给容器设置高度!
必须把地图变量储存在全局!