//b_map.js
export function MP(ak) {
return new Promise(function (resolve, reject) {
window.init = function () {
resolve(BMap);
};
var script = document.createElement("script");
script.type = "text/javascript";
script.src =
"http://api.map.baidu.com/api?v=2.0&ak=" + ak + "&callback=init";
script.onerror = reject;
document.head.appendChild(script);
});
}
<template>
<div>
<div id="map"></div>
</div>
</template>
<script>// @ts-nocheck
import { reactive, toRefs, onMounted, nextTick, getCurrentInstance } from 'vue'
import { MP } from './b_map'
export default {
setup() {
const state = reactive({
count: 0,
})
const updateMap = {
initMap() {
//初始化地图
let map = new BMap.Map("map", { enableMapClick: false });//最好是将map设置到vuex中保存起来
// this.$store.dispatch('mapInit',map);//将map对象放到vuex
//设置地图中心点和显示级别，坐标可以设置为每个城市点位
map.centerAndZoom(new BMap.Point(114.26101136, 30.6195223), 13);
// 设置地图背景色为白色
map.getContainer().style.background = '#fff';
//设置滚轮
map.enableScrollWheelZoom();
map.addControl(new BMap.ScaleControl({//地图比例尺控件
anchor: BMAP_ANCHOR_BOTTOM_LEFT
}));
//-------显示卫星地图----
map.addControl(new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP] }));
}
}
onMounted(() => {
// updateMap.initMap()
nextTick(function () {
MP("WnRsQH38vo7AliTGD2ZwExyqTUYkw246").then(BMap => {
var map = new BMap.Map("map"); // 创建Map实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15);
// 设置地图背景色为白色
map.getContainer().style.background = '#fff';
map.addControl(new BMap.ScaleControl({//地图比例尺控件
anchor: BMAP_ANCHOR_BOTTOM_LEFT
}));
//-------显示卫星地图----
map.addControl(new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP] }));
//设置滚轮
map.enableScrollWheelZoom();
})
})
})
return {
...toRefs(state),
...updateMap
}
}
}
</script>
<style lang="less" scoped>
#map {
width: 100%;
height: 1000px;
}
</style>