地图封装组件

<template><div id="container"></div>
</template>
<script>import AMapLoader from '@amap/amap-jsapi-loader';export default {name: "Mapview",props:{mapinfo:{type:Object,default:function(){return {}}},maptype:{type:String,default:''}},data() {return {map:null,isDraw:false,editpology:null,polyEditor:null,wz:null,loca:null}},watch:{mapinfo(newdata){if(newdata.data != null){console.log(newdata)}}},created() {},mounted() {this.initAMap();console.log(this.mapinfo)},methods: {initAMap() {AMapLoader.load({key: '16e7ac6ee499a277e372a63e39cbdee9',  //设置您的keyversion: "2.0",plugins: ['AMap.ToolBar', 'AMap.Driving',"AMap.MouseTool","AMap.PolygonEditor"," AMap.MapType","AMap.Polygon","AMap.Marker"],AMapUI: {version: "1.1",plugins: [],},Loca: {version: "2.0"},}).then((AMap) => {let _this = this;if(this.maptype){var satelliteLayer = new AMap.TileLayer.Satellite();this.map = new AMap.Map("container", {viewMode: "3D",zoom: 10,/* pitch:60, */skyColor :'#1682a9',layers:[satelliteLayer],zooms: [2, 22],});/* this.map.addControl(new AMap.MapType({defaultType:1 //0代表默认，1代表卫星})); *//* AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {//图层切换控件_this.map.addControl(new BasicControl.LayerSwitcher({position: 'rt'}));}) */}else{this.map = new AMap.Map("container", {zoom: 10,pitch:60,zooms: [2, 22],});AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {//添加一个缩放控件_this.map.addControl(new BasicControl.Zoom({position: 'lt'}));//缩放控件，显示Zoom值_this.map.addControl(new BasicControl.Zoom({position: 'lb',showZoomNum: true}));//图层切换控件_this.map.addControl(new BasicControl.LayerSwitcher({position: 'rt'}));});}this.loca = new Loca.Container({map: this.map});/* this.map.addControl(new AMap.MapType({defaultType:0})) */_this.addClickEvent()_this.map.on('complete', function() {if(_this.$parent.getmapinfo){_this.$parent.getmapinfo()}else{_this.$emit('initmap')let styleName = "amap://styles/fresh";_this.map.setMapStyle(styleName);}})}).catch(e => {console.log(e);})},addClickEvent(){let _this = thisvar clickHandler = function(e) {console.log(e.target)if(this.marker == null){this.marker =  new AMap.Marker({position: [e.lnglat.getLng(),e.lnglat.getLat()]});this.marker.setMap(_this.map);}else{this.marker.setPosition([e.lnglat.getLng(),e.lnglat.getLat()])}_this.wz = [e.lnglat.getLng(),e.lnglat.getLat()]_this.$emit("getmaplocl",[e.lnglat.getLng(),e.lnglat.getLat()])};// 绑定事件this.map.on('click', clickHandler);// 解绑事件//this.map.off('click', clickHandler);},addPolygon(data){data =JSON.parse(data)let polygon = new AMap.Polygon({path: data,/* fillColor: '#ccebc5',strokeOpacity: 1,fillOpacity: 0.5,strokeColor: '#2b8cbe',strokeWeight: 1,strokeStyle: 'dashed',strokeDasharray: [5, 5], */});this.map.add(polygon)polygon.on('click',()=>{alert(1)this.editpology = polygonthis.edit()})this.map.setFitView()},addPolygons(data,name,id){data =JSON.parse(data)let polygon = new AMap.Polygon({path: data,/* fillColor: '#ccebc5',strokeOpacity: 1,fillOpacity: 0.5,strokeColor: '#2b8cbe',strokeWeight: 1,strokeStyle: 'dashed',strokeDasharray: [5, 5], */});polygon.on('click',()=>{this.$emit('clickpoly',id)})var text = new AMap.Text({position: polygon.getBounds().getCenter(),anchor: 'bottom-center',text: name,style: {color:'white','background-color':'rgba(220,38,38,0)','border':'none'},});text.on('click',()=>{this.$emit('clickpoly',id)})text.addTo(this.map)this.map.add(polygon)},addmarks(data,id){let marker =  new AMap.Marker({position: data});marker.on('click',()=>{//alert(id)this.$emit('clickmarker',id)})marker.setMap(this.map);},fitview(){this.map.setFitView()},draw() {this.isDraw = true;this.mouseTool = new AMap.MouseTool(this.map);this.mouseTool.polygon({//fillColor: "#00b0ff",//strokeColor: "#80d8ff"//同Polygon的Option设置});this.mouseTool.on("draw", e => {// 监听画多边形结束console.log("draw");this.overlays = [];console.log(e.obj);console.log(e.obj.getArea())console.log(e.obj.getPath())console.log(e.obj.getOptions())console.log(e.obj)console.log(e.obj.getBounds().getCenter())// console.log(e.obj.getOptions().path)this.$emit("update:mapinfo",{area:e.obj.getArea(),data:e.obj.getOptions().path})var text = new AMap.Text({position: e.obj.getBounds().getCenter(),anchor: 'bottom-center',text: '文本标记',style: {'background-color':'rgba(220,38,38,0)','border':'none'},});text.addTo(this.map)this.overlays.push(e.obj);this.mouseTool.close();this.isDraw = false;});},edit() {//console.log("bianji");//let polygon = this.overlays[0];if(this.editpology == null){return}let polygon =  this.editpology;this.polyEditor = new AMap.PolygonEditor(this.map, polygon);// polyEditor.addAdsorbPolygons(polygon1)this.polyEditor.open();polygon.on("dblclick", () => {console.log("双击");this.polyEditor.close();});this.polyEditor.on("end", event => { // polyEditor  close关闭时执行console.log(event.target.getPath());this.$emit("update:mapinfo",{area:polygon.getArea(),data:polygon.getOptions().path})});},canceledit(){if(this.polyEditor){this.polyEditor.close()}},clearmap(){this.map.clearMap();},animate(){this.loca.animate.start();let speed = 1;let _this = this// 下钻this.loca.viewControl.addAnimates([{pitch: {value: 0,control: [[0, 20], [1, 0]],timing: [0, 0, 0.8, 1],duration: 3000 / speed,},zoom: {value: 15.9,control: [[0, 12.8], [1, 15.9]],timing: [0, 0, 0.8, 1],duration: 3000 / speed,},rotation: {value: -20,control: [[0, 20], [1, -20]],timing: [0, 0, 0.8, 1],duration: 2000 / speed,},}/* ,{pitch: {value: 0,control: [[0, 0], [1, 100]],timing: [0.1, 0, 0.7, 1],duration: 2000 / speed,},rotation: {value: 360,control: [[0, 260], [1, 361]],timing: [0.3, 0, 0.7, 1],duration: 2000 / speed,},zoom: {value: 10.8,control: [[0, 17.5], [1, 13.8]],timing: [0.3, 0, 0.7, 1],duration: 2500 / speed,},} */,{// 环绕pitch: {value: 0,control: [[0, 40], [1, 50]],timing: [0.3, 0, 1, 1],duration: 7000 / speed,},rotation: {value: 360,control: [[0, -80], [1, 260]],timing: [0, 0, 0.7, 1],duration: 7000 / speed,},zoom: {value: 11,control: [[0.3, 16], [1, 17]],timing: [0.3, 0, 0.9, 1],duration: 5000 / speed,},}], function () {});}}}
</script><style scoped>#container {padding: 0px;margin: 0px;width: 100%;height: 100%;position: absolute;}
</style>

在vue页面内引入
import gdmap from ‘组件路径’
父子组件传参
父组件内

<gdmap @getmaplocl="getmaplocal" />methods:{getmaplocal(data){console.log(data)this.form.equipmentLongitude = data.join(',')},
}