申请百度地图ak
首先你得有一个百度账号,如果没有的自己先注册一个,这里就不多说;
如果没有ak,你在应用中调用地图就会出现未授权提示,无法使用地图应用
然后就是申请ak
一、先登录百度地图开放平台,然后在首页右上角找到控制台
二、进入控制台后在控制台看板点击创建应用
,然后根据自己的需求填写,完成后提交就可以在查看应用中看到生成的ak
调用地图
引入地图脚本
在自己在vue项目的index.html文件的head中添加
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己的ak"></script>
// An highlighted block
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己的ak"></script>
<title><%= webpackConfig.name %></title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
使用地图
这里我不多说,直接上代码
<template>
<div id="allmap" class="allmap" />
</template>
<script>
export default {
data() {
return {
map: undefined
}
},
mounted() {
this.initMap()
},
methods: {
initMap() {
// 百度地图API功能
// 创建Map实例
var map = new BMap.Map('allmap', { enableMapClick: false })
this.map = map
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(new BMap.Point(106.55, 29.57), 13)
// 允许滚轮缩放
map.enableScrollWheelZoom(true)
// 禁止拖拽
// map.disableDragging()
// 允许拖拽
// map.enableDragging()
// 获取可视区域
var bs = map.getBounds()
// 可视区域左下角
var bssw = bs.getSouthWest()
// 可视区域右上角
var bsne = bs.getNorthEast()
console.log('当前地图可视范围是:' + bssw.lng + ',' + bssw.lat + '到' + bsne.lng + ',' + bsne.lat)
// 添加平移和缩放按钮
map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL }))
// 添加地图类型(2D图,混合图)
var mapType1 = new BMap.MapTypeControl(
{
mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
anchor: BMAP_ANCHOR_TOP_LEFT
}
)
map.addControl(mapType1)
// 添加定位控件
var geolocationControl = new BMap.GeolocationControl()
geolocationControl.addEventListener('locationSuccess', function(e) {
console.log(e)
// 定位成功事件
var address = ''
address += e.addressComponent.province
address += e.addressComponent.city
address += e.addressComponent.district
address += e.addressComponent.street
address += e.addressComponent.streetNumber
console.log('当前定位地址为:' + address)
})
geolocationControl.addEventListener('locationError', function(e) {
// 定位失败事件
console.log(e.message)
})
map.addControl(geolocationControl)
// 缩放事件(缩放完成后触发) 对应的有 zoomstart 拖拽前触发
map.addEventListener('zoom', function() {
console.log(map.getBounds())
console.log(map.getBounds().getSouthWest())
})
// 拖拽事件(拖拽完成后触发) 对应的有 dragstart 拖拽前触发 dragging 拖拽中触发
map.addEventListener('dragend', function() {
console.log(map.getBounds())
console.log(map.getBounds().getSouthWest())
})
},
zoomend() {
}
}
}
</script>
<style scoped>
html,body,.allmap{
width: 100%;
height: calc(88vh);
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
</style>
提示: 如果代码里面有报错ESLint:'xxx' is not defined.(no-undef)
,有两种解决方式,个人推荐使用第二种方式 ,因为可以集中管理
注:这里只针对当前百度地图,若其它报类似错误,应视情况处理
一、在报错代码的上面一行添加/* global BMAP_NAVIGATION_CONTROL_SMALL */
/* global BMAP_NAVIGATION_CONTROL_SMALL */
map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL }))
二、在项目根目录下面的.eslintrc.js文件的module.exports中配置,具体如下
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
browser: true,
node: true,
es6: true,
},
globals: {
BMap: true,
BMAP_NAVIGATION_CONTROL_SMALL: true,
BMAP_ANCHOR_TOP_RIGHT: true,
BMAP_NORMAL_MAP: true,
BMAP_HYBRID_MAP: true,
BMAP_ANCHOR_TOP_LEFT: true,
BMAP_NAVIGATION_CONTROL_LARGE: true,
BMAP_ANIMATION_BOUNCE: true,
...
},
...
}
我重新写了一篇关于VUE中使用地图的文章
vue使用百度地图