高德地图使用轨迹加坐标拾取加位置信息

<template>
  <div id="ploygon">
    <div
      v-if="isUsePath"
      class="bs-example form-group dispatch-active active"
      esapp-id="vehicle_trajectory_form"
      xmlns="http://www.w3.org/1999/html"
    >
      <div class="input-group">
        <label class="control-label">车牌号</label>
        <div>
          <input
            class="form-control"
            type="text"
            esapp-id="vehicle_trajectory_blno"
            v-model="trunkNumber"
            name="vclN"
            v-on:keyup.enter="queryResult"
          />
        </div>
      </div>
      <div class="input-group boxTimeRadioList">
        <label class="control-label">行驶日期</label>
        <div class="input-container">
          <input
            class="form-control"
            type="text"
            v-on:keyup.enter="queryResult"
            esapp-id="vehicle_trajectory_plan_arrive_date_from_start"
            name="dateStart"
            readonly
          />
          <input
            class="form-control"
            type="text"
            v-on:keyup.enter="queryResult"
            esapp-id="vehicle_trajectory_plan_arrive_time_from_start"
            name="timeStart"
            readonly
          />
          <span>-</span>
          <input
            class="form-control"
            type="text"
            v-on:keyup.enter="queryResult"
            esapp-id="vehicle_trajectory_plan_arrive_date_from_end"
            name="dateEnd"
            readonly
          />
          <input
            class="form-control"
            type="text"
            v-on:keyup.enter="queryResult"
            esapp-id="vehicle_trajectory_plan_arrive_time_from_end"
            name="timeEnd"
            readonly
          />
        </div>
      </div>
      <div class="input-group btn-form">
        <button
          type="button"
          class="btn btn-info btn-sm"
          esapp-id="vehicle_trajectory_search"
          @click="queryData"
        >
          搜索
        </button>
      </div>
    </div>
    <div :id="mapName" :style="{ height: mapHeight + 'px' }"></div>
  </div>
</template>

<script>
// var res = require('./line.json')
export default {
  props: {
    mapName: {
      type: String,
      default: 'map',
    },
    isUsePath: {
      type: Boolean,
      default: true,
    },
    doorAddress: {
      type: String,
      default: '',
    },
    mapHeight: {
      type: Number,
      default: 400,
    },
    // 是否计算停车点
    calParking: {
      type: Boolean,
      default: true,
    },
    // 车牌号
    trunkNumber: {
      type: String,
      default: '',
    },
    // 时间日期
    timeInfo: {
      type: Object,
      default: {
        startDate: '',
        endDate: '',
        startTime: '',
        endTime: '',
      },
    },
    id: {
      type: String,
      default: '',
    },
  },
  watch: {},
  data() {
    return {
      addressInfo: {},
      doorCircle: {},
      lnglatMaker: {},
      doorMarker: {},
      lnglatMaker: {},
      map: undefined,
      path: undefined,
      doorInfoWindow: {},
      cilckDoorInfoWindow: {},
      clickMaker: null,
      trackList: [],
      stopList: [],
      markerStart: undefined,
      markerEnd: undefined,
      trunkNumber: '',
      // 行驶时间控件
      travelDateCtro: '',
      travelTimeStartCtro: '',
      travelTimeEndCtro: '',
      travelDateStart: '',
      travelDateEnd: '',
      travelTimeStart: '',
      travelTimeEnd: '',
      isNull: false,
      timer: null,
    }
  },
  mounted() {},
  destroyed() {
    clearTimeout(this.timer)
  },
  methods: {
    baseData() {
      _.ui.mask()
      if (this.isUsePath) {
        // 初始化时间
        this.$nextTick(() => {
          this.initDatePicker()
          this.travelDateCtro.setValue('')
          this.travelTimeStartCtro.clearValue()
          this.travelTimeEndCtro.clearValue()
          this.travelTimeStart = ''
          this.travelTimeEnd = ''
          this.travelDateCtro.setValue({
            startDate: this.timeInfo.startDate,
            endDate: this.timeInfo.endDate,
          })
          $('[esapp-id=vehicle_trajectory_plan_arrive_time_from_start]').val(
            this.timeInfo.startTime
          )
          $('[esapp-id=vehicle_trajectory_plan_arrive_time_from_end]').val(
            this.timeInfo.endTime
          )
          this.travelTimeStart = this.timeInfo.startTime
          this.travelTimeEnd = this.timeInfo.endTime
        })
      }
      this.init()
      window.initMap_line()
      this.timer = setTimeout(() => {
        this.doorAddressInit()
        if (this.isUsePath) {
          this.queryData()
        }
      }, 500)
    },
    init() {
      let that = this
      this.map = undefined
      var script = document.createElement('script')
      script.type = 'text/javascript'
      script.src =
        '//webapi.amap.com/maps?v=1.4.2&key=47be8e6664c78cfdbc3a8172cbcb1106&callback=initMap_line'
      document.head.appendChild(script)
      // 使用经纬度
      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)
        }
      }
      // 使用该位置与经纬度
      /*  window.sureAddress = (e, lon, lat) => {
        console.log(e, lon, lat)
        this.setCircle(lon, lat, 200)
        this.doorInfoWindow.close()
        this.$emit('freshaddress', {
          add: e.regeocode.formattedAddress,
          lon: lon,
          lat: lat,
        })
      }
      window.sureAddressLonLat = (e, lon, lat, num) => {
        console.log(e, lon, lat)
        this.setCircle(lon, lat, 200)
        this.cilckDoorInfoWindow.close()
        if (num == 0) {
          this.$emit('freshaddress', {
            add: e.regeocode.formattedAddress,
            lon: lon,
            lat: lat,
          })
        } else if (num == 1) {
          this.$emit('freshaddress', {
            add: e.geocodes[0].formattedAddress,
            lon: lon,
            lat: lat,
          })
        }
      } */
      //初始化地图
      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())
            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())
        })
      }
    },
    // 日期控件
    intDateCtro(idStart, idEnd) {
      let ctro = esWidget.esDateToDate({
        startId: idStart,
        endId: idEnd,
        format: 'yyyy-mm-dd',
      })
      return ctro
    },
    // 时间控件
    intTimeCtro(id, key) {
      let that = this
      let ctro = esWidget.esDate({
        id: id,
        dateType: 'time',
        onChange: function (val) {
          that[key] = val
        },
      })
      this.clearTime = ctro
      return ctro
    },
    //初始化时间控件
    initDatePicker() {
      this.travelDateCtro = this.intDateCtro(
        'vehicle_trajectory_plan_arrive_date_from_start',
        'vehicle_trajectory_plan_arrive_date_from_end'
      )
      this.travelTimeStartCtro = this.intTimeCtro(
        'vehicle_trajectory_plan_arrive_time_from_start',
        'travelTimeStart'
      )
      this.travelTimeEndCtro = this.intTimeCtro(
        'vehicle_trajectory_plan_arrive_time_from_end',
        'travelTimeEnd'
      )
    },
    // 重置
    clearValue() {
      this.travelDateCtro.setValue('')
      this.travelTimeStartCtro.clearValue()
      this.travelTimeEndCtro.clearValue()
      this.travelTimeStart = ''
      this.travelTimeEnd = ''
      $('[esapp-id=vehicle_trajectory_blno]').val('')
    },
    // 请求轨迹信息
    queryData() {
      _.ui.mask()
      let that = this
      // 不允许日期为空
      if (!this.travelTimeStart) this.travelTimeStart = '00:00:00'
      if (!this.travelTimeEnd) this.travelTimeEnd = '23:59:59'
      if (!this.travelDateCtro.getValue().dateStart || !this.trunkNumber) {
        _.ui.notify({
          message: '车牌号和开始日期不允许为空',
          type: 'warning',
        })
        this.isNull = true
        _.ui.unmask()
        return
      }
      this.travelDateStart = this.travelDateCtro.getValue().dateStart
      this.travelDateEnd = this.travelDateCtro.getValue().dateEnd
      let sendStartDate = this.travelDateStart.split(' ')[0]
      let sendEndDate = this.travelDateEnd.split(' ')[0]
      let sendStartTime = this.travelTimeStart
        ? ' ' + this.travelTimeStart
        : this.travelTimeStart
      let sendEndTime = this.travelTimeEnd
        ? ' ' + this.travelTimeEnd
        : this.travelTimeEnd

      let hours = Math.floor(
        (new Date(sendEndDate + sendEndTime).getTime() -
          new Date(sendStartDate + sendStartTime).getTime()) /
          1000 /
          60 /
          60
      )
      if (hours >= 24) {
        this.travelDateCtro.setValue('')
        this.travelTimeStartCtro.clearValue()
        this.travelTimeEndCtro.clearValue()
        this.travelTimeStart = ''
        this.travelTimeEnd = ''
        let newStart =
          new Date(sendEndDate + sendEndTime).getTime() - 24 * 60 * 60 * 1000
        sendStartDate = this.timestampToTime(newStart).split(' ')[0]
        sendStartTime = ' ' + this.timestampToTime(newStart).split(' ')[1]
        this.travelDateCtro.setValue({
          startDate: sendStartDate,
          endDate: sendEndDate,
        })
        $('[esapp-id=vehicle_trajectory_plan_arrive_time_from_start]').val(
          sendStartTime
        )
        $('[esapp-id=vehicle_trajectory_plan_arrive_time_from_end]').val(
          sendEndTime
        )
        this.travelTimeStart = sendStartTime
        this.travelTimeEnd = sendEndTime
        // _.ui.notify({
        //   message: '时间段间隔不能超过 24 小时',
        //   type: 'warning',
        // })
        // this.isNull = true
        // _.ui.unmask()
        // return
      }
      let param = {
        qryBtm: sendStartDate + sendStartTime,
        qryEtm: sendEndDate + sendEndTime,
        vclN: this.trunkNumber,
      }
      param.calParking = this.calParking
      param.coords = 'wgs84'
      console.log(param, 'params')
      _.util.ajax_get_factory(
        '/gw/gis-gps-serve/vHistoryTrack',
        param,
        function (res) {
          if (res.success) {
            that.isNull = false
            that.ployLine(res)
          } else {
            that.isNull = true
            _.ui.unmask()
          }
        }
      )
    },
    // 年月日时分秒
    timestampToTime(time) {
      let date = new Date(time)
      var Y = date.getFullYear() + '-'
      var M =
        (date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1) + '-'
      var D =
        (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      var h =
        (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      var m =
        (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) +
        ':'
      var s =
        date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      let strDate = Y + M + D + h + m + s
      return strDate
    },
    // 绘制轨迹
    ployLine(res) {
      let that = this
      if (res.data.track.length !== 0) {
        this.trackList = res.data.track
        // 信息窗
        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, //线条是否带描边，默认false
          outlineColor: '#ffeeff', //线条描边颜色，此项仅在isOutline为true时有效，默认：#000000
          borderWeight: 5, //描边的宽度，默认为1
          strokeColor: '#477694', //线条颜色，使用16进制颜色代码赋值。默认值为#006600
          strokeOpacity: 1, //线条透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
          strokeWeight: 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>'
            /* "<button type='button' class='btn btn-primary btn-close btn-add' οnclick=sureAddress(" +
            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>'
            /*  "<button type='button' class='btn btn-primary btn-close btn-add' οnclick=sureAddress(" +
            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',
        })
      }
      _.ui.unmask()
      this.stopPoint(res)
    },
    // 绘制停车点
    stopPoint(res) {
      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 (res.data.stops.length !== 0) {
        this.stopList = res.data.stops
        this.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'>停留时长: " +
                  that.computedSecond(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>'
                /* "<button type='button' class='btn btn-primary btn-close btn-add' οnclick=sureAddress(" +
                JSON.stringify(result) +
                ',' +
                that.stopList[i].lon +
                ',' +
                that.stopList[i].lat +
                ',' +
                ')>使用此地址与经纬度</button>'+  '</div>'*/
                doorMarker.on('click', clickMarker)
                that.map.add([doorMarker])
              })
            })
          }
        })
      }
    },
    // 门点地址初始化
    doorAddressInit() {
      let that = this
      if (that.clickMaker) {
        that.map.remove(that.clickMaker)
        that.clickMaker.setMap(null)
        that.clickMaker = null
        that.cilckDoorInfoWindow.close()
      }
      AMap.service('AMap.Geocoder', function () {
        let geocoder = new AMap.Geocoder({})
        _.ui.unmask()
        geocoder.getLocation(that.doorAddress, function (status, result) {
          console.log(result, 'result', status)
          if (Object.keys(result).length == 0) {
            _.ui.notify({
              type: 'warning',
              message: '请按照省市区划逐级填写详细地址',
            })
            _.ui.unmask()
            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: '//webapi.amap.com/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 = this
      if (that.clickMaker) {
        that.map.remove(that.clickMaker)
        that.clickMaker.setMap(null)
        that.clickMaker = null
        that.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: '//webapi.amap.com/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, h
      min = 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 = this
      that.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])
      // that.map.setFitView()
      this.map.setZoomAndCenter(15, new AMap.LngLat(lon, lat))
    },
  },
}
</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;
}
</style>```
效果：
![在这里插入图片描述](https://img-blog.csdnimg.cn/1558abacc8764f9da72ddb12f186b16f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA56CB5Yac5bCP5p2D5p2D,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)