uniapp-map基本使用

页面元素：

 <map style="width: 100%; height: 100%" id="map1" ref="map1" :show-location="true"
                     :latitude="map.latitude" :longitude="map.longitude" :scale="map.scale" :markers="map.covers"
                     @markertap="markertap"
                     @regionchange="regionchange" @updated="mapUpdated">
</map>

js:

data(){
  return{
      map: {
        title: 'map',
        latitude: 22.862277018229168,
        longitude: 108.27395046657986,
        scale:10.5,
        covers: [],
        updated: false,
        oldMarker: undefined
      },
      QueryDeviceList: {
        input: {
          value: {
            "organizationId": undefined,      // id
            "searchKey": undefined,           // 关键字搜索
            "southwest": [],
            "northeast": []
          }
        },
        output: {
          value: [],
          currentDataShow: false,
          currentData: {},
          organizationName: undefined
        }
      }
  }  
}
created(){
    //uniapp获取经纬度
    uni.getLocation({
      type: 'gcj02', success: (res) => {
        console.log(res)
        this.setLocation(res)  //获取经纬度之后可以进行转换  然后据此搜索一波数据
        this.getRegion()  //获取视野
      }
    })
},
mounted(){
      //刚进页面设置一波显示的东西
      this.methods('setDeviceShow', false)
      this.methods('QueryDeviceListReset')
      //
      this.methods('setLocation', {latitude:this.map.longitude:this.map.longitude})
      await this.methods('getRegion')
      this.methods('setMoveToLocation')  //移动
      let data = await this.methods('queryFaultList',true)
      if (data) {
        this.methods('setCovers', data)
      }
    }
},
methods:{
    //地图加载完毕的事件
    async mapUpdated () {
        if (this.map.updated) return
        this.methods('setUpdated')
        this.methods('setMapContext')
        this.methods('setMoveToLocation')
        await this.methods('getRegion')
        console.log('queryFaultList------------------')
        let data = await this.methods('queryFaultList')
        console.log(data)
        if (data) {
          this.methods('setCovers', data)
        }
    },
    setUpdated(){
        this.map.updated = true
    },
    //算是绑定对象吧
    setMapContext () {
        this.mapContext = uni.createMapContext('map1')
        console.log(this.mapContext)
    }，
    //设置中心点
    setLocation (data) {
        this.map.latitude = data.latitude
        this.map.longitude = data.longitude
    },
    //获取视野
    getRegion(){
        await new Promise(resolve => {
          this.mapContext.getRegion({
            success: (res) => {
              let southwest = [res.southwest.latitude, res.southwest.longitude]
              let northeast = [res.northeast.latitude, res.northeast.longitude]
              this.QueryDeviceList.input.value.southwest = southwest
              this.QueryDeviceList.input.value.northeast = northeast
              resolve()
            }
          })
        })
    },
    //设置视野
    setRegion (res) {
        let southwest = [res.southwest.latitude, res.southwest.longitude]
        let northeast = [res.northeast.latitude, res.northeast.longitude]
        this.QueryDeviceList.input.value.southwest = southwest
        this.QueryDeviceList.input.value.northeast = northeast
    },
    //移动
    setMoveToLocation () {
        this.mapContext.moveToLocation({
          latitude: this.map.latitude,
          longitude: this.map.longitude
        })
    },
    //根据请求的数据设置标记点的位置以及图标
    setCovers (data) {
        data.forEach((i, index) => {
          i.id = index
          i.width = 80
          i.height = 80
          i.deviceLabel = deviceLabel
          i.iconPath = '../../static/img/ddd.png'
          }
        })
        this.map.covers = data
    },
    //拖动视野
    async regionchange(data) {
        // if (data.detail.type === 'end' && data.detail.causedBy === "drag") {
        if (data.type === 'end' && data.causedBy === "drag") {
          console.log('地图视图改变')
          this.methods('setRegion', data.detail.region)
          //请求数据
          let list = await this.methods('queryFaultList')
          if (list) {
            this.methods('setDeviceShow', false)
            // 设置选中状态的markerId
            this.methods('setMarkerNoSelected')
            this.methods('setOldMarker', -1)
            this.methods('setCovers', list)
          }
        }
    },
    //点击标记点
    markertap(data) {
        console.log(data)
        let markerId = data.detail.markerId
        if (this.map.oldMarker === markerId) return
        // 显示标记详情
        this.methods('setDeviceShow', true)   //是否显示详情弹框
        this.methods('setDeviceData', markerId)  //显示的数据
        // 把上一次选中状态变成未选中
        this.methods('setMarkerNoSelected')

        // 图标改成选中状态
        this.methods('setMarkerSelected', markerId)
        // 设置选中状态的markerId
        this.methods('setOldMarker', markerId)
    },
    // 把图标上一次选中状态变成选中
    setMarkerSelected (markerId) {
        let markers = this.map.covers[markerId]
        if (markers && markers.iconPath) {
          let iconPath = markers.iconPath.split('.png')
          markers.iconPath = iconPath[0] + '_selected.png'
        }
    }
    // 把图标上一次选中状态变成未选中
    setMarkerNoSelected () {
        if (this.map.oldMarker || this.map.oldMarker === 0) {
          let oldMarker = this.map.covers[this.map.oldMarker]
          if (oldMarker && oldMarker.iconPath) {
            oldMarker.iconPath = oldMarker.iconPath.replace('_selected', '')
          }
        }
    }
}

提示：示例代码摘取自公司项目，因使用了框架。复制代码需要手动修改一些地方。正常是调用不了这个this.methods()的。
例如：把“this.methods(‘getData’)”，改成“this.getData()”