vue+gaodemap 贴图 圈出区域和信息窗体以及点击事件

                // 配置地图的基本显示
                let that = this;
                var layer = new AMap.TileLayer({
                    titleSize: 120,// 瓦片大小
                    // getTileUrl: function (x, y, z) {
                    //     // var z = zeroPad(z, 2, 10);// 缩放级别
                    //     // var x = zeroPad(x, 8, 16);// 瓦片行号
                    //     // var y = zeroPad(y, 8, 16);// 瓦片列号
                    //     // 返回瓦片的地址
                    //     return request({ url: '/alllayers/'+z+'/'+y+'/'+x+'.png', method: 'get', })
                    // },
                    // 贴图地址,
                    getTileUrl: process.env.VUE_APP_API_URL + 'alllayers/[z]/[y]/[x].png',
                    opacity: 1,// 不透明度
                    zooms: [3, 19],//缩放级别范围
                    zIndex: 100//图层层级编号
                });
                that.aMaps = new AMap.Map("allmap", {
                    resizeEnable: true, //是否监控地图容器尺寸变化
                    zoom: 17, //初始化地图层级
                    center: [118.754356, 32.058157], //初始化地图中心点
                    // viewMode: "3D", //使用3D视图
                    pitch: 30,
                    rotation: 0,
                    layers: []
                })
                that.aMaps.add(layer);
                var path = [
                    [118.75482362411499, 32.058020013456634], [118.75483032782151, 32.05790698581647], [118.75483308611686, 32.05790525656928], [118.75483356872623, 32.05793099572495], [118.75488022346612, 32.05793374695465], [118.7548818987655, 32.057899869151846], [118.75488401053711, 32.057893914239465], [118.75488357580187, 32.05788155689824], [118.75494522232627, 32.05788430953156], [118.75494857638765, 32.05784758328872], [118.7550102229234, 32.05785043765766], [118.75501324984477, 32.057791539577394], [118.75501681001066, 32.05776711680604], [118.75501608338898, 32.057704244128196], [118.75500432975046, 32.05770353087845], [118.7550026449942, 32.05765266291341], [118.75496186702249, 32.05764981049832], [118.75496354152718, 32.05760881120242], [118.75496581121709, 32.057601080501726], [118.75496521792779, 32.05758480175433], [118.75496734622229, 32.057579972691144], [118.75496794505037, 32.05757241569859], [118.75496758885576, 32.05733605839865], [118.75489910600952, 32.057332694711576], [118.75489850687171, 32.05733747622937], [118.75481767086315, 32.05733472179941], [118.75480970550315, 32.057332548243195], [118.75479483214082, 32.05733132900382], [118.75474439054368, 32.057330442042634], [118.75474522724542, 32.05730500821732], [118.75474765904335, 32.057295262093646], [118.75474858177226, 32.05727245313473], [118.75478024458008, 32.0572738803978], [118.75478192035628, 32.05724427549085], [118.75482017954927, 32.05724570337152], [118.75482017685866, 32.057221592030615], [118.75482225644706, 32.057216917155905], [118.75482287404166, 32.05720960019757], [118.75482184877492, 32.05715739701434], [118.75478850680777, 32.057155257444755], [118.75479018163036, 32.05711710674609], [118.75479228829373, 32.057109720182645], [118.75479343391814, 32.057091984712265], [118.75479268306204, 32.05696307925981], [118.75468014644552, 32.05695881173622], [118.75465291677124, 32.056956675495904], [118.75464276426338, 32.056954519431855], [118.75463976603136, 32.0569556382429], [118.75463533433253, 32.057008235140714], [118.7545828029607, 32.0570068059238], [118.75457006485064, 32.05700459436599], [118.75454034592046, 32.05700405508711], [118.754537787344, 32.0570280373794], [118.75453699390258, 32.05705909374077], [118.75453397182669, 32.057069050831096], [118.7545336392168, 32.05709022452474], [118.75452032651216, 32.05709022327832], [118.75451864963475, 32.057109959830555], [118.75449118468553, 32.057109957259115], [118.75448335665587, 32.05710807521215], [118.75446707773712, 32.057108530703466], [118.75446707963303, 32.05712552055128], [118.75446475723962, 32.057133269130254], [118.75446540323242, 32.05714952999937], [118.754463080839, 32.057157278578345], [118.75446372683182, 32.057173539447454], [118.75446126582055, 32.05718310325897], [118.75446205216818, 32.057213114444735], [118.75445983504048, 32.057219561135625], [118.7544603753021, 32.05723295273258], [118.75452597986197, 32.057237536977546], [118.75452909789203, 32.057235197350344], [118.7545304189628, 32.05725127170113], [118.7545154271783, 32.057251270297506], [118.75450872237056, 32.05735442958295], [118.75450536421083, 32.05735442926854], [118.75450368765128, 32.05737701441801], [118.75450213481784, 32.05743357927433], [118.75449937227867, 32.057442410218435], [118.75450213875725, 32.05746888153296], [118.75448870611834, 32.057468880275316], [118.75448547562412, 32.05753816192639], [118.75448269229507, 32.05754567641565], [118.75448121731982, 32.05755973762479], [118.75448044610442, 32.05760734167341], [118.75442959381245, 32.0576059126137], [118.75442791031635, 32.057566337302006], [118.75441879531138, 32.0575663364486], [118.75441711954653, 32.057596043091166], [118.75441712648308, 32.05765820355233], [118.754415449617, 32.05767804184018], [118.75441221139155, 32.057678041536995], [118.75440886158746, 32.0577529186357], [118.75440669711537, 32.057758918251174], [118.7544071845511, 32.05777123088931], [118.75437720082316, 32.057769803783444], [118.75437384755648, 32.057813651519375], [118.7543746919781, 32.057857397912706], [118.75440803386577, 32.057858825332985], [118.754409717044, 32.05789555204744], [118.75446464726029, 32.057898405787554], [118.75446585811477, 32.058001565814116], [118.75464120312753, 32.058011450585624], [118.75466950761667, 32.058011453235665], [118.75467664592402, 32.05801453617519], [118.75468426724474, 32.05801549140527], [118.75474027652061, 32.058013119423705], [118.75475072028655, 32.05801414252652], [118.75475777987958, 32.05801715869468], [118.75482362411499, 32.058020013456634]
                ];
                var path2 = [[118.75410464055915, 32.056071403914814], [118.75410462392733, 32.05592236123795], [118.75410714254713, 32.05592236147368], [118.75412788746439, 32.05588909587004], [118.75412752432408, 32.055859185565225], [118.75406719402258, 32.05582906617491], [118.75406191706202, 32.05583038824375], [118.75406047604565, 32.05581421214612], [118.75398887150243, 32.05578032748252], [118.75398196633546, 32.055785437187694], [118.75396734071228, 32.05580252998476], [118.75396047602817, 32.05580673972116], [118.75395469331045, 32.055807894634086], [118.75389951929753, 32.05576984034832], [118.75389753935599, 32.055760645806856], [118.75388800369979, 32.055752747686995], [118.7538794737419, 32.05575604057901], [118.75387301301646, 32.05576261463818], [118.75386537817576, 32.05576015478272], [118.7538409883283, 32.055742569723634], [118.75384302322607, 32.055706860713485], [118.75357351612672, 32.05557437571042], [118.75357243415226, 32.05555138336018], [118.75349548067857, 32.05551247568593], [118.75346244842694, 32.05549765665819], [118.75336663655037, 32.0556375341576], [118.75336581877389, 32.055832561254306], [118.75343346534987, 32.05586522472004], [118.75343707818683, 32.05586358457157], [118.7534424593963, 32.055856047102054], [118.75344542677021, 32.05584709146672], [118.75344665463479, 32.05583399312121], [118.75347826280154, 32.05584956162966], [118.75348779402157, 32.05585129202751], [118.75348911293509, 32.05584803661134], [118.75349295812464, 32.055848577367215], [118.7535096849931, 32.0558539982423], [118.75355496016766, 32.05587774957564], [118.75355820233256, 32.05591305213761], [118.7535723854179, 32.055920734504355], [118.7535799940855, 32.05592375549281], [118.75358782740443, 32.055924754506975], [118.753601977367, 32.05590430697322], [118.75360737436404, 32.05590390053601], [118.75396719697994, 32.056081259401026], [118.75396804085676, 32.0561201224848], [118.75404252418582, 32.05615726295787], [118.75410464055915, 32.056071403914814]];
                var polygon = new AMap.Polygon({
                    path: path,
                    strokeColor: "#fff",
                    strokeWeight: 6,
                    strokeOpacity: 0.2,
                    fillOpacity: 0,
                    fillColor: '#1791fc',
                    zIndex: 50,
                    content: '实验室'
                })
                var polygon2 = new AMap.Polygon({
                    path: path2,
                    strokeColor: "#fff",
                    strokeWeight: 6,
                    strokeOpacity: 0.2,
                    fillOpacity: 0,
                    fillColor: '#1791fc',
                    zIndex: 50,
                    content: '宿舍楼'
                })

                that.aMaps.add(polygon);
                that.aMaps.add(polygon2);
                // 缩放地图到合适的视野级别
                that.aMaps.setFitView([polygon]);
                polygon.on('mouseover', this.showInfoOver);
                polygon.on('mouseout', this.showInfoOut);
                polygon2.on('mouseover', this.showInfoOver);
                polygon2.on('mouseout', this.showInfoOut);
            },
            showInfoOver(e) {
                e.target.setOptions({
                    fillOpacity: 0.4,
                })
                this.createInfoWindow(e.lnglat, e.target.Ce.content);
            },
            showInfoOut(e) {
                e.target.setOptions({
                    fillOpacity: 0,
                })
                // if(this.infoWindow){
                //     this.infoWindow.close()
                // }
            },
            createInfoWindow(location,content) {
                var _this = this
                var MyComponent = Vue.extend({
                    template: '<div style="width: 100px">' +
                        '<div class="title">地址: '+content+'</div>' +
                        '<button class="his-data-btn" id="his-data-btn" v-on:click="getInfo()">查看</button>' +
                        '</div>',
                    data() {
                        return {
                            content:content
                        }
                    },
                    methods: {
                        // 控制折线图的显示， 此处的showHisData() 即为button的click方法
                        getInfo: function () {
                            //isShow在外部的data中定义，此处可拿过来直接使用，不用在Vue.extend中定义
                            console.log(this.content)
                        }
                    },
                })
                // 将新创建的子组件进行挂载
                var component = new MyComponent().$mount();

                // 将窗体内容添加到infoWindow中
                this.infoWindow = new AMap.InfoWindow({
                    content: component.$el,
                    size: 500
                });
                // 打开窗体
                this.infoWindow.open(this.aMaps, location);
            },
            ```
            注释：
                            // 为了信息窗口可以调用方法使用 Vue.extend方式，需要   一开始 import Vue from 'vue';，
                            另外更改一下vue.config.js里的编译方式

configureWebpack: {
name: name,
resolve: {
alias: {
‘@’: resolve(‘src’),
‘vue$’: ‘vue/dist/vue.esm.js’
}
}
},