關於釘釘開發，心得

最近草草做了些項目，關於地圖、定位、嵌到釘釘APP里

地圖嵌的是高德地圖，查找附近公司之類的是用的高德接口，后端返回數據

高德的定位在釘釘里不知為啥沒起到作用，而且發現高德的定位有時候有些許偏差

這里用的是釘釘的定位

釘釘有的功能需要鑒權，有的不需要

定位功能需要鑒權

 先過一遍config

 

//初始化釘釘鑒權
    initDdConfig () {
        //此處取當前url  上線后需更換  不能帶#號
        let data = {
          "url": `${this.api.curUrl}`
        }
        //訪問后端接口   調取釘釘config參數
        this.$http(`${this.api.getJSSDK}` + JSON.stringify(data)).then(res => {
          //過一遍config
          this.dd.config({
                  agentId : res.data.resultdata.appid,
                  corpId : res.data.resultdata.corpid,
                  timeStamp : res.data.resultdata.timestamp,
                  nonceStr : res.data.resultdata.noncestr,
                  signature : res.data.resultdata.signature,
                  jsApiList : [ 'runtime.info', 'biz.contact.choose',
                      'device.notification.confirm', 'device.notification.alert',
                      'device.notification.prompt', 'biz.ding.post','device.geolocation.get',
                      'biz.util.openLink' ]
                })
          //正確走完config進ready
          dd.ready(() => {
            this.getLocation()
          })
          //否則進error
          dd.error(function(error){
            this.$ui.MessageBox.alert(JSON.stringify(error), {}) 
          }) 
        }).catch(e =>{
          this.$ui.MessageBox.alert(e.data.msg, {})
        })   
    }

 

 然后在ready里進行釘釘定位

  //獲取當前位置
    getLocation (fn) {
      this.dd.device.geolocation.get({
               targetAccuracy : 200,
               coordinate : 1,
               withReGeocode : true,
               useCache:true, //默認是true，如果需要頻繁獲取地理位置，請設置false
               onSuccess : (result) => {
                  this.CurrentCoordinate[0] = result.longitude
                  this.CurrentCoordinate[1] = result.latitude
                  this.CurrentLocation = result.road
                  this.getMap()
                  fn && fn()
               },
               onFail : (err) => {
                this.$ui.MessageBox.alert(err.data.msg, {})
               }
           })
    },

 

getMap方法是根據釘釘定位的當前坐標獲取在高德地圖上定到位置

 

//根據當前坐標得到地圖
    getMap () {
      this.map = new AMap.Map('container', {
        zoom: 17,
        center: this.CurrentCoordinate
      })
      this.map.plugin(["AMap.ToolBar","AMap.Geolocation"], () => {
          this.map.addControl(new AMap.ToolBar())
          this.map.addControl(new AMap.Geolocation())
      })
      this.clickListener = AMap.event.addListener(this.map, "click", this._onClick)
    },
    _onClick (e) {
      this.focusAddress(e.lnglat)
    },
    focusAddress (pos,nearby) {
      this.map.clearMap()
      let location  = pos.location||pos
      this.currentPos = new AMap.Marker({
          position : location,
          icon : 'http://vdata.amap.com/icons/b18/1/2.png',
          zIndex:999,
          map : this.map
      })
      this.CurrentCoordinate[0] = location.lng
      this.CurrentCoordinate[1] = location.lat
      let circle = new AMap.Circle({
          center: [location.lng,location.lat],
          radius: 100,
          fillOpacity:0.2,
          strokeWeight:1,
          strokeColor:"#7eb8fc",
          fillColor:"rgba(104, 149, 229, 0.8)"
      })
      circle.setMap(this.map)
      !nearby && this.map.setFitView()
      let geo_req = {'location':location,'radius':100,'type':'range','currentPage': 1,'pageSize': 5}
      //根據坐標獲取地理位置的接口
      this.$http(`${this.api.getNeighboursByLocationUrl}` + JSON.stringify(geo_req)).then(res => {
        if(res.data&&res.data.success&&res.data.resultdata.company_geo_list){
          document.getElementById('neighbourhood').innerHTML=''
          let markers = res.data.resultdata.company_geo_list
          for(let i=0;i<markers.length;i++){
            if(!markers[i].company_name){
              return
            }
            document.getElementById('neighbourhood').innerHTML+='<li>'+markers[i].company_name+'</li>'
            this.placeMarker(markers[i])
          }
        }
      }).catch(e =>{
        this.$ui.MessageBox.alert(e.data.msg, {})
      })  
      this.getNearbyCompanysList(true)
    },
    placeMarker (pos){
      this.marker = new AMap.Marker({
          position: [pos.longitude, pos.latitude],
          title:pos.company_name,
          clickable:true,
          topWhenClick:true,
          extData:pos
      })
      this.marker.setMap(this.map)
    }