vue中导入百度地图

html部分

<template>

　　<div id="container"></div>

</template>

 

js部分

<script>

let BMap = {};

let map = {}

export default {

　　methods: {

　　　　// 换一种方式导入，src替换

　　　　loadJScript() {

　　　　　　var script = document.createElement('script');

　　　　　　script.type = 'text/javascript';

　　　　　　script.src =

　　　　　　　　　　'https://api.map.baidu.com/getscript?v=3.0&ak=私钥&services=&t=20210528194133'

　　　　　　document.body.appendChild(script);

　　　　　　script.onload = () => {

　　　　　　　　this.init();

　　　　　　}

　　　　　　document.body.appendChild(script)

　　　　},

　　　　init() {

　　　　　　BMap = window.BMap;

　　　　　　console.log(111);

　　　　　　console.log(BMap);

　　　　　　map = new BMap.Map('container'); // 创建Map实例

　　　　　　map.centerAndZoom(new BMap.Point(116.404, 39.928), 15); // 初始化地图,设置中心点坐标和地图级别

　　　　　　map.setCurrentCity('南京');

　　　　　　map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

　　　　},

　　　　addMarker () {

　　　　　　let marker1 = new BMap.Marker(new BMap.Point(116.404, 39.928));

　　　　　　map.addOverlay(marker1);

　　　　}

　　},

　　mounted () {

　　　　this.$nextTick(() => {

　　　　　　this.loadJScript();

　　　　　　setTimeout(() => {

　　　　　　　　this.addMarker();

　　　　　　}, 500)

　　　　})

　　},

}

</script>

css部分,一定要有高度

<style lang="scss" scoped>

#container {

width: 100%;

height: 100vh;

overflow: hidden;

margin: 0;

font-family: '微软雅黑';

}

</style>