Vue：引用百度地图教程
1、首先安装百度地图依赖：npm install vue-baidu-map –save记得在百度地图开放平台申请百度地图密钥（申请链接：http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey）按照网站提示填写应用信息，申请好之后，记住自己的ak码。注意如果在浏览器使用的话，因新系统升级，“服务端AK”不再支...
·
1、首先安装百度地图依赖：
npm install vue-baidu-map –save记得在百度地图开放平台申请百度地图密钥（申请链接：http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey）按照网站提示填写应用信息，
申请好之后，记住自己的ak码。注意如果在浏览器使用的话，因新系统升级，“服务端AK”不再支持浏览器端使用；在浏览器端使用，请选择“浏览器端AK”，例如JavaScript API只支持浏览器类型AK。
对于以前申请的服务端AK，不变更即不受影响，仍支持浏览器端使用；如更新老的服务端AK，再次保存，则按新创建AK处理，不再支持浏览器端使用；
2、在index.html中引入：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script type="text/javascript" src="http://api.map.baidu.com/getscript?
v=2.0&ak=xxxxxxxxxx"></script>
<title>my-project</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
这里的ak是填写上面的ak码哦；
3、在组件中创建一个容器，用来显示百度地图（宽高自己设置）：
<template>
<div id="app">
<div
id="allmap"
ref="allmap"
></div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
methods: {
map () {
let map = new window.BMap.Map(this.$refs.allmap) // 创建Map实例
map.centerAndZoom(new window.BMap.Point(116.404, 39.915), 11) // 初始化地图,设置中心点坐标和地图级别
map.addControl(new window.BMap.MapTypeControl({ // 添加地图类型控件
mapTypes: [
window.BMAP_NORMAL_MAP,
window.BMAP_HYBRID_MAP
]
}))
map.setCurrentCity('北京') // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true)// 开启鼠标滚轮缩放
}
},
mounted () {
this.map()
}
}
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
#allmap {
height: 500px;
overflow: hidden;
}
</style>
注意这里直接用new BMap可能会报错 'BMap' is not defined哦，只需要像这样在前面加上window.即可
这样再到页面上看就能看到地图啦！
前往低代码交流专区
更多推荐
5
0- 0
已为社区贡献15条内容
所有评论(0)