vue2中使用高德地图amap

时间：2023-03-31 16:49:26 vue.js

项目需要加载地图，选择使用高德地图（更易懂，更易用，更稳定）1.首先需要在高德地图官网申请开发者账号，获取key2。在vue2的index.html中加载高德地图js库//高德地图//AMapUI3.在webpack.base.config.js中的externallibrary选项中引入externals:{"AMap":"window.AMap","AMapUI":"window.AMapUI",},4.结果是这样的5.开始你的地图代码

中在mounted()initMapasyncinitMap(){this.map=awaitnewAMap.Map('map_container',{resizeEnable:true})this.map.plugin(["AMap.ToolBar"],()=>{初始化加载//设置状态标记为自定义标记lettoolBar=newAMap.ToolBar();this.map.addControl(toolBar);});//这是在地图上添加的图层AMapUI.loadUI(['misc/PoiPicker'],(PoiPicker)=>{this.poiPicker=newPoiPicker({input:'keyword',//搜索关键字idplaceSearchOptions:{map:this.map,pageSize:5},searchResultsContainer:'searchResults'//搜索结果区})//在地图上添加信息窗口体this.infoWindow=newAMap.InfoWindow({isCustom:true,offset:newAMap.Pixel(0,-20),content:this.$refs.lbsInfoComponent.$el,//窗体内容，使用vue组件})//选择中搜索结果事件this.poiPicker.on('poiPicked',(poiResult)=>{this.poiPicker.hideSearchResults()letsource=poiResult.sourceletpoi=poiResult.itemletinfo={source:source,id:poi.id,name:poi.name,location:poi.location.toString(),address:poi.address}this.infoWindow.setMap(this.map)this.infoWindow.setPosition(poi.location)这个。$refs.lbsInfoComponent.initialize(info,this.lbsDistance)if(source!=='search'){this.poiPicker.searchByKeyword(poi.name)}else{}})})//行政区划查询letopts={subdistrict:1,//返回下一级行政区showbiz:false//最后一级返回街道信息}this.district=newAMap.DistrictSearch(opts)this.district.search('China',(status,result)=>{if(status=='complete'){this.getData(result.districtList[0])//load省}})},getData(data){letbounds=data.boundariesif(bounds){for(letboundofbounds){letpolygon=newAMap.Polygon({map:this.map,strokeWeight:1,strokeColor:'#CC66CC',fillColor:'#CCF3FF',fillOpacity:0.5,path:bound})this.polygons.push(polygon)}this.map.setFitView()//地图自动响应}letlevel=""letcurList=[]if(data.districtList){for(letitemofdata.districtList){level=item.levelcurList.push({name:item.name,center:item.center,adcode:item.adcode,cityCode:item.cityCode,level:item.level})}}if(level==="province"){this.provinces=curList}}elseif(level==="city"){this.cities=curList}elseif(level==="district"){this.districts=curList}elseif(level==="street"){这个。街道=curList}},

上一篇：taro-script0.4发布，基于Tarov3的js解释器组件

下一篇：Vue源码分析-动态组件_2

vue2中使用高德地图amap相关文章