移動端使用釘釘api進行地圖定位

釘釘前端api

效果圖 

注意事項：需要在釘釘app中打開，才能調用此地圖，代碼示範

需要後臺接口，前端需要分割

<template>
  <div class="valStyle">
        <p class="left">
            <span class="verification">*</span>定位
            <span>{{atlas_name}}</span>
            <span @touchstart="atlas_location">
                <i class="cubeic-location"></i>
            </span>
        </p>
  </div>
</template>

<script>
import * as dd from "dingtalk-jsapi";
// 後臺接口
import {getAuthInfo} from "@/api";
export default {
  name: "succession-list",
  props: {
    tree_val: Object,
  },
  data() {
    return {
      hand_from: {
        object_id: this.tree_val.id,
        address: "",
        lat: toString,
        lng: toString,
        hygiene: "",
        state: 1,
        note: "",
        water: "",
        user_visit: "",
        time_visit: "",
        phone_visit: "",
        cause_visit: ""
      },
      atlas_data:{},
      atlas_name:"",
    };
  },
  methods: {
    // 獲取JSAPI鑑權參數
    getAuthInfoShow() {
      let _this = this;
      getAuthInfo().then(json => {
        if (json.state === "ok") {
          dd.config({
            agentId: json.data.agentId, // 必填，微應用ID
            corpId: json.data.corpId, //必填，企業ID
            timeStamp: json.data.timeStamp, // 必填，生成簽名的時間戳
            nonceStr: json.data.nonceStr, // 必填，生成簽名的隨機串
            signature: json.data.signature, // 必填，簽名
            type: 0, //選填。0表示微應用的jsapi,1表示服務窗的jsapi；不填默認爲0。該參數從dingtalk.js的0.8.3版本開始支持
            jsApiList: ["device.geolocation.get", "biz.map.locate"] // 必填，需要使用的jsapi列表，注意：不要帶dd。
          });
          // 獲取位置
          dd.ready(function() {
            dd.device.geolocation.get({
              targetAccuracy: 200,
              coordinate: 1,
              withReGeocode: true,
              useCache: false, //默認是true，如果需要頻繁獲取地理位置，請設置false
              onSuccess: function(result) {
                // alert("02success: " + JSON.stringify(result))
                _this.atlas_data = result;
                _this.atlas_name = result.address.slice(6);

                _this.hand_from.address = result.address.slice(6);
                _this.hand_from.lat = result.latitude;
                _this.hand_from.lng = result.longitude;
                /* 高德座標 result 結構
                {
                  longitude : Number,
                  latitude : Number,
                  accuracy : Number,
                  address : String,
                  province : String,
                  city : String,
                  district : String,
                  road : String,
                  netType : String,
                  operatorType : String,
                  errorMessage : String,
                  errorCode : Number,
                  isWifiEnabled : Boolean,
                  isGpsEnabled : Boolean,
                  isFromMock : Boolean,
                  provider : wifi|lbs|gps,
                  isMobileEnabled : Boolean
                }
                */
              },
              onFail: function(err) {
                // alert("02error: " + JSON.stringify(err))
              }
            });
          });
          dd.error(function(error) {
            /**
              {
                errorMessage:"錯誤信息",// errorMessage 信息會展示出釘釘服務端生成簽名使用的參數，請和您生成簽名的參數作對比，找出錯誤的參數
                errorCode: "錯誤碼"
              }
            **/
            // alert('dd error: ' + JSON.stringify(error));
          });
        }
      });
    },
    // 地圖調用
    atlas_location() {
      let _this = this;
      // 地圖定位
      dd.biz.map.locate({
        latitude: _this.atlas_data.latitude, // 緯度，非必須
        longitude: _this.atlas_data.longitude, // 經度，非必須
        onSuccess: function(result) {
          // alert("03success: " + JSON.stringify(result))
          _this.atlas_name = result.snippet;
          _this.hand_from.address = result.snippet;
          _this.hand_from.lat = result.latitude;
          _this.hand_from.lng = result.longitude;

          /* result 結構 */
          // {
          //     province: 'xxx', // POI所在省會，可能爲空
          //     provinceCode: 'xxx', // POI所在省會編碼，可能爲空
          //     city: 'xxx', // POI所在城市，可能爲空
          //     cityCode: 'xxx', // POI所在城市，可能爲空
          //     adName: 'xxx', // POI所在區名稱，可能爲空
          //     adCode: 'xxx', // POI所在區編碼，可能爲空
          //     distance: 'xxx', // POI與設備位置的距離
          //     postCode: 'xxx', // POI的郵編，可能爲空
          //     snippet: 'xxx', // POI的街道地址，可能爲空
          //     title: 'xxx', // POI的名稱
          //     latitude: 39.903578, // POI的緯度
          //     longitude: 116.473565, // POI的經度
          // }
        },
        onFail: function(err) {
          // alert("03error: " + JSON.stringify(err))
        }
      });
    },
  },
  created() {
    this.getAuthInfoShow();
  },
};
</script>

<style lang="scss" scoped>
.verification {
  color: #e64340;
}
.cubeic-location {
    color: #1295fc;
    padding-bottom: 0.3rem;
}
</style>