在vue项目中使用百度地图api,报错BMapGL is not defined
在vue项目中使用地图api,报错BMapGL is not defined
·
在vue项目中使用地图api,报错BMapGL is not defined。
检查元素时发现只引入了一个内容
成功引入时,检查元素会发现引入了三个内容
错误写法
// 报错写法:在created或beforeCreate中引入地图api。因为引入不成功,所以会报上面的错
beforeCreate() {
this.loadScript()
},
mounted() {
this.init()
},
methods: {
init() {
var mp = new BMapGL.Map('mapBox');
mp.centerAndZoom(new BMapGL.Point(121.491, 31.233), 11);
},
loadScript() {
var script = document.createElement("script");
script.type = 'text/javascript'
script.src = "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥";
document.head.appendChild(script);
}
}
成功写法:
- 在public/index.html的head或body中引入地图api
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>
</head>
<body>
<div id="app"></div>
<!--或 <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥">-->
</body>
</html>
- 在vue中使用
<template>
<div class="content-box">
<div id="mapBox" class="map-box"></div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
mounted() {
this.init()
},
methods: {
init() {
// 在页面dom元素加载完成后,才可以通过BMapGL.Map('mapBox')加载地图
var mp = new BMapGL.Map('mapBox');
mp.centerAndZoom(new BMapGL.Point(121.491, 31.233), 11);
}
}
}
</script>
<style lang="scss" scoped>
.map-box {
width: 800px;
height: 800px;
}
</style>
更多推荐
已为社区贡献3条内容
所有评论(0)