一.本篇文章主要知識點有以下幾種：
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: '' // 在查看位置界面底部顯示的超鏈接,可點擊跳轉（測驗好像不可用）
});
},
/**
* 生命周期函式--監聽頁面加載
*/
onl oad: 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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/238445.html
標籤：HTML5
上一篇：新手小白！！求教