<template><div class="coordinate"><div class="toolbar"><div>坐标: [ {{lng }} , {{lat }} ]</div><div>地址: {{address }}</div></div><div style="width: 100%;height: 300px;"><div id="coordinateMap" class="coordinateMap" /></div></div></template><script>export default {name: 'MapDialog',props: {},data() {return {overlays: [],lng: '',lat: '',address: '',marker: '',geocoder: null,mouseTool: null}},created() {},mounted() {localStorage.clear()this.MapInit()},methods: {MapInit() {const that = thisthat.map = new AMap.Map('coordinateMap', {center: [113.274041, 23.141222],resizeEnable: true,expandZoomRange: true,zoom: 13,zooms: [3, 21]})that.drawBounds(that.map)// 异步同时加载多个插件AMap.plugin(['AMap.Scale'], function() {that.scale = new AMap.Scale()that.map.addControl(that.scale)})that.mouseTool = new AMap.MouseTool(that.map)// 监听draw事件可获取画好的覆盖物that.mouseTool.on('draw', function(e) {that.overlays.push(e.obj)that.mouseTool.close()})that.geocoder = new AMap.Geocoder({radius: 1000,extensions: 'all'})that.marker = new AMap.Marker()// 点击获取坐标const clickHandler = function(e) {that.lng = e.lnglat.getLng()that.lat = e.lnglat.getLat()const lnglat = [that.lng, that.lat]that.map.add(that.marker)that.marker.setPosition(lnglat)that.getAddress(that.lng, that.lat)}that.map.on('click', clickHandler)},// 获取地址getAddress(lng, lat) {const that = thisthat.geocoder.getAddress([lng, lat], function(status, result) {if (status === 'complete' && result.info === 'OK') {if (result && result.regeocode) {that.address = result.regeocode.formattedAddressthat.$nextTick()}}})},// 限制地图区域drawBounds(map) {const opts = {subdistrict: 0,extensions: 'all',level: 'city'}const district = new AMap.DistrictSearch(opts)district.setLevel('广州市')district.search('广州市', (status, result) => {const outer = [new AMap.LngLat(-360, 90, true),new AMap.LngLat(-360, -90, true),new AMap.LngLat(360, -90, true),new AMap.LngLat(360, 90, true)]const holes = result.districtList[0].boundariesconst pathArray = [outer]pathArray.push.apply(pathArray, holes)const polygon = new AMap.Polygon({pathL: pathArray,strokeColor: '#001826',strokeWeight: 1,strokeOpacity: 0.5,fillColor: '#ffffff',fillOpacity: 1,strokeStyle: 'dashed',strokeDasharray: [10, 2, 10]})polygon.setPath(pathArray)map.add(polygon)})},// 限制地图区域ENDclose() {this.mouseTool.close(true)},}}</script><style lang="scss" scoped>.coordinate {width: 100%;height: 100%;.coordinateMap {width: 100%;height: 100%;}}</style>
