safecheck-client 4.0.2-75 → 4.0.2-76

package/src/components/android/AppMapLocation.vue

@@ -1,829 +0,0 @@
-<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
-        anchor: new AMap.Pixel(6, 6),  // 图标偏移位置
-        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
-      // 初始化地图组件
-      this.map = new AMap.Map(thas.dom, {
-        zoom: 12,
-        resizeEnable: true, // 如果center属性缺省，地图默认定位到用户所在城市的中心
-        viewMode: '2D',  //设置地图模式
-        lang: 'zh_cn',  //设置地图语言类型
-        zindex: 99999
-      });
-      AMap.Event.addListener(this.map, "complete",this.mapInitSuccess());
-      window.map = this.map
-      // 异步加载地图插件
-      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)
-              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) //设置地图模式到拖拽选址组件
-      }
-      console.log(`定位成功` + JSON.stringify(res))
-      let content = ''
-      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
-      }
-      // 为当前位置添加标记
-      var marker = new AMap.Marker({
-        position: res.position,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-        offset: new AMap.Pixel(-15, -35),
-        icon: myico, // 添加 Icon 图标 URL
-      });
-
-      thas.map.add(marker);
-      // 设置点标记的动画效果，此处为弹跳效果
-      // marker.setAnimation('AMAP_ANIMATION_BOUNCE');
-      this.myMarker = marker
-      // 对marker绑定点击时事件
-      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) {
-      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
-      AMapUI.loadUI(['misc/PoiPicker'], (PoiPicker) => {
-        _than.poiPicker = new PoiPicker({
-          //city:'北京',
-          input: 'pickerInput',
-          // suggestContainer: 'pickerOut'  // 结果展示的id
-        });
-        if (!_than.poiPicker) {
-          _than.poiPickerReady()
-        }
-        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:""}`
-          }
-          _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 //地址信息
-      }
-      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>