vue3.0 引用百度地图

前端

1.新建baiduMap

  1. export function baiduMap(ak) {
  2.   return new Promise(function(resolve, reject) {
  3.     window.baiduMap = function() {
  4.       resolve()
  5.     }
  6.     var script = document.createElement(‘script’)
  7.     script.type = ‘text/javascript’
  8.     script.src = `http://api.map.baidu.com/api?v=3.0&ak=${ak}&callback=baiduMap`
  9.     script.onerror = reject
  10.     document.head.appendChild(script)
  11.   })
  12. }

2.配置vue.config.js

  1. externals: {
  2.   BMap: ‘BMap’
  3. }

3.实例化

  1. <template>
  2.   <div id=“map”></div>
  3. </template>
  4. <script>
  5. import { baiduMap } from ‘@/tools/baiduMap’
  6. export
  7. default {
  8.   data() {
  9.     return {
  10.       ak: ‘xxxxxx’
  11.     }
  12.   },
  13.   mounted() {
  14.     // 动态引入较大类库避免影响页面展示
  15.     this.$nextTick(() => {
  16.       let _this = this;
  17.       baiduMap(_this.ak).then((mymap) => {
  18.         // 创建地图实例
  19.         let map = new BMap.Map(“map”);
  20.         let point = new BMapGL.Point(119.949506, 29.089524);
  21.         map.centerAndZoom(point, 10); //设置缩放级别  
  22.       });
  23.     };
  24.   }
  25. };
  26. </script>

本文链接地址: vue3.0 引用百度地图

3 Comments

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注