微信小程序騰訊地圖SDK使用方法

一.本篇文章主要知識點有如下幾種：

1.受權當前位置

2.map組件的使用

3.騰訊地圖逆地址解析

4.座標系的轉化

二.效果以下：

三.WXML代碼

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="6" markers="{{markers}}" bindmarkertap="markertap" show-location></map>

四.CSS代碼

page {
    width: 100%;
    height: 100%;
}
 
#map {
    height: 100%;
    width: 100%;
}

五.JS代碼

// 引入SDK核心類
var QQMapWX = require('../../qqmap/qqmap-wx-jssdk.js');
// 實例化API核心類
var qqmapsdk = new QQMapWX({
    key: '' // 必填 申請的開發者密鑰
});
var zhuan_dingwei = require('../../utils/dingwei.js');
Page({
 
    /**
     * 頁面的初始數據
     */
    data: {
        latitude: 31.86, //經緯度先預設一個，獲取地址信息後再替換
        longitude: 117.27,
        markers: [{
            title: "",
            state: "",
            id: 0,
            latitude: 32.43618,
            longitude: 115.98478,
            iconPath: "../../images/pic.png", //圖標路徑
            width: 36,
            height: 36,
            callout: { //在markers上展現地址名稱，根據需求是否須要
                content: "",
                color: "#000",
                display: "ALWAYS"
            }
        }, {
            title: "",
            state: "",
            id: 1,
            latitude: 31.8726,
            longitude: 116.65063,
            iconPath: "../../images/pic.png", //圖標路徑
            width: 36,
            height: 36,
            callout: { //在markers上展現地址名稱，根據需求是否須要
                content: "",
                color: "#000",
                display: "ALWAYS"
            }
        }],
    },
    //獲取當前位置信息
    getUserLocation() {
        var that = this;
        wx.getSetting({
            success: (res) => {
                //console.log(JSON.stringify(res))
                // res.authSetting['scope.userLocation'] == undefined    表示 初始化進入該頁面
                // res.authSetting['scope.userLocation'] == false    表示 非初始化進入該頁面,且未受權
                // res.authSetting['scope.userLocation'] == true    表示 地理位置受權
                if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
                    wx.showModal({
                        title: '請求受權當前位置',
                        content: '須要獲取您的地理位置，請確認受權',
                        success: function (res) {
                            if (res.cancel) {
                                wx.showToast({
                                    title: '拒絕受權',
                                    icon: 'none',
                                    duration: 1000
                                });
                            } else if (res.confirm) {
                                wx.openSetting({
                                    success: function (dataAu) {
                                        if (dataAu.authSetting["scope.userLocation"] == true) {
                                            wx.showToast({
                                                title: '受權成功',
                                                icon: 'success',
                                                duration: 1000
                                            });
                                            //再次受權，調用wx.getLocation的API
                                            wx.getLocation({
                                                type: 'wgs84',
                                                success(res) {
                                                    console.log(res);
                                                    that.setData({
                                                        latitude: res.latitude,
                                                        longitude: res.longitude
                                                    });
                                                }
                                            });
                                        } else {
                                            wx.showToast({
                                                title: '受權失敗',
                                                icon: 'none',
                                                duration: 1000
                                            });
                                        }
                                    }
                                })
                            }
                        }
                    })
                } else if (res.authSetting['scope.userLocation'] == undefined) {
                    //調用wx.getLocation的API
                    wx.getLocation({
                        type: 'wgs84',
                        success(res) {
                            console.log("undefined", res);
                            that.setData({
                                latitude: res.latitude,
                                longitude: res.longitude
                            });
                        }
                    });
                } else {
                    //調用wx.getLocation的API
                    wx.getLocation({
                        type: 'wgs84',
                        success(res) {
                            console.log(res);
                            that.setData({
                                latitude: res.latitude,
                                longitude: res.longitude
                            });
                        }
                    });
                }
            }
        })
    },
    //點擊標註
    markertap(e) {
        console.log(e);
        this.reverseGeocoder(e.detail.markerId);
    },
    //逆地址解析
    reverseGeocoder: function (id) {
        var that = this;
        var location = "";
        var s = "markers[" + parseInt(id) + "]";
        var stationInfo = {};
        that.data.markers.forEach((item) => {
            if (item.id == id) {
                location = location + item.latitude + "," + item.longitude;
                stationInfo = item;
                return false;
            }
        });
        console.log(location);
        qqmapsdk.reverseGeocoder({
            //位置座標，默認獲取當前位置，非必須參數
            /**
             * 
             //Object格式
              location: {
                latitude: 39.984060,
                longitude: 116.307520
              },
            */
            /**
             *
             //String格式
              location: '39.984060,116.307520',
            */
            location: location || '', //獲取表單傳入的位置座標,不填默認當前位置,示例爲string格式
            success: function (res) { //成功後的回調
                console.log(res);
                stationInfo.title = res.result.formatted_addresses.recommend; //res.result.address
                stationInfo.callout.content = res.result.formatted_addresses.recommend;
                that.setData({
                    [s]: stationInfo
                });
                that.openLocation(stationInfo);
            },
            fail: function (error) {
                console.error(error);
            }
        });
    },
    //查看位置
    openLocation: function (stationInfo) {
        //使用微信內置地圖查看位置接口
        wx.openLocation({
            latitude: stationInfo.latitude, // 緯度，浮點數，範圍爲90 ~ -90
            longitude: stationInfo.longitude, // 經度，浮點數，範圍爲180 ~ -180。
            name: stationInfo.title, //要找的地方名字（某某飯店）
            address: stationInfo.title, //地址：要去的地點詳細描述
            scale: 14, // 地圖縮放級別,整形值,範圍從1~28。默認爲最大
            infoUrl: '' // 在查看位置界面底部顯示的超連接,可點擊跳轉（測試好像不可用）
        });
    },
 
    /**
     * 生命週期函數--監聽頁面加載
     */
    onLoad: function (options) {
        this.getUserLocation();//用戶受權獲取地理信息，能夠寫在onShow裏進行判斷是否受權獲取地理信息
        this.data.markers.forEach((item, i) => {
            //高德地圖、騰訊地圖以及谷歌中國區地圖使用的是GCJ-02座標系
            let gcj02tobd09 = zhuan_dingwei.wgs84togcj02(item.longitude, item.latitude);
            console.log(i, gcj02tobd09);
            item.longitude = gcj02tobd09[0];
            item.latitude = gcj02tobd09[1];
        });
        console.log(this.data.markers);
    },
 
    /**
     * 生命週期函數--監聽頁面初次渲染完成
     */
    onReady: function () {
 
    },
 
    /**
     * 生命週期函數--監聽頁面顯示
     */
    onShow: function () {
 
    },
 
    /**
     * 生命週期函數--監聽頁面隱藏
     */
    onHide: function () {
 
    },
 
    /**
     * 生命週期函數--監聽頁面卸載
     */
    onUnload: function () {
 
    },
 
    /**
     * 頁面相關事件處理函數--監聽用戶下拉動做
     */
    onPullDownRefresh: function () {
 
    },
 
    /**
     * 頁面上拉觸底事件的處理函數
     */
    onReachBottom: function () {
 
    },
 
    /**
     * 用戶點擊右上角分享
     */
    onShareAppMessage: function () {
 
    }
})

六.引用的文件

（1）qqmap文件，點擊下面連接，申請開發者密鑰，下載微信小程序JavaScriptSDK

  下載微信小程序JavaScriptSDK

（2）dingwei.js

/**
 * Created by Wandergis on 2015/7/8.
 * 提供了百度座標（BD09）、國測局座標（火星座標，GCJ02）、和WGS84座標系之間的轉換
 */
//UMD魔法代碼
// if the module has no dependencies, the above pattern can be simplified to
(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define([], factory);
  } else if (typeof module === 'object' && module.exports) {
    // Node. Does not work with strict CommonJS, but
    // only CommonJS-like environments that support module.exports,
    // like Node.
    module.exports = factory();
  } else {
    // Browser globals (root is window)
    root.coordtransform = factory();
  }
}(this, function () {
  //定義一些常量
  var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
  var PI = 3.1415926535897932384626;
  var a = 6378245.0;
  var ee = 0.00669342162296594323;
  /**
   * 百度座標系 (BD-09) 與 火星座標系 (GCJ-02)的轉換
   * 即 百度 轉 谷歌、高德
   * @param bd_lon
   * @param bd_lat
   * @returns {*[]}
   */
  var bd09togcj02 = function bd09togcj02(bd_lon, bd_lat) {
    var bd_lon = +bd_lon;
    var bd_lat = +bd_lat;
    var x = bd_lon - 0.0065;
    var y = bd_lat - 0.006;
    var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_PI);
    var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_PI);
    var gg_lng = z * Math.cos(theta);
    var gg_lat = z * Math.sin(theta);
    return [gg_lng, gg_lat]
  };
 
  /**
   * 火星座標系 (GCJ-02) 與百度座標系 (BD-09) 的轉換
   * 即谷歌、高德 轉 百度
   * @param lng
   * @param lat
   * @returns {*[]}
   */
  var gcj02tobd09 = function gcj02tobd09(lng, lat) {
    var lat = +lat;
    var lng = +lng;
    var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI);
    var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI);
    var bd_lng = z * Math.cos(theta) + 0.0065;
    var bd_lat = z * Math.sin(theta) + 0.006;
    return [bd_lng, bd_lat]
  };
 
  /**
   * WGS84轉GCj02
   * @param lng
   * @param lat
   * @returns {*[]}
   */
  var wgs84togcj02 = function wgs84togcj02(lng, lat) {
    var lat = +lat;
    var lng = +lng;
    if (out_of_china(lng, lat)) {
      return [lng, lat]
    } else {
      var dlat = transformlat(lng - 105.0, lat - 35.0);
      var dlng = transformlng(lng - 105.0, lat - 35.0);
      var radlat = lat / 180.0 * PI;
      var magic = Math.sin(radlat);
      magic = 1 - ee * magic * magic;
      var sqrtmagic = Math.sqrt(magic);
      dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
      dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
      var mglat = lat + dlat;
      var mglng = lng + dlng;
      return [mglng, mglat]
    }
  };
 
  /**
   * GCJ02 轉換爲 WGS84
   * @param lng
   * @param lat
   * @returns {*[]}
   */
  var gcj02towgs84 = function gcj02towgs84(lng, lat) {
    var lat = +lat;
    var lng = +lng;
    if (out_of_china(lng, lat)) {
      return [lng, lat]
    } else {
      var dlat = transformlat(lng - 105.0, lat - 35.0);
      var dlng = transformlng(lng - 105.0, lat - 35.0);
      var radlat = lat / 180.0 * PI;
      var magic = Math.sin(radlat);
      magic = 1 - ee * magic * magic;
      var sqrtmagic = Math.sqrt(magic);
      dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
      dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
      var mglat = lat + dlat;
      var mglng = lng + dlng;
      return [lng * 2 - mglng, lat * 2 - mglat]
    }
  };
 
  var transformlat = function transformlat(lng, lat) {
    var lat = +lat;
    var lng = +lng;
    var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
    ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
    ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;
    ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;
    return ret
  };
 
  var transformlng = function transformlng(lng, lat) {
    var lat = +lat;
    var lng = +lng;
    var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
    ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
    ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;
    ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;
    return ret
  };
 
  /**
   * 判斷是否在國內，不在國內則不作偏移
   * @param lng
   * @param lat
   * @returns {boolean}
   */
  var out_of_china = function out_of_china(lng, lat) {
    var lat = +lat;
    var lng = +lng;
    // 緯度3.86~53.55,經度73.66~135.05 
    return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55);
  };
 
  return {
    bd09togcj02: bd09togcj02,
    gcj02tobd09: gcj02tobd09,
    wgs84togcj02: wgs84togcj02,
    gcj02towgs84: gcj02towgs84
  }
}));

七.座標系的轉換

根據本身的須要選擇調用dingwei.js中的方法，騰訊地圖使用的是火星座標（GCJ02）

八.安全域名設置，在「設置」 -> 「開發設置」中設置request合法域名，添加https://apis.map.qq.com

轉載於：https://blog.csdn.net/weixin_46201586/article/details/107249342