Vue CLI 3 使用百度地图

前提说明

Vue CLI 3 创建项目，目录大致如下所示：

 1 ...
 2 ├── [ 512]  public
 3 │   ├── [2.2K]  favicon.ico
 4 │   └── [ 812]  index.html
 5 ├── [ 512]  src
 6 │   ├── [ 709]  App.vue
 7 │   ├── [ 512]  assets
 8 │   ├── [ 512]  components
 9 │   ├── [ 277]  main.js
10 │   ├── [1.2K]  router.js
11 │   └── [ 512]  views
12 ...

在项目根目录手动创建vue.config.js webpack配置文件,现在目录如下所示：

 1 ...
 2 ├── [ 512]  public
 3 │   ├── [2.2K]  favicon.ico
 4 │   └── [ 812]  index.html
 5 ├── [ 512]  src
 6 │   ├── [ 709]  App.vue
 7 │   ├── [ 512]  assets
 8 │   ├── [ 512]  components
 9 │   ├── [ 277]  main.js
10 │   ├── [1.2K]  router.js
11 │   └── [ 512]  views
12 ├── [1.6k]  vue.config.js
13 ...

vue.config.js内容大致如下：

 1 module.exports = {
 2   configureWebpack: {
 3       
 4   }
 5 }
 6 // OR
 7 module.exports = {
 8   configureWebpack: config => {
 9     
10   }
11 }

具体操作

在文件@/public/index.html[1]中引入百度javascript文件，如下：

1 <head>
2     <!-- ... -->
3   <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=您的秘钥"></script>
4 </head>

修改vue.config.js内容，如下：

 1 module.exports = {
 2   configureWebpack: {
 3       externals: {
 4           "BMap": "BMap"
 5       }
 6   }
 7 }
 8 // OR
 9 module.exports = {
10   configureWebpack: config => {
11      config.externals = {
12         "BMap": "BMap"
13      }
14   }
15 }

完成以上操作后，就可以在需要的地方引入BMap模块了，示例如下：

 1 <template>
 2    <div id="map" class="map"></div>
 3 </template>
 4 
 5 
 6 
 7 <script>
 8 
 9     import BMap from 'BMap' 
10 
11     export default {
12         methods: {
13             initMap(){
14                 // 百度地图API功能
15                 var map = new BMap.Map("map");          
16                 let point = new BMap.Point(118.750801, 31.944156);
17 
18                 map.centerAndZoom(point, 15);
19                 map.enableScrollWheelZoom(true);
20                 var marker = new BMap.Marker(point); // 创建标注    
21                 map.addOverlay(marker);  
22             }
23 
24         },
25         mounted(){
26             this.initMap();
27         }
28     }
29 </script>
30 
31 <style lang="scss" scoped>
32     // ...
33 </style>

 

posted @ 2020-07-07 17:23  smile_lg  阅读(2752)  评论(0)  编辑  收藏  举报