[Vue.JS] Vue中使用百度地图

$ npm install vue-baidu-map --save

<script src="https://unpkg.com/vue-baidu-map"></script>

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥
  ak: 'YOUR_APP_KEY'
})

<template>
        <div class="about">
                <h1>百度地图简单的页面渲染</h1>
                <div id="container"></div>
        </div>
</template>
<style>
        #container {
                width: 800px;
                height: 600px;
        }
</style>
<script>
        export default {
                data(){
                        return {
                                map:null,
                        }
                },
                mounted() {
                        this.initMap();
                        this.map.addEventListener("click",e=>{
                        //这里要使用 window.BMapGL 不然会报错
                                var p = new window.BMapGL.Point(e.latlng.lng,e.latlng.lat);
                                // 创建一个标注
                                var m = new window.BMapGL.Marker(p);
                                // 放入到地图中
                                this.map.addOverlay(m);  
                        })
                },
                methods: {
                        initMap() {
                                // 新建一个百度地图的实例
                                this.map = new window.BMapGL.Map("container");
                                // 创建地图点(地图中心位置)
                                var point = new window.BMapGL.Point(116.404, 39.915);
                                // 设置地图的中心,和缩放级别
                                this.map.centerAndZoom(point, 15);
                                this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
                        }
                }
        }
</script>