如何在页面中加入百度地图
官方文档:jspopularGL | 百度地图API SDK (baidu.com)
添加一下代码就可以实现
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#container {
height: 100%
}
var map = new BMapGL.Map("container"); // 创建地图实例
var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
在vue中需要这样写
var tableContainer = new Vue({
el: '#app',
mixins: [sharpMixin],
data() {
return {
}
},
mounted() {
this.initMap();
},
created() {
},
methods: {
// 获取数据列表
refreshList() {
},
initMap() {
var map = new BMapGL.Map("container"); // 创建地图实例
var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
},
}
})
在vue中mounted会先一步created执行,所以传值时要注意,map所需要的经纬是否已经实例化,要不然就会出现白屏的情况。