效果图
1.在util下建一个map.js
export function mymap(ak) {
return new Promise(function(resolve, reject) {
window.init = function() {
resolve(mymap)
}
var script = document.createElement('script')
script.type = 'text/javascript'
script.src = `http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&mcode=35:81:1C:D3:2A:63:FB:6B:6E:1C:D4:F7:81:DF:A5:1B:89:57:83:91;uni.UNI342DC80&callback=init`
script.onerror = reject
document.head.appendChild(script)
})
}
2.在要显示地图的页面map.vue 引入 import { mymap } from “@/util/map.js”;
<template>
<view class="global">
<view class="header">
<view id="allmap" class="map"></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
mounted() {
},
methods: {
}
}
</script>
<script module="map" lang="renderjs">
import { mymap } from "@/util/map.js";
var bmap = null;
export default {
data() {
return {
ak: '百度密钥'
}
},
mounted() {
// ================百度地图==================
mymap(this.ak).then((mymap) => {
// 创建百度地图实例
bmap = new BMapGL.Map("allmap");
console.log(bmap, 'this.map ')
var point = new BMapGL.Point(120.52679016380534, 31.304840401001357);
bmap.centerAndZoom(point, 10); //设置缩放级别
bmap.setTilt(43);//设置倾斜角度
bmap.setHeading(24.5); //设置地图旋转角度
bmap.enableScrollWheelZoom();
bmap.setMapStyleV2({
styleId: '自定义样式的id' //百度开放平台搜搜个性化地图
});
});
},
methods: {
updateEcharts(newValue, oldValue, ownerInstance, instance) {
// 监听 service 层数据变更
// app端监听数据变化调用方法
},
onClick(event, ownerInstance) {
// 调用 service 层的方法
},
}
}
</script>
<style>
<style lang="scss" scoped>
.map {
width: 100%;
height: 500px;
}
</style>