<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('../../../../static/marker-default.png')
const myico = require('../../../../static/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 './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
      });
      if(AMap.Event){
        AMap.Event.addListener(this.map, "complete",this.mapInitSuccess());
      }else{
        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();
            if(AMap.Event){
              AMap.Event.addListener(geolocation, 'complete', this.onComplete)
              AMap.Event.addListener(geolocation, 'error', this.onError)
            }else{
              AMap.event.addListener(geolocation, 'complete', this.onComplete)
              AMap.event.addListener(geolocation, 'error', this.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 {
        if (AMap.Event){
          // 触摸开始时触发事件，仅适用移动设备
          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)
          })
        } 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)
          })
        }
      }
      if (AMap.Event){
        // 鼠标点击触发
        AMap.Event.addListener(marker, 'click', (row) => {
          this.$emit("diyspotmouseclick", _data.data)
        })
      } else {
        // 鼠标点击触发
        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>
