apply-clients 7.1.35 → 7.1.36-yuchuan-1

package/src/components/product/ApplyMap/ApplyMapLocation.vue

@@ -0,0 +1,850 @@
+<template>
+  <div class="flex main-div">
+    <div class="auto">
+      <div class="row" style="z-index: 1;margin-top: 1px" v-if="isshowsearch">
+        <div class="form-group has-feedback">
+          <input type="search" placeholder="输入关键字选取地点" v-model="searchModel"
+                 autocomplete="off"
+                 id="pickerInput"
+                 class="form-control">
+          <svg t="1628961488010" class="icon form-control-feedback"
+               viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6775" width="48"
+               height="48">
+            <path
+              d="M854.3 887.3c-9.3 0-18.1-3.6-24.8-10.3L628 675.5l-3.5 2.7c-21 16.5-44.1 30.1-68.8 40.6-37.4 15.8-77.1 23.8-118 23.8-40.9 0-80.6-8-118-23.8-36.1-15.3-68.5-37.1-96.3-64.9-27.8-27.8-49.7-60.2-64.9-96.3-15.8-37.4-23.8-77.1-23.8-118s8-80.6 23.8-118c15.3-36.1 37.1-68.5 64.9-96.3 27.8-27.8 60.2-49.7 96.3-64.9 37.4-15.8 77.1-23.8 118-23.8 40.9 0 80.6 8 118 23.8 36.1 15.3 68.5 37.1 96.3 64.9 27.8 27.8 49.7 60.2 64.9 96.3 15.8 37.4 23.8 77.1 23.8 118s-8 80.6-23.8 118c-9.7 23-22.2 44.7-37.2 64.5l-2.6 3.5 202 202c6.6 6.6 10.3 15.4 10.3 24.7 0 9.4-3.6 18.1-10.3 24.7-6.7 6.7-15.5 10.3-24.8 10.3zM437.7 206.7c-62.2 0-120.7 24.2-164.8 68.2-44 44-68.2 102.5-68.2 164.8 0 62.2 24.2 120.7 68.2 164.8 44 44 102.5 68.2 164.8 68.2 62.2 0 120.7-24.2 164.8-68.2 44-44 68.2-102.5 68.2-164.8S646.5 319 602.5 274.9c-44-44-102.5-68.2-164.8-68.2z"
+              p-id="6776" fill="#707070"></path>
+          </svg>
+        </div>
+      </div>
+      <!--搜索联想 结果框-->
+      <!--<div class="row col-sm-12" v-if="isshowsearch" style="z-index: 1;" :style="{display:isShowSearchToTs}">
+        <div id="pickerOut" class="col-sm-12" @click="isShowSearchToTs='none'"></div>
+      </div>-->
+    </div>
+    <div class="table_sy" style="position:relative;">
+      <div :id="dom" class="row" style="flexGrow: 1" tabindex="0">
+        <!--地图绘制区域-->
+      </div>
+    </div>
+    <div class="auto">
+      <div class="row auto" v-if="isshowmapmodel">
+        <radio-group :value.sync="mapmodel">
+          <radio value="dragMarker">地图拖拽</radio>
+          <radio value="dragMap">拖拽选点</radio>
+        </radio-group>
+      </div>
+      <div class="row auto " v-if="mylocationinfo">
+        <table class="table table-bordered table-hover">
+          <tr>
+            <td class="font_normal_body text-nowrap">经纬度&nbsp;</td>
+            <td>经度：{{ myLocation.position.lng }} 纬度：{{ myLocation.position.lat }}</td>
+          </tr>
+          <tr>
+            <td class="font_normal_body text-nowrap">定位类型</td>
+            <td>{{ myLocation.location_type }}</td>
+          </tr>
+          <tr>
+            <td class="font_normal_body text-nowrap">地址信息</td>
+            <td>{{ myLocation.formattedAddress }}</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+const markerDefaultIcon = require('../../../assets/marker-default.png')
+const myico = require('../../../assets/myLocationIcon.png')
+import RadioGroup from 'vue-client/src/vue-strap/src/radioGroup'
+import Radio from 'vue-client/src/vue-strap/src/radioBtn'
+import {getSW, getNE} from 'vue-client/src/components/AMapComponents/AmapUtil.js'
+
+export default {
+  title: '高德地图POI搜索拖拽选址组件，海量点显示组件',
+  components: {
+    RadioGroup,
+    Radio
+  },
+  props: {
+    // 定位成功后将定位到的位置作为地图中心点
+    locationzoomcenter: {
+      type: Boolean,
+      default: true
+    },
+    // 设置当前地图的视图位置 格式 {grade:15,lng:经度,lat:纬度}  grade：取值范围1~15 代表不同等级的缩放比例
+    zoomcenter: {
+      type: Object,
+      default: null
+    },
+    // 是否使用AndroidSDK进行定位 (手机端请设置为true否则会定位失败)
+    usenative: {
+      type: Boolean,
+      default: false
+    },
+    // 定位成功后是否打开当前位置详细信息框
+    locationwindow: {
+      type: Boolean,
+      default: true
+    },
+    // 海量点手机端 松开长按后是否关闭弹出框
+    massivemarkerphonepressclose: {
+      type: Boolean,
+      default: false
+    },
+    // 地图组件ID 命名规则与JavaScript ID一致
+    dom: {
+      type: String,
+      default: ''
+    },
+    // 是否显示搜索框
+    isshowsearch: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示当前位置信息内容(div中)
+    mylocationinfo: {
+      type: Boolean,
+      default: true
+    },
+    // 定位当前位置成功后是否清楚页面的点
+    islocationclearmark: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示选择地图模式
+    isshowmapmodel: {
+      type: Boolean,
+      default: true
+    },
+    // 是否自动获取当前位置信息
+    islocation: {
+      type: Boolean,
+      default: true
+    },
+    // 搜索框的值
+    pickerinput: {
+      type: String,
+      default: ''
+    },
+    // 地图模式  (拖拽模式地图 dragMarker 和 拖拽选点模式 dragMap)
+    mapmodel: {
+      type: String,
+      default: 'dragMarker'
+    },
+    // 自定义结果回显的id
+    searchpoiresult: {
+      type: String,
+      default: ''
+    },
+    // 传递来的海量点集 （点集模式 会自动将 地图模式为设置为 拖拽地图模式dragMarker）
+    /**
+     *
+     *[
+     * {
+     *  "lnglat": [116.258446, 37.686622],  (点位置)
+     *  "content": "显示的内容可以是html标签",  （显示的内容）
+     *  "item": {  任意值（点击点后携带出去）
+     *  "name": "用户名",
+     *  "userinfoid": "用户id",
+     *   }
+     * }
+     *]
+     */
+    /* inputmarksarray: {
+      type: Array,
+      default: []
+    }, */
+    inputmarksarray: {
+      type: Array,
+      default: () => []
+    },
+    // 海量点显示样式
+    markstyle: {
+      type: Array,
+      default: () => [{
+        url: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', // 图标URL
+        // eslint-disable-next-line no-undef
+        anchor: new AMap.Pixel(6, 6),  // 图标偏移位置
+        // eslint-disable-next-line no-undef
+        size: new AMap.Size(20, 30)  // 图标大小
+      }]
+    },
+    // {
+    //   data: {data:'随意内容1',label:'label标题',content:'鼠标放上去显示的内容信息框'}, // 必填
+    //   position:[233.111,39.333], //经纬度 必填
+    // --------------------------------------------以下信息是非必填的选填--------------------------------------------------------
+    //   ismoseOpen:true,//是否通过鼠标滑过打开信息框 true ,false
+    //   isclearmarker:false,//是否重新渲染新点时就清除页面所有点 true false  也可以手动去调用 this.map.clearMap(); 该方法属于map地图对象
+    //   ismobiletouchendclear:true 手机端长按点后是否松开后关闭弹出的信息框 （ismoseOpen为true并且ismobiletouchendclear为true移动端才会在松开后关闭信息框，当你不想在松开后关闭信息框时请将ismobiletouchendclear设置为false）
+    //   islabel:true, //是否渲染label标注(标注与信息框不同，信息框全局只有唯一一个)
+    //   //icon:'' //点位置处显示的图标  可以是url
+    // }
+    // 渲染带label的简单点集（多点勿用-多点请使用海量点）
+    labelmarksarray: {
+      type: Array,
+      default: () => []
+    }
+
+  },
+  data () {
+    return {
+      map: null, // 显示地图实例
+      searchModel: this.pickerinput, // 输入框搜索的值
+      myLocation: {
+        position: { // 经纬度信息
+          lng: 0, // 经度
+          lat: 0  // 纬度
+        },
+        location_type: '', // 定位类型
+        formattedAddress: '' // 地址信息
+      },
+      isShowSearchToTs: 'none', // 是否显示搜索联想
+      toolbar: null,
+      positionPickerDrag: null, // 拖拽选址poi对象
+      markerList: [], // 点标记集合
+      myMarker: null, // 当前位置的标记点
+      massMarks: null, // 海量点对象
+      poiPicker: null // POI搜索对象
+    }
+  },
+  methods: {
+    // 初始化地图相关
+    initAmap () {
+      var thas = this
+      // 初始化地图组件
+      // eslint-disable-next-line no-undef
+      this.map = new AMap.Map(thas.dom, {
+        zoom: 12,
+        resizeEnable: true, // 如果center属性缺省，地图默认定位到用户所在城市的中心
+        viewMode: '2D',  // 设置地图模式
+        lang: 'zh_cn',  // 设置地图语言类型
+        zindex: 99999
+      })
+      // eslint-disable-next-line no-undef
+      AMap.event.addListener(this.map, 'complete', this.mapInitSuccess())
+      window.map = this.map
+      // 异步加载地图插件
+      // eslint-disable-next-line no-undef
+      AMap.plugin(
+        ['AMap.ToolBar', 'AMap.Driving', 'AMap.Geolocation', 'AMap.PlaceSearch'], () => {
+          // 异步加载插件
+          if (thas.islocation) {
+            // 自动定位插件
+            var geolocation = new AMap.Geolocation({
+              // 是否使用高精度定位，默认：true
+              enableHighAccuracy: true,
+              // 控制按钮的显示
+              showbutton: true,
+              // 设置定位超时时间，默认：无穷大 1000
+              timeout: 1000,
+              // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
+              // eslint-disable-next-line no-undef
+              buttonOffset: new AMap.Pixel(20, 30),
+              zoomToAccuracy: false,  // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
+              buttonPosition: 'RB',  //  定位按钮的排放位置,  RB表示右下
+              showMarker: false,        // 定位成功后在定位到的位置显示点标记，默认：true
+              showCircle: true,        // 定位成功后用圆圈表示定位精度范围，默认：true
+              panToLocation: false,     // 定位成功后将定位到的位置作为地图中心点，默认：true
+              /* markerOptions:{//自定义定位点样式，同Marker的Options
+                'offset': new AMap.Pixel(-10, -15),
+                'content':'<img src="'+myico+'"/>'
+              },*/
+              useNative: thas.usenative // 是否使用安卓定位sdk用来进行定位，默认：false
+            })
+            thas.map.addControl(geolocation)
+            geolocation.getCurrentPosition()
+            AMap.event.addListener(geolocation, 'complete', thas.onComplete)
+            AMap.event.addListener(geolocation, 'error', thas.onError)
+          }
+        })
+    },
+    mapInitSuccess () {
+      // 地图加载成功回调
+      console.log('地图加载成功回调')
+      this.$emit('initamapsuc')
+    },
+    // 定位成功回调
+    onComplete (res) {
+      let thas = this
+      if (thas.positionPickerDrag == null) {
+        thas.poiPickerDropReady()
+        thas.positionPickerDrag.setMode(thas.mapmodel) // 设置地图模式到拖拽选址组件
+      } else {
+        thas.positionPickerDrag.setMode(thas.mapmodel) // 设置地图模式到拖拽选址组件
+      }
+      // eslint-disable-next-line quotes
+      console.log(`定位成功` + JSON.stringify(res))
+      let content = ''
+      // eslint-disable-next-line quotes
+      content += `<div style="padding:0px 0px 0px 4px"><b>我的位置</b></div>`
+      content += `地址：${res.formattedAddress}`
+      thas.showMarkInfoWindow(content, res.position)  // 显示窗口信息
+      // 是否回到当前位置
+      if (this.locationzoomcenter) {
+        console.log('定位成功，将地图中心点设置为当前位置')
+        thas.setZommAndCenterView(15, res.position.lng, res.position.lat)
+      }
+      if (this.islocationclearmark) {
+        console.log('回到当前位置，清理当前地图所有覆盖物')
+        thas.map.clearMap()  // 清除地图覆盖物
+      }
+      if (thas.myMarker) {
+        thas.map.remove(thas.myMarker)
+        thas.myMarker = null
+      }
+      // 为当前位置添加标记
+      // eslint-disable-next-line no-undef
+      var marker = new AMap.Marker({
+        position: res.position,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+        // eslint-disable-next-line no-undef
+        offset: new AMap.Pixel(-15, -35),
+        icon: myico // 添加 Icon 图标 URL
+      })
+
+      thas.map.add(marker)
+      // 设置点标记的动画效果，此处为弹跳效果
+      // marker.setAnimation('AMAP_ANIMATION_BOUNCE');
+      this.myMarker = marker
+      // 对marker绑定点击时事件
+      // eslint-disable-next-line no-undef
+      AMap.event.addListener(marker, 'click', mkOnclick)
+
+      function mkOnclick (result) {
+        console.log('事件触发')
+        thas.showMarkInfoWindow(content, res.position)
+      }
+
+      // 回写当前位置数据
+      thas.myLocation = {
+        position: { // 经纬度信息
+          lng: res.position.lng, // 经度
+          lat: res.position.lat  // 纬度
+        },
+        location_type: res.location_type, // 定位类型
+        formattedAddress: res.formattedAddress, // 地址信息
+        city: res.addressComponent // 城市信息
+      }
+
+      // 定位成功
+      thas.$emit('locationsuccess', thas.myLocation)
+    },
+    // 定位失败回调
+    onError (res) {
+      // eslint-disable-next-line quotes
+      console.log(`定位失败` + JSON.stringify(res))
+      AMap.plugin('AMap.CitySearch', function () {
+        var citySearch = new AMap.CitySearch()
+        citySearch.getLocalCity(function (status, result) {
+          if (status === 'complete' && result.info === 'OK') {
+            // 查询成功，result即为当前所在城市信息
+            console.log(result)
+            AMap.plugin('AMap.Geocoder', function () {
+              var geocoder = new AMap.Geocoder({
+                // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
+                city: result.adcode
+              })
+              var lnglat = result.rectangle.split(';')[0].split(',')
+              geocoder.getAddress(lnglat, function (status, data) {
+                if (status === 'complete' && data.info === 'OK') {
+                  // result为对应的地理位置详细信息
+                  console.log(data)
+                }
+              })
+            })
+          }
+        })
+      })
+      // this.$showMessage("定位失败，请检查权限信息后重试")
+    },
+    // 初始化poi搜索
+    poiPickerReady () {
+      console.log('===========开始判断设备类型=')
+      var _than = this
+      // eslint-disable-next-line no-undef
+      AMapUI.loadUI(['misc/PoiPicker'], (PoiPicker) => {
+        _than.poiPicker = new PoiPicker({
+          // city:'北京',
+          input: 'pickerInput'
+          // suggestContainer: 'pickerOut'  // 结果展示的id
+        })
+        if (!_than.poiPicker) {
+          _than.poiPickerReady()
+        }
+        // eslint-disable-next-line no-undef
+        let marker = new AMap.Marker() // 点标记
+        // 选取了某个POI
+        _than.poiPicker.on('poiPicked', (poiResult) => {
+          var source = poiResult.source,
+            poi = poiResult.item
+          console.log('当前poi定位信息' + JSON.stringify(poiResult))
+          _than.myLocation = {
+            position: { // 经纬度信息
+              lng: poi.location.lng, // 经度
+              lat: poi.location.lat  // 纬度
+            },
+            location_type: 'poi', // 定位类型
+            formattedAddress: `${poi.district !== undefined ? poi.district : ""}${poi.address !== undefined ? poi.address : ""}${poi.name !== undefined ? poi.name : ""}`
+          }
+          console.log("当前poi定位信息", poi)
+          _than.map.clearMap(); //清楚地图上所有的marks （清楚点标记）
+          marker.setMap(_than.map); //设置点标记的地图对象
+          marker.setPosition(poi.location);
+          _than.searchModel = ""  // 将poi返回的地址赋值给搜索地址栏
+          _than.map.setCenter(poi.location);
+        });
+        window.poiPicker = _than.poiPicker;
+        /*poiPicker.onCityReady(() => {
+          poiPicker.suggest('小区');
+        });*/
+      });
+
+    },
+    // PC端中可用  地图中鼠标右键
+    contextRightKeyMenu() {
+      //创建右键菜单
+      var contextMenu = new AMap.ContextMenu();
+      //右键放大
+      contextMenu.addItem("放大一级", () => {
+        this.map.zoomIn();
+      }, 0);
+      //右键缩小
+      contextMenu.addItem("缩小一级", () => {
+        this.map.zoomOut();
+      }, 1);
+      //右键显示全国范围
+      contextMenu.addItem("缩放至全国范围", (e) => {
+        this.map.setZoomAndCenter(4, [108.946609, 34.262324]);
+      }, 2);
+      //右键添加Marker标记
+      contextMenu.addItem("添加标记", (e) => {
+        var marker = new AMap.Marker({
+          map: this.map,
+          position: contextMenu.contextMenuPositon || this.map.getCenter()
+        });
+        this.markerList.push(marker)
+      }, 3);
+      //地图绑定鼠标右击事件——弹出右键菜单
+      this.map.on('rightclick', (e) => {
+        contextMenu.contextMenuPositon = e.lnglat; //右键菜单位置
+        contextMenu.open(this.map, e.lnglat);
+      });
+    },
+    // 拖拽选址
+    poiPickerDropReady() {
+      let _than = this;
+      //加载PositionPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
+      AMapUI.loadUI(['misc/PositionPicker'], (PositionPicker) => {
+        _than.positionPickerDrag = new PositionPicker({
+          mode: _than.mapmodel,//设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMarker'
+          map: _than.map//依赖地图对象
+        });
+        _than.positionPickerDrag.on('success', (positionResult) => {
+          _than.dragMapSuccessSuces(positionResult)
+        });
+        _than.positionPickerDrag.on('fail', (positionResult) => {
+          _than.dragMapSuccessFul(positionResult)
+        });
+        // 地图模式  (拖拽模式地图 dragMarker 和 拖拽选点模式 dragMap)
+        if (_than.mapmodel === 'dragMap') {
+          _than.openDragMap() //开启拖拽选点
+        } else {
+          _than.closeDragMap() // 关闭拖拽选点
+        }
+      });
+    },
+    // 拖拽选址成功事件
+    dragMapSuccessSuces(res) {
+      // console.log("==拖拽选址==" + JSON.stringify(res))
+      // 回写当前位置数据
+      this.myLocation = {
+        position: { //经纬度信息
+          lng: res.position.lng, //经度
+          lat: res.position.lat  //纬度
+        },
+        location_type: "拖拽选点", //定位类型
+        formattedAddress: res.address, //地址信息
+        positionResult: res
+      }
+      this.$emit("dragsuccess", this.myLocation)
+    },
+    // 拖拽选址失败事件
+    dragMapSuccessFul(res) {
+      console.log("飞天了！");
+      this.myLocation = {
+        position: { //经纬度信息
+          lng: 0, //经度
+          lat: 0  //纬度
+        },
+        location_type: '', //定位类型
+        formattedAddress: '' //地址信息
+      }
+      this.$emit("dragerror", this.myLocation)
+    },
+    // 关闭拖拽选址
+    closeDragMap() {
+      console.log("关闭拖拽选址")
+      this.positionPickerDrag.stop()
+    },
+    // 打开拖拽选址
+    openDragMap() {
+      console.log("打开拖拽选址")
+      this.positionPickerDrag.start()
+    },
+    /**
+     * 简单信息框窗体
+     * @param _content 显示的内容 可以为html 页面
+     * @param _position 点位置信息 AMap.LngLat(lng:Number,lat:Number)
+     * @param _offset 位置偏移  格式 new AMap.Pixel(0, -20)
+     */
+    showMarkInfoWindow(_content, _position, _offset = new AMap.Pixel(1, -45)) {
+      // 信息窗体的内容
+      // 创建 infoWindow 实例
+      var infoWindow = new AMap.InfoWindow({
+        content: _content,
+        offset: _offset
+      });
+      if (this.locationwindow) {
+        // 打开信息窗体
+        infoWindow.open(this.map, _position);
+      }
+    },
+    /**
+     * 关闭信息窗体
+     */
+    closeInfoWindow() {
+      this.map.clearInfoWindow();
+    },
+    /**
+     * 自定义点标记  在那个地图 什么图片 在哪标记
+     * @param _img 点标记图片
+     * @param _position 点标记位置
+     */
+    showMarkerSpot(_img = markerDefaultIcon, _position) {
+      var marker = new AMap.Marker({
+        position: _position,
+        icon: _img,
+        offset: new AMap.Pixel(-13, -30)
+      });
+
+      this.markerList.push(marker)
+      marker.setMap(this.map);
+    },
+
+    /**
+     *自定义点标记与简单信息框和标注
+     * @param _data 传入内容  {"data":"随意内容","label":"标注显示的值可以为html标签","content":"信息框显示的内容可以为html标签"}
+     * @param _position 点标记位置 格式 [经度,纬度]
+     * @param _ismoseOpen 是否通过鼠标滑过打开信息框 true false
+     * @param _isclearmarker 是否重新渲染新点时就清除页面所有点 true false  也可以手动去调用 this.map.clearMap(); 该方法属于map地图对象
+     * @param _ismobiletouchendclear 手机端长按点后是否松开后关闭弹出的信息框 （_ismoseOpen为true并且_ismobiletouchendclear为true移动端才会在松开后关闭信息框，当你不想在松开后关闭信息框时请将_ismobiletouchendclear设置为false）
+     * @param _islabel 是否渲染label 标注(标注与信息框不同，信息框全局只有唯一一个)
+     * @param _icon 点位置处显示的图标  可以是url，也可以使用require 引入图片
+     * @param _contextOffset 信息框内容位置偏移  格式 new AMap.Pixel(0, -20)
+     * @param _laberOffset lable 内容偏移 格式 new AMap.Pixel(0, -20)
+     */
+    showWindowInfoAndSpot
+      (_data, _position, _ismoseOpen = true, _isclearmarker = true, _ismobiletouchendclear = true,
+       _islabel = true,
+       _icon = markerDefaultIcon,
+       _contextOffset = new AMap.Pixel(0, -30),
+       _laberOffset = new AMap.Pixel(-5, -3)) {
+      if (_isclearmarker) {
+        this.map.clearMap();
+      }
+      var marker = new AMap.Marker({
+        position: _position,
+        icon: _icon,
+        map: this.map
+      });
+      if (_islabel) {
+        marker.setLabel({
+          content: '<div class="tooltips-amp-diy">' + _data.label + '</div>', //设置文本标注内容
+          direction: 'top', //设置文本标注方位
+          offset: _laberOffset,  //设置文本标注偏移量
+        });
+      }
+      this.markerList.push(marker)
+      var infoWindow = new AMap.InfoWindow({
+        offset: _contextOffset
+      });
+      if (!/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
+        // 鼠标移动到点触发
+        AMap.event.addListener(marker, 'mouseover', (row) => {
+          // 打开信息窗体
+          if (_ismoseOpen) {
+            infoWindow.setContent(_data.content)
+            infoWindow.open(this.map, _position);
+          }
+          console.log("触发鼠标选中事件" + _data.data)
+          this.$emit("diyspotmouseover", _data.data)
+        })
+        // 鼠标离开改点触发
+        AMap.event.addListener(marker, 'mouseout', (row) => {
+          // 关闭信息窗体
+          if (_ismoseOpen) {
+            infoWindow.close();
+          }
+          console.log("触发鼠标离开事件" + _data.data)
+          this.$emit("diyspotmouseout", _data.data)
+        })
+
+      } else {
+        // 触摸开始时触发事件，仅适用移动设备
+        AMap.event.addListener(marker, 'touchstart', (row) => {
+          // 打开信息窗体
+          if (_ismoseOpen) {
+            infoWindow.setContent(_data.content)
+            infoWindow.open(this.map, _position);
+          }
+          console.log("触摸开始时触发事件" + _data.data)
+          this.$emit("diyspottouchstart", _data.data)
+        })
+        // 触摸结束触发
+        AMap.event.addListener(marker, 'touchend', (row) => {
+
+          // 关闭信息窗体  （移动端长按时间离开后触发）
+          if (_ismoseOpen) {
+            if (_ismobiletouchendclear) {
+              infoWindow.close();
+            }
+          } else
+            console.log("触摸结束时触发事件，" + _data.data)
+          this.$emit("diyspottouchover", _data.data)
+        })
+      }
+      // 鼠标点击触发
+      AMap.event.addListener(marker, 'click', (row) => {
+        this.$emit("diyspotmouseclick", _data.data)
+      })
+      this.map.setFitView();
+    },
+
+    /**
+     * 将海量点集显示在地图上，海量点设计使用在PC端，如要显示少量点，请使用showMarkInfoWindow
+     */
+    showMarkerList() {
+      this.clearMarkerList()
+      this.map.clearMap(); //清楚地图上所有的marks （清楚点标记）
+      this.massMarks = new AMap.MassMarks(this.inputmarksarray, {
+        opacity: 0.8, // 图层的透明度，取值范围[0,1]，1代表完全不透明，0代表完全透明
+        zIndex: 111, //图层叠加的顺序值，0表示最底层。默认zIndex：5
+        cursor: 'pointer', //指定鼠标悬停时的鼠标样式，自定义cursor，IE仅支持cur/ani/ico格式，Opera不支持自定义cursor
+        style: this.markstyle
+      });
+
+      // 信息窗体的内容
+      // 创建 infoWindow 实例
+      var infoWindow = new AMap.InfoWindow({
+        content: "   ",
+        offset: new AMap.Pixel(1, -20)
+      });
+      if (!/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
+        // 鼠标移动上去的事件
+        this.massMarks.on('mouseover', (e) => {
+          console.log("鼠标移动上去" + JSON.stringify(e.data.lnglat))
+          infoWindow.setContent(e.data.content)
+          infoWindow.open(this.map, e.data.lnglat);
+          this.$emit('inputmarkarraymouseover', e.data) //海量点鼠标入
+        });
+        // 鼠标移出
+        this.massMarks.on('mouseout', (e) => {
+          console.log("鼠标离开" + JSON.stringify(e.data.lnglat))
+          infoWindow.close()
+          this.$emit('inputmarkarraymouseout', e.data) //海量点鼠标出
+        });
+      } else {
+        // 触摸开始时触发事件,仅适用移动设备,
+        this.massMarks.on('touchstart', (e) => {
+          console.log("触摸开始时触发事件" + JSON.stringify(e.data.lnglat))
+          infoWindow.setContent(e.data.content)
+          infoWindow.open(this.map, e.data.lnglat);
+          this.$emit('inputmarkarraytouchstart', e.data) //海量点触摸
+        });
+        // 触摸结束时触发事件,仅适用移动设备,
+        this.massMarks.on('touchend', (e) => {
+          console.log("触摸结束时触发事件" + JSON.stringify(e.data.lnglat))
+          if (this.simplemarkerphonepressclose) {
+            infoWindow.close()
+          }
+          this.$emit('inputmarkarraytouchend', e.data) //海量点结束触摸
+        });
+      }
+      /**
+       * 海量点的点击事件 当渲染出海量点后点击某个点触发此方法 回调
+       */
+      this.massMarks.on("click", (e) => {
+        console.log("当前点的信息" + JSON.stringify(e.data))
+        this.$emit("rowmarkerclick", e.data)
+      });
+
+      this.massMarks.setMap(this.map);
+      const sw = getSW(this.inputmarksarray) // 循环所有的点标记，返回最西南的一个经纬度
+      const ne = getNE(this.inputmarksarray) // 循环所有的点标记，返回最东北的一个经纬度
+      console.log('GET BOUNDS', sw, ne) // [xxx,xxx], [xxx,xxx]
+      let mybounds = new AMap.Bounds(sw, ne)
+      this.map.setBounds(mybounds)
+    },
+    /**
+     * 清楚海量点
+     */
+    clearMarkerList() {
+      if (this.massMarks != null) {
+        this.massMarks.clear()
+      } else {
+        console.log("当前未初始化海量点")
+      }
+    },
+    /***
+     * 渲染多个点标记与简单信息卡和标注
+     */
+    showLabelMarksArray() {
+      if (this.labelmarksarray) {
+        let _date_ = {}
+        for (let labelitem of this.labelmarksarray) {
+          let labelconfig = ["data", "position", "ismoseOpen", "isclearmarker", "ismobiletouchendclear", "islabel", "icon"]
+          for (let labelconfigKey of labelconfig) {
+            if (labelitem.hasOwnProperty(labelconfigKey)) {
+              _date_[labelconfigKey] = labelitem[labelconfigKey]
+            }
+          }
+          this.showWindowInfoAndSpot(_date_.data, _date_.position, _date_.ismoseOpen, _date_.isclearmarker, _date_.ismobiletouchendclear, _date_.islabel, _date_.icon)
+        }
+      }
+    },
+    /**
+     * 让地图中心位置视图转移 显示在某个经纬度
+     *_grade:等级1~15  缩放等级 全国~街道
+     */
+    setZommAndCenterView(_grade, _lng, _lat) {
+      this.map.setZoomAndCenter(_grade, [_lng, _lat])
+      this.map.getCenter();
+    },
+
+  },
+  watch: {
+    // 当传入的中心地图位置变化
+
+    zoomcenter: {
+      handler: function (newV, oldV) {
+        if (newV) {
+          this.$nextTick(() => {
+            this.setZommAndCenterView(this.zoomcenter.grade, this.zoomcenter.lng, this.zoomcenter.lat)
+          })
+        }
+      },
+      deep: true
+    },
+    pickerinput: function () {
+      console.log("搜索关键字变化")
+      this.searchModel = this.pickerinput
+    },
+    searchModel: function () {
+      if (this.searchModel != undefined && this.searchModel.trim() != "") {
+        this.isShowSearchToTs = "block"
+      } else {
+        this.isShowSearchToTs = "none"
+      }
+    },
+    mapmodel: function () {       // (拖拽模式地图 dragMarker 和 拖拽选点模式 dragMap)
+      this.map.clearMap(); //清楚地图上所有的marks （清楚点标记）
+      if (this.mapmodel === 'dragMap') {
+        console.log("当前地图模式为dragMap（拖拽选点）打开拖拽选单功能")
+        this.openDragMap(); //开启拖拽选点
+        this.clearMarkerList();//清楚海量点
+      } else if (this.mapmodel === 'dragMarker') {
+        console.log("当前地图模式为dragMarker（地图拖拽）关闭拖拽选点功能")
+        this.closeDragMap(); //关闭拖拽选点
+        this.clearMarkerList();//清楚海量点
+        this.map.clearMap(); //清楚地图上所有的marks （清楚点标记）
+      }
+      // 当页面中地图模式变化，就将地图模式设置到poi对象中
+      if (this.mapmodel !== '' && this.mapmodel !== null) {
+        this.positionPickerDrag.setMode(this.mapmodel)
+      }
+    },
+    myLocation: function () {
+      console.log("当前位置信息", this.myLocation)
+      // 对外抛出当前位置信息
+      this.$emit("getmylocation", this.myLocation);
+    },
+    inputmarksarray: function () {
+      if (this.inputmarksarray !== null && this.inputmarksarray !== [] && this.inputmarksarray !== "[]") {
+        this.showMarkerList(); //渲染海量点
+      } else {
+        this.clearMarkerList();//清楚海量点
+      }
+    },
+    labelmarksarray: function () {
+      this.map.clearMap(); //清楚地图上所有的marks （清楚点标记）
+      if (this.labelmarksarray !== null && this.labelmarksarray !== [] && this.labelmarksarray !== "[]") {
+        this.showLabelMarksArray()
+      }
+    }
+  },
+  ready() {
+    this.$nextTick(() => {
+      /*判断机型
+    手机端有：地图，poi搜索选址，poi拖拽选址
+    PC端有：地图 右键菜单初始化
+    */
+      this.initAmap();  //地图初始化
+      if (this.pickerInput) {
+        this.poiPickerReady(); // poi选址初始化
+      }
+      this.poiPickerDropReady(); // poi拖拽选址初始化
+      if (!/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
+        // PC端
+        console.log("当前设备不是 iPhone|iPad|iPod|iOS|Android 当前设备是" + navigator.userAgent)
+        this.contextRightKeyMenu(); // 右键菜单初始化
+        let toolBar = new AMap.ToolBar(); // 高德插件工具栏 （地图查看等级放大缩小）
+        this.map.addControl(toolBar);
+      } else {
+        // 移动端
+        AMapUI.loadUI(['control/BasicControl'], (BasicControl) => {
+          //添加一个缩放控件
+          this.map.addControl(new BasicControl.Zoom({
+            position: 'lt'
+          }));
+        });
+      }
+      if (this.zoomcenter != null) {
+        this.setZommAndCenterView(this.zoomcenter.grade, this.zoomcenter.lng, this.zoomcenter.lat)
+      }
+      if (this.inputmarksarray.length > 0) {
+        this.showMarkerList(); //渲染海量点
+      }
+      if (this.labelmarksarray.length > 0) {
+        this.showLabelMarksArray()
+      }
+    })
+  },
+  created() {
+    if (this.dom === '') {
+      this.dom = "amapId" + Math.round(Math.random() * 10) + Math.round(Math.random() * 10)
+    }
+  },
+  computed() {
+  }
+}
+</script>
+
+<style scoped>
+#pickerOut {
+  overflow: auto;
+  min-height: 200px;
+  min-width: 100px;
+  position: absolute;
+  background-color: #fff;
+  z-index: 3;
+  margin: 0 auto;
+  border: 1px solid #e8e8e8;
+  border-radius: 5px;
+}
+
+.tooltips-amp-diy {
+  position: relative;
+  border: 1px solid #A5C4EC;
+  border-radius: 4px;
+}
+</style>