vue如何引入百度地图绘制工具

 时间:2026-04-22 18:42:58

1、申请百度地图密钥(此处不做详细介绍)

2、在index.html中添加百度地图JavaScript API接口

<script  type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥" ></script>

3、在webpack.base.conf.js配置文件中配置BMap,在module.exports 中与entry平级;

 externals: {    'BMap': 'BMap'  },

4、在地图组件中import BMap,否则会出现”BMap undefined”;

import BMap from 'BMap'

5、创建地图对象,在mounted生命周期调用

// 创建地图对象,在mounted生命周期调用;

  mounted() {

    this.ready()

  },

  methods: {

    ready: function() {

      var map = new BMap.Map('allmap')

      var point = new BMap.Point(108.840053, 34.129522)

      map.centerAndZoom(point, 14)

      map.addControl(new BMap.MapTypeControl())

      map.enableScrollWheelZoom(true)

      map.enableDoubleClickZoom(true)

      var marker = new BMap.Marker(point)

      map.addOverlay(marker)

      map.centerAndZoom(point, 15)

    }

  }

  • 小米超神-阿尔玛-英雄介绍
  • 王者荣耀恋之微风:小乔攻略
  • 王者荣耀召唤师如何购买英雄?
  • 夫子进阶试炼哪种情况下不能参加排位赛?
  • 鲁班被谁单杀最丢人他不算丢人图四丢脸啊
  • 热门搜索
    什么是中暑 有什么好看的言情小说 孕吐从什么时候开始 70年产权是什么意思 东岳是什么山 红豆杉的养殖方法和注意事项 龌龊什么意思 一边是友情一边是爱情是什么歌 什么是化妆水 私募基金是什么