vue2.0地图覆盖物运用一

一.引用vue-amap

    1.npm install vue-amap
    2.import VueAmap from 'vue-amap'
    3.AMap.initAMapApiLoader({
        // 高德的key
        key: 'XXXX',
        // 插件集合
        plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
        uiVersion: '1.0'
    });

二.在script里面引用

    let amapManager=new VueAmap.AMapManager();
    export default(){
         data(){
             return {
                 markers:[],
                 windows:[],
                 amapManager: amapManager,
                 events:{
                     'init':(o)=>{
                     amapManager.setMap(o);
                     amapManager.getMap().setMapStyle('amap://styles/light');
                     }
                 }
             }
         },
         mounted(){
             var that=this;
             //数据库获取数据
             let markers=[];
             let windows=[];
             let lnglats=data.result.lnglats;
             for(let i=0,i<lnglats.length,i++){
                markers.push({
                 position:[lnglats[i].lng,lnglats[i].lat],
                 icon:lnglats[i].icon,
                 events:{
                     click:(e)=>{
                         this.windows.forEach(window=>{
                              window.visible=false
                         })
                         this.$nextTick(()=>{
                              self.windows[i].visible=true;
                              self.window[i].content="我是内容"
                              //可以自定义要弹出窗体的参数
                         })
                     }
                 }
                })
                window.push({
                     visible:false
                })
             }
             this.markers=markers;
             this.windows=windows;
         }
    }

三.在template数据绑定

    <el-amap vid="amap"  :center="center" :map-manager="amapManager" :events="events">
    <el-amap-marker v-for="marker in markers" :position="marker.position" :icon="marker.icon" :events="marker.events" :draggable="marker.draggable" :map-manager="amapManager"></el-amap-marker></el-amap>
    <div v-for="window in windows" v-if="window.visible">{{window.content}}</div>