脚本宝典收集整理的这篇文章主要介绍了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>

脚本宝典总结

以上是脚本宝典为你收集整理的vue2.0地图覆盖物运用一全部内容，希望文章能够帮你解决vue2.0地图覆盖物运用一所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。