高德地图上加入坐标拾取 轨迹 点标记 poi搜索等

效果图：

1、点击任何一处显示坐标信息（坐标拾取）

2、显示车辆轨迹与停车点，点击显示信息

3、poi搜索

<template><div id="ploygon"><!-- 地址poi搜索框 --><div style="position: relative"><divclass="map-input"style="position: absolute;top: 20px;left: 20px;z-index: 9999;background: #fff;box-shadow: 3px 3px 3px 0px #c8c8c8;font-size: 12px;"><inputtype="text":id="mapinputId"autocomplete="off"placeholder="请输入地址"style="width: 270px;outline: none;border: none;height: 35px;padding-left: 7px;"/></div><!-- 地图 --><div :id="mapName" :style="{ height: mapHeight + 'px' }"></div></div></div></template><script>export default {props: {/* 当多页面同时打开，如果不用不同ID，会出现渲染问题，地图和搜索框都是*/// 地图idmapName: {type: String,default: 'map',},// 地图搜索框的IDmapinputId: {type: String,default: 'mapinput',},// 是否使用轨迹isUsePath: {type: Boolean,default: true,},// 门点地址（用于反填）doorAddress: {type: String,default: '',},// 地图高度mapHeight: {type: Number,default: 450,},// 轨迹数据 例如:[{adr: null,ext: null,lat: "30.698875",lon: "121.173890",ltm: "-11-29 16:34:31",spd: "0.0",src: "ZHI_YUN"}]pathList: {type: Array,default: [],},// 停车点数据 例如:[{address: null,duration: 60,endTime: "-11-29 16:35:31"，lat: "30.699462",lon: "121.173985",startTime: "-11-29 16:34:31"}]stops: {type: Array,default: [],},},watch: {},data() {return {addressInfo: {},doorCircle: {},lnglatMaker: {},doorMarker: {},map: undefined,path: undefined,doorInfoWindow: {},cilckDoorInfoWindow: {},clickMaker: null,trackList: [],stopList: [],markerStart: undefined,markerEnd: undefined,timer: null,inputData: {},}},mounted() {},destroyed() {clearTimeout(this.timer)},methods: {// 地图初始化baseData() {this.init()window.initMap_line()this.timer = setTimeout(() => {this.doorAddressInit()this.initMapUi()if (this.isUsePath) {this.ployLine()this.stopPoint()}}, 500)},// 地图相关控件、插件init() {let that = thisthis.map = undefinedif (!window.initMap_line) {var script = document.createElement('script')script.type = 'text/javascript'script.src ='///maps?v=1.4.2&key=47be8e6664c78cfdbc3a8172cbcb1106&callback=initMap_line'}// 点击信息窗的使用经纬度window.sureLngLat = (e, lon, lat, num) => {console.log(e, lon, lat)this.setCircle(lon, lat, 200)if (num == 0) {this.doorInfoWindow.close()} else {this.cilckDoorInfoWindow.close()}this.$emit('freshlnglat', {lon: lon, lat: lat, isFirst: false })}// 点击信息窗使用该位置（点击红色停车点、起点终点的使用该位置）window.sureAdd = (e, lon, lat) => {console.log(e, lon, lat)this.setCircle(lon, lat, 200)this.doorInfoWindow.close()this.$emit('freshadd', e.regeocode.formattedAddress)}// 点击信息窗的使用该位置（点击蓝色标记的弹出的信息窗（门点，搜索框，坐标拾取））window.sureAddOnly = (e, lon, lat, num) => {console.log(e, lon, lat)this.setCircle(lon, lat, 200)this.cilckDoorInfoWindow.close()if (num == 0) {this.$emit('freshadd', e.regeocode.formattedAddress)} else if (num == 1) {this.$emit('freshadd', e.geocodes[0].formattedAddress)} else if (num == 2) {this.$emit('freshadd', {name: e.name,address: e.district ? e.district + e.address : e.address,})}}//初始化地图window.initMap_line = function () {that.map = new AMap.Map(that.mapName, {doubleClickZoom: false,resizeEnable: true,center: [116.397428, 39.90923],zoom: 10,})that.map.plugin(['AMap.ToolBar','AMap.Scale','AMap.Driving','AMap.Geocoder','AMap.PlaceSearch','AMap.Marker','AMap.Icon','AMap.Size','AMap.Pixel','AMap.AdvancedInfoWindow',],function () {that.map.addControl(new AMap.ToolBar({position: 'RT' }))that.map.addControl(new AMap.Scale())that.map.addControl(new AMap.Marker())})// 点击地图（坐标拾取）that.map.on('click', (e) => {console.log(e.lnglat.getLng(), e.lnglat.getLat())that.clickPoint(e.lnglat.getLng(), e.lnglat.getLat())})}},// 加载地图poi搜索的ui，不这样加会报错，AMapUI is undefinedinitMapUi() {let that = thisif (typeof AMapUI == 'undefined') {$.getScript('/ui/1.0/main.js?v=1.0.11').done(function (script, text) {if (text == 'success' && typeof AMapUI != 'undefined') {AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker) {var poiPicker = new PoiPicker({input: that.mapinputId, //输入框id})console.log(poiPicker, that.doorAddress)$(`#${that.mapinputId}`).val(that.doorAddress)//监听poi选中信息poiPicker.on('poiPicked', function (poiResult) {//用户选中的poi点信息console.log(poiResult)that.inputData = poiResult.item$(`#${that.mapinputId}`).val(poiResult.item.name)let address = that.inputData.district? that.inputData.district + that.inputData.address: that.inputData.addressthat.inputAddressInit(that.inputData,that.inputData.name,address,that.inputData.location.lng,that.inputData.location.lat)})poiPicker.onCityReady(function () {poiPicker.suggest(that.doorAddress)})})}})} else {AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker) {var poiPicker = new PoiPicker({input: that.mapinputId, //输入框id})console.log(poiPicker, that.doorAddress)$(`#${that.mapinputId}`).val(that.doorAddress)//监听poi选中信息poiPicker.on('poiPicked', function (poiResult) {//用户选中的poi点信息console.log(poiResult)that.inputData = poiResult.item$(`#${that.mapinputId}`).val(poiResult.item.name)let address = that.inputData.district? that.inputData.district + that.inputData.address: that.inputData.addressthat.inputAddressInit(that.inputData,that.inputData.name,address,that.inputData.location.lng,that.inputData.location.lat)})poiPicker.onCityReady(function () {poiPicker.suggest(that.doorAddress)})})}},// 绘制轨迹ployLine() {let that = thisif (that.pathList.length !== 0) {this.trackList = that.pathList// 信息窗this.doorInfoWindow = new AMap.InfoWindow({})function clickMarker(e) {that.doorInfoWindow.setContent(e.target.content)that.doorInfoWindow.open(that.map, e.target.getPosition())}// 轨迹this.path = new AMap.Polyline({path: null,isOutline: false, //线条是否带描边，默认falseoutlineColor: '#ffeeff', //线条描边颜色，此项仅在isOutline为true时有效，默认：#000000borderWeight: 5, //描边的宽度，默认为1strokeColor: '#477694', //线条颜色，使用16进制颜色代码赋值。默认值为#006600strokeOpacity: 1, //线条透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9strokeWeight: 8, //线条宽度，单位：像素// 折线样式还支持 'dashed'strokeStyle: 'solid', //线样式，实线:solid，虚线:dashed// strokeStyle是dashed时有效strokeDasharray: [10, 5], //勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效lineJoin: 'miter', //折线拐点的绘制样式，默认值为'miter'尖角，其他可选值：'round'圆角、'bevel'斜角lineCap: 'round', //折线两端线帽的绘制样式，默认值为'butt'无头，其他可选值：'round'圆头、'square'方头zIndex: 50, //折线覆盖物的叠加顺序。默认叠加顺序，先添加的线在底层，后添加的线在上层。通过该属性可调整叠加顺序，使级别较高的折线覆盖物在上层显示默认zIndex：50、})// 将折线添加至地图实例console.log(this.map, this.map.add)this.map.add(this.path)// 起点this.markerStart = new AMap.Marker({position: null,icon: new AMap.Icon({size: new AMap.Size(30, 31),image: '../images/OpenLayers/begin.png',}),})// 终点this.markerEnd = new AMap.Marker({position: null,icon: new AMap.Icon({size: new AMap.Size(30, 31),image: '../images/OpenLayers/end.png',}),})let trackPath = []this.trackList.forEach((item, index) => {trackPath.push(new AMap.LngLat(item.lon, item.lat))})this.path.setPath(trackPath)this.path.show()let startTrack = new AMap.LngLat(this.trackList[0].lon,this.trackList[0].lat)this.markerStart.setPosition(startTrack)this.markerStart.show()let endTrack = new AMap.LngLat(this.trackList[this.trackList.length - 1].lon,this.trackList[this.trackList.length - 1].lat)this.map.setZoomAndCenter(10, endTrack)this.markerEnd.setPosition(endTrack)this.markerEnd.show()// 起点与终点的信息窗AMap.service('AMap.Geocoder', function () {var geocoder = new AMap.Geocoder({})geocoder.getAddress(startTrack, function (status, result) {that.markerStart.content ="<div style='font-size:14px'>地址: " +result.regeocode.formattedAddress +'</div>' +"<div style='font-size:14px'>经纬度: " +that.trackList[0].lon +',' +that.trackList[0].lat +'</div>' +"<div style='text-align:right;margin-top:10px'>" +"<button type='button' class='btn btn-primary btn-close point-btn btn-add' οnclick=sureLngLat(" +JSON.stringify(result) +',' +that.trackList[0].lon +',' +that.trackList[0].lat +0 +')>使用此经纬度</button>' +"<button type='button' class='btn btn-primary btn-close point-btn btn-add' οnclick=sureadd(" +JSON.stringify(result) +',' +that.trackList[0].lon +',' +that.trackList[0].lat +')>使用此地址文本</button>' +'</div>'that.markerStart.on('click', clickMarker)that.map.add([that.markerStart])})})AMap.service('AMap.Geocoder', function () {var geocoder = new AMap.Geocoder({})geocoder.getAddress(endTrack, function (status, result) {that.markerEnd.content ="<div style='font-size:14px'>地址: " +result.regeocode.formattedAddress +'</div>' +"<div style='font-size:14px'>经纬度: " +that.trackList[that.trackList.length - 1].lon +',' +that.trackList[that.trackList.length - 1].lat +"<div style='text-align:right;margin-top:10px'>" +"<button type='button' class='btn btn-primary btn-close point-btn btn-add' οnclick=sureLngLat(" +JSON.stringify(result) +',' +that.trackList[that.trackList.length - 1].lon +',' +that.trackList[that.trackList.length - 1].lat ++','0 +')>使用此经纬度</button>' +"<button type='button' class='btn btn-primary btn-close point-btn btn-add' οnclick=sureAdd(" +JSON.stringify(result) +',' +that.trackList[that.trackList.length - 1].lon +',' +that.trackList[that.trackList.length - 1].lat +')>使用此地址文本</button>' +'</div>'that.markerEnd.on('click', clickMarker)})that.map.add([that.markerEnd])})} else {_.ui.notify({message: '暂无轨迹信息',type: 'warning',})}this.stopPoint()},// 绘制停车点stopPoint() {let that = this// 停车点的信息窗that.doorInfoWindow = new AMap.InfoWindow({})function clickMarker(e) {that.doorInfoWindow.setContent(e.target.content)that.doorInfoWindow.open(that.map, e.target.getPosition())}if (that.stops.length !== 0) {this.stopList = that.stopsthis.stopList.forEach((e, i) => {// 停车时间大于15分钟if (e.duration >= 900) {AMap.service('AMap.Geocoder', function () {let geocoder = new AMap.Geocoder({})let point = new AMap.LngLat(e.lon, e.lat)geocoder.getAddress(point, function (status, result) {console.log(result)let doorMarker = new AMap.Marker({position: [that.stopList[i].lon, that.stopList[i].lat],icon: new AMap.Icon({size: new AMap.Size(19, 31),image: '../images/OpenLayers/marker_red_point.png',}),})// 停车点信息窗doorMarker.content ="<div style='font-size:14px'>停留时长: " +putedSecond(e.duration) +"<div style='font-size:14px'>地址: " +result.regeocode.formattedAddress +'</div>' +"<div style='font-size:14px'>经纬度: " +that.stopList[i].lon +',' +that.stopList[i].lat +'</div>' +"<div style='text-align:right;margin-top:10px'>" +"<button type='button' class='btn btn-primary btn-close point-btn btn-add' οnclick=sureLngLat(" +JSON.stringify(result) +',' +that.stopList[i].lon +',' +that.stopList[i].lat +',' +0 +')>使用此经纬度</button>' +"<button type='button' class='btn btn-primary btn-close point-btn btn-add' οnclick=sureAdd(" +JSON.stringify(result) +',' +that.stopList[i].lon +',' +that.stopList[i].lat +',' +')>使用此地址文本</button>' +'</div>'doorMarker.on('click', clickMarker)that.map.add([doorMarker])})})}})}},// 当前门点地址doorAddressInit() {let that = thisif (that.clickMaker) {that.map.remove(that.clickMaker)that.clickMaker.setMap(null)that.clickMaker = nullthat.cilckDoorInfoWindow.close()}this.$nextTick(() => {AMap.service('AMap.Geocoder', function () {let geocoder = new AMap.Geocoder({})geocoder.getLocation(that.doorAddress, function (status, result) {console.log(result, 'result', status)if (Object.keys(result).length == 0) {_.ui.notify({type: 'warning',message: '请按照省市区划逐级填写详细地址',})return}if (status == 'complete') {let portPoint = {latitude: result.geocodes[0].location.lat,longitude: result.geocodes[0].location.lng,}// 门点的标记that.clickMaker = new AMap.Marker({position: [portPoint.longitude, portPoint.latitude],icon: new AMap.Icon({size: new AMap.Size(19, 31),image: '///theme/v1.3/markers/n/mark_b.png',}),zIndex: 111,})// 将更改的标记添加到地图上that.map.add([that.clickMaker])// 初始化一个门点信息窗that.cilckDoorInfoWindow = new AMap.InfoWindow({content:"<div style='font-size:14px'>地址: " +result.geocodes[0].formattedAddress +'</div>' +"<div style='font-size:14px'>经纬度: " +portPoint.longitude +',' +portPoint.latitude +'</div>' +"<div style='text-align:right;margin-top:10px'>" +"<button type='button' class='btn btn-primary btn-close point-btn btn-add' οnclick=sureLngLat(" +JSON.stringify(result) +',' +portPoint.longitude +',' +portPoint.latitude +',' +1 +')>使用此经纬度</button>' +"<button type='button' class='btn btn-primary btn-close point-btn btn-add' οnclick=sureAddOnly(" +JSON.stringify(result) +',' +portPoint.longitude +',' +portPoint.latitude +',' +1 +')>使用此地址文本</button>' +'</div>',/* "<button type='button' class='btn btn-primary btn-close btn-add' οnclick=sureAddressLonLat(" +JSON.stringify(result) +',' +portPoint.longitude +',' +portPoint.latitude +',' +1 +')>使用此地址与经纬度</button>'+ '</div>'*/})that.map.setZoomAndCenter(11,new AMap.LngLat(portPoint.longitude, portPoint.latitude))// 初始化的时候打开信息窗that.cilckDoorInfoWindow.open(that.map, [portPoint.longitude,portPoint.latitude,])// 点击标记的时候还能打开信息窗that.clickMaker.on('click', (e) => {that.cilckDoorInfoWindow.open(that.map, [portPoint.longitude,portPoint.latitude,])})that.$emit('freshlnglat', {lon: portPoint.longitude,lat: portPoint.latitude,isFirst: true,})}})})})},// 点击地图获取经纬度与地址clickPoint(lon, lat) {let that = thisif (that.clickMaker) {that.map.remove(that.clickMaker)that.clickMaker.setMap(null)that.clickMaker = nullthat.cilckDoorInfoWindow.close()}AMap.service('AMap.Geocoder', function () {let geocoder = new AMap.Geocoder({})let point = new AMap.LngLat(lon, lat)geocoder.getAddress(point, function (status, result) {console.log(result)let portPoint = {latitude: lat,longitude: lon,}// 点击地图某位置生成的标记that.clickMaker = new AMap.Marker({position: [portPoint.longitude, portPoint.latitude],icon: new AMap.Icon({size: new AMap.Size(19, 31),image: '///theme/v1.3/markers/n/mark_b.png',}),zIndex: 111,})// 将更改的标记添加到地图上that.map.add([that.clickMaker])// 初始化一个点击的标记的信息窗that.cilckDoorInfoWindow = new AMap.InfoWindow({content:"<div style='font-size:14px'>地址: " +result.regeocode.formattedAddress +'</div>' +"<div style='font-size:14px'>经纬度: " +portPoint.longitude +',' +portPoint.latitude +'</div>' +"<div style='text-align:right;margin-top:10px'>" +"<button type='button' class='btn btn-primary btn-close point-btn btn-add' οnclick=sureLngLat(" +JSON.stringify(result) +',' +portPoint.longitude +',' +portPoint.latitude +',' +1 +')>使用此经纬度</button>' +"<button type='button' class='btn btn-primary btn-close point-btn btn-add' οnclick=sureAddOnly(" +JSON.stringify(result) +',' +portPoint.longitude +',' +portPoint.latitude +',' +0 +')>使用此地址文本</button>' +'</div>',/* "<button type='button' class='btn btn-primary btn-close btn-add' οnclick=sureAddressLonLat(" +JSON.stringify(result) +',' +portPoint.longitude +',' +portPoint.latitude +',' +0 +')>使用此地址与经纬度</button>' +'</div>'*/})// 初始化的时候打开信息窗that.cilckDoorInfoWindow.open(that.map, [portPoint.longitude,portPoint.latitude,])// 点击标记的时候还能打开信息窗that.clickMaker.on('click', (e) => {that.cilckDoorInfoWindow.open(that.map, [portPoint.longitude,portPoint.latitude,])})})})},// 停车时间换算computedSecond(secondTime) {let min, second, hmin = parseInt(secondTime / 60) //获取分钟，除以60取整数，得到整数分钟second = parseInt(secondTime % 60) //获取秒数，秒数取佘，得到整数秒数if (min > 60) {//如果分钟大于60，将分钟转换成小时h = parseInt(min / 60) //获取小时，获取分钟除以60，得到整数小时min = parseInt(min % 60) //获取小时后取佘的分，获取分钟除以60取佘的分}return ((h > 0 ? h + '小时' : '') +(min > 0 ? min + '分钟' : '') +(second > 0 ? second + '秒' : ''))},// 点击使用该位置后构造的圆setCircle(lon, lat, radius) {let that = thisthat.map.remove(that.doorCircle)that.map.remove(that.lnglatMaker)that.lnglatMaker = new AMap.Marker({position: [lon, lat],icon: new AMap.Icon({image: '../../images/map-pin.png',offset: new AMap.Pixel(20, 0),imageSize: new AMap.Size(34, 34),}),zIndex: 110,})// 构造矢量圆形that.doorCircle = new AMap.Circle({center: new AMap.LngLat(lon, lat), // 圆心位置radius: radius, //半径strokeColor: '#409eff', //线颜色strokeOpacity: 1, //线透明度strokeWeight: 1, //线粗细度fillColor: '#409eff', //填充颜色fillOpacity: 0.35, //填充透明度zIndex: 100,})that.map.add([that.lnglatMaker, that.doorCircle])this.map.setZoomAndCenter(15, new AMap.LngLat(lon, lat))},// 模糊搜索选中inputAddressInit(obj, name, address, lng, lat) {let that = thisif (that.clickMaker) {that.map.remove(that.clickMaker)that.clickMaker.setMap(null)that.clickMaker = nullthat.cilckDoorInfoWindow.close()}let portPoint = {latitude: lat,longitude: lng,}that.clickMaker = new AMap.Marker({position: [portPoint.longitude, portPoint.latitude],icon: new AMap.Icon({size: new AMap.Size(19, 31),image: '///theme/v1.3/markers/n/mark_b.png',}),zIndex: 111,})// 将更改的标记添加到地图上that.map.add([that.clickMaker])// 初始化一个信息窗that.cilckDoorInfoWindow = new AMap.InfoWindow({content:"<div style='font-size:14px'>名称: " +name +'</div>' +"<div style='font-size:14px'>地址: " +address +'</div>' +"<div style='font-size:14px'>经纬度: " +portPoint.longitude +',' +portPoint.latitude +'</div>' +"<div style='text-align:right;margin-top:10px'>" +"<button type='button' class='btn btn-primary btn-close point-btn btn-add' οnclick=sureLngLat(" +JSON.stringify(obj) +',' +portPoint.longitude +',' +portPoint.latitude +',' +1 +')>使用此经纬度</button>' +"<button type='button' class='btn btn-primary btn-close point-btn btn-add' οnclick=sureAddOnly(" +JSON.stringify(obj) +',' +portPoint.longitude +',' +portPoint.latitude +',' +2 +')>使用此地址文本</button>' +'</div>',/* "<button type='button' class='btn btn-primary btn-close btn-add' οnclick=sureAddressLonLat(" +JSON.stringify(result) +',' +portPoint.longitude +',' +portPoint.latitude +',' +1 +')>使用此地址与经纬度</button>'+ '</div>'*/})that.map.setZoomAndCenter(11,new AMap.LngLat(portPoint.longitude, portPoint.latitude))// 初始化的时候打开信息窗that.cilckDoorInfoWindow.open(that.map, [portPoint.longitude,portPoint.latitude,])// 点击标记的时候还能打开信息窗that.clickMaker.on('click', (e) => {that.cilckDoorInfoWindow.open(that.map, [portPoint.longitude,portPoint.latitude,])})},},}</script><style>#ploygon .baseBox {background-color: #fefefe;border: 1px solid #bfd6e1;border-radius: 5px;color: #444;font: 14px 'Microsoft YaHei', '΢���ź�';margin: 0 auto;width: 300px;top: 10px;z-index: 9000;overflow: hidden;}#ploygon .baseBox .baseBoxTitle {border-bottom: 1px solid #dde0e8;text-align: center;line-height: 30px;}#ploygon .baseBox .baseBoxCenter {border-bottom: 1px solid #dde0e8;padding: 0px 24px 2px 24px;}#ploygon .baseBox .baseBoxCenter p {margin-bottom: 10px;}#ploygon .baseBox .baseBoxButtons {background-color: #f0f4f6;border-top: 1px solid #fff;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;line-height: 20px;overflow: hidden;padding: 5px 24px;}#ploygon .baseBox .baseInput {border: 1px solid #d2d9dc;border-radius: 2px;color: #444;font: 14px;padding: 5px;margin-bottom: 8px;width: 90%;}#ploygon .baseBox .baseInput:focus {border: 1px solid #b7d4ea;box-shadow: 0 0 8px #b7d4ea;}#ploygon .baseBox .baseBtn {background-image: -moz-linear-gradient(to bottom, #b5def2, #85cfee);border: 1px solid #98cce7;border-radius: 20px;box-shadow: inset rgba(255, 255, 255, 0.6) 0 1px 1px,rgba(0, 0, 0, 0.1) 0 1px 1px;color: #111;cursor: pointer;float: right;font: bold 12px 'Microsoft YaHei', '΢���ź�';padding: 5px 14px;}#ploygon .baseBox .baseBtn:hover {background-image: -moz-linear-gradient(to top, #b5def2, #85cfee);}#ploygon .baseBox a.forgetLink {color: #ababab;cursor: pointer;float: right;font: 11px/20px Arial;text-decoration: none;vertical-align: middle;}#ploygon .baseBox a.forgetLink:hover {text-decoration: underline;}#ploygon .baseBox input#remember {vertical-align: middle;}#ploygon .baseBox label[for='remember'] {font: 11px Arial;}#ploygon .baseBox .baseCheckbox {margin-bottom: 8px;}#ploygon .map {width: 100%;position: relative;height: 100%;padding: 0px;}#ploygon #navigation {position: absolute;bottom: 70px;left: 10px;z-index: 1000;}#ploygon #loadingDiv {position: absolute;z-index: 9001;background-color: #bfd6e1;opacity: 0.8;display: none;}#ploygon .ajax-loader {cursor: wait;background: #ffffff;-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';filter: alpha(opacity=75);opacity: 0.75;position: absolute;}#ploygon div.olControlZoom {position: absolute;top: 8px;left: 8px;background: rgba(255, 255, 255, 0.4);border-radius: 4px;padding: 2px;}* {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}#ploygon div.olControlZoom a {display: block;margin: 1px;padding: 0;color: white;font-size: 28px;font-family: sans-serif;font-weight: bold;text-decoration: none;text-align: center;height: 32px;width: 32px;line-height: 28px;text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);background: #130085;/* fallback for IE - IE6 requires background shorthand*/background: rgba(0, 60, 136, 0.5);filter: alpha(opacity=80);}#ploygon a.olControlZoomIn {border-radius: 4px 4px 0 0;}#ploygon a.olControlZoomOut {border-radius: 0 0 4px 4px;}#ploygon div.olControlZoom a:hover {background: #130085;/* fallback for IE */background: rgba(0, 60, 136, 0.7);filter: alpha(opacity=100);}@media only screen and (max-width: 600px) {div.olControlZoom a:hover {background: rgba(0, 60, 136, 0.5);}}#ploygon div.olMapViewport {-ms-touch-action: none;}#ploygon .olLayerGrid .olTileImage {-webkit-transition: opacity 0.2s linear;-moz-transition: opacity 0.2s linear;-o-transition: opacity 0.2s linear;transition: opacity 0.2s linear;}/* Turn on GPU support where available */#ploygon .olTileImage {-webkit-transform: translateZ(0);-moz-transform: translateZ(0);-o-transform: translateZ(0);-ms-transform: translateZ(0);transform: translateZ(0);-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;backface-visibility: hidden;-webkit-perspective: 1000;-moz-perspective: 1000;-ms-perspective: 1000;perspective: 1000;}#ploygon #div_map {display: flex;flex: 1;justify-content: center;align-items: center;font-size: 20px;min-height: 150px;}#ploygon #msgDiv {position: absolute;top: 70px;left: 60px;}#ploygon .input-group.btn-form {float: left;}#ploygon .boxTimeRadioList .input-container .form-control {width: 100px;margin-right: 5px;}#ploygon .boxTimeRadioList .input-container span {float: left;margin: 4px 0 0 -5px;}.point-btn {margin-right: 10px;}.btn-add {padding: 0 !important;font-size: 10px !important;}#ploygon .map-input ::-webkit-input-placeholder {/* WebKit, Blink, Edge */color: #ababab;letter-spacing: 2px;}#ploygon .map-input :-moz-placeholder {/* Mozilla Firefox 4 to 18 */color: #ababab;letter-spacing: 2px;}#ploygon .map-input ::-moz-placeholder {/* Mozilla Firefox 19+ */color: #ababab;letter-spacing: 2px;}#ploygon .map-input :-ms-input-placeholder {/* Internet Explorer 10-11 */color: #ababab;letter-spacing: 2px;}#ploygon .dock-bottom {max-height: 300px !important;top: 35px !important;overflow-y: auto;}</style>

使用的时候，在父组件中通过ref调用baseData()方法。