今天对微信小程序进行了运用，对于移动端自己做的比较少，现在大多数的项目就是百度，也就是CV工程师
微信小程序的代码
wxml
<view class="" hover-class="none" hover-stop-propagation="false" style="width: 100%; height: 100%;">
<map id="map1" longitude="{{longitude}}" latitude=" {{latitude}}" markers="{{markers}}" scale="14" show-location
style="width: 100%; height: 100%;" bindtap="bindtapMap" bindregionchange="bindregionchange"></map>
<!-- <button bindtap="dianji" type="primary">获取最新数据</button> -->
</view>
index.wxss
page{
height: 100%;
}
#map {
width: 100%;
height: 1200rpx;
color: red;
}
var util = require('../resource/hello')
Page({
data: {
longitude: 113.14278, //地图界面中心的经度
latitude: 23.02882, //地图界面中心的纬度
markers: [ //标志点的位置
//位置0
{
iconPath: "../resource/hello.png",
latitude: 29,
longitude: 106,
id: 0,
},
],
northeast:[],
southwest:[]
},
onLoad: function () {
var that=this
var aa=""
var bb=""
var cc=[]
wx.request({
url: 'http://124.221.82.220:9527/chdeep/chdeepinfo/mapcenter',
method: 'GET',
success: function (res) {
aa=res.data.data[0].wgs84Lat
bb=res.data.data[0].wgs84Lng
cc=util.transformFromWGSToGCJ(aa,bb);
that.setData({
markers: [{
// latitude: res.data.data[0].wgs84Lat,
// longitude: res.data.data[0].wgs84Lng,
iconPath: "../resource/hello.png",
id: res.data.data[0].id,
callout: {
content: res.data.data[0].deep,
fontSize: '10',
padding: true,
color:'#444',
display: 'ALWAYS',
textAlign: 'center',
borderRadius: 20
},
latitude: cc["latitude"],
longitude: cc["longitude"],
width: 15,
height: 15
}],
latitude: cc["latitude"],
longitude: cc["longitude"],
})
},
}),
this.mapContext = wx.createMapContext('map1');
that.mapContext.getRegion({
success: res => {
that.setData({
northeast:res.northeast,
southwest:res.southwest
})
console.log('视野范围123', res);
console.log(this.data.southwest["latitude"])
console.log(this.data.southwest)
wx.request({
url:'',
method:'GET',
success:function(res){
console.log(res)
console.log(1111111111111111111111)
}
})
}
});
},
onReady: function () {
},
/**
* 地图放大缩小事件触发
* @param {*} e
*/
bindregionchange(e) {
var that=this
that.data.markers=[]
console.log('=bindregiοnchange=', e)
this.mapContext = wx.createMapContext('map1');
if(e.type!="end"){
return;
}
this.mapContext = wx.createMapContext('map1');
that.mapContext.getRegion({
success: res => {
console.log(222222222222)
console.log(res)
// wx.showModal({
// title: '视野范围',
// content: 'northeast: ' + JSON.stringify(res.northeast) +
// '/' + 'southwest: ' + JSON.stringify(res.southwest)
// });
var northeast=util.transformFromWGSToGCJ(res.northeast["longitude"],res.northeast["latitude"]);
var southwest=util.transformFromWGSToGCJ(res.southwest["longitude"],res.southwest["latitude"]);
that.setData({
northeast:northeast,
southwest:southwest
})
console.log('视野范围', res);
console.log(this.data.southwest["latitude"])
console.log(this.data.southwest)
wx.request({
url:'',
method:'GET',
success:function(res){
console.log(2)
console.log(res)
console.log(res.data.data.list.length)
var markers1=[]
var a1=""
var a2=""
var c=[]
for(var i=0;i<res.data.data.list.length;i++){
a1=res.data.data.list[i].wgs84Lat,
a2=res.data.data.list[i].wgs84Lng,
c=util.transformFromWGSToGCJ(a1,a2);
// console.log(c)
markers1 = markers1.concat({
iconPath: "../resource/hello.png",
id: res.data.data.list[i].id,
callout: {
content: res.data.data.list[i].deep,
fontSize: '10',
padding: true,
color:'#444',
display: 'ALWAYS',
textAlign: 'center',
borderRadius: 15
},
latitude: c["latitude"],
longitude: c["longitude"],
width: 15,
height: 15
});
}
that.setData({
markers:markers1
})
console.log(that.data.markers)
}
})
}
});
},
/**
* 点击地图事件，有经纬度信息返回
* @param {*} e
*/
bindtapMap(e) {
console.log('=bindtapMap=', e)
},
将WGS-84(国际标准)转为GCJ-02(火星坐标)的封装:
/**
* 判断经纬度是否超出中国境内
*/
function isLocationOutOfChina(latitude, longitude) {
if (longitude < 72.004 || longitude > 137.8347 || latitude < 0.8293 || latitude > 55.8271)
return true;
return false;
}
/**
* 将WGS-84(国际标准)转为GCJ-02(火星坐标):
*/
function transformFromWGSToGCJ(latitude, longitude) {
var lat = "";
var lon = "";
var ee = 0.00669342162296594323;
var a = 6378245.0;
var pi = 3.14159265358979324;
if (isLocationOutOfChina(latitude, longitude)) {
lat = latitude;
lon = longitude;
}
else {
var adjustLat = transformLatWithXY(longitude - 105.0, latitude - 35.0);
var adjustLon = transformLonWithXY(longitude - 105.0, latitude - 35.0);
var radLat = latitude / 180.0 * pi;
var magic = Math.sin(radLat);
magic = 1 - ee * magic * magic;
var sqrtMagic = Math.sqrt(magic);
adjustLat = (adjustLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
adjustLon = (adjustLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
latitude = latitude + adjustLat;
longitude = longitude + adjustLon;
}
return { latitude: latitude, longitude: longitude };
}
/**
* 将GCJ-02(火星坐标)转为百度坐标:
*/
function transformFromGCJToBaidu(latitude, longitude) {
var pi = 3.14159265358979324 * 3000.0 / 180.0;
var z = Math.sqrt(longitude * longitude + latitude * latitude) + 0.00002 * Math.sin(latitude * pi);
var theta = Math.atan2(latitude, longitude) + 0.000003 * Math.cos(longitude * pi);
var a_latitude = (z * Math.sin(theta) + 0.006);
var a_longitude = (z * Math.cos(theta) + 0.0065);
return { latitude: a_latitude, longitude: a_longitude };
}
/**
* 将百度坐标转为GCJ-02(火星坐标):
*/
function transformFromBaiduToGCJ(latitude, longitude) {
var xPi = 3.14159265358979323846264338327950288 * 3000.0 / 180.0;
var x = longitude - 0.0065;
var y = latitude - 0.006;
var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * xPi);
var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * xPi);
var a_latitude = z * Math.sin(theta);
var a_longitude = z * Math.cos(theta);
return { latitude: a_latitude, longitude: a_longitude };
}
/**
* 将GCJ-02(火星坐标)转为WGS-84:
*/
function transformFromGCJToWGS(latitude, longitude) {
var threshold = 0.00001;
// The boundary
var minLat = latitude - 0.5;
var maxLat = latitude + 0.5;
var minLng = longitude - 0.5;
var maxLng = longitude + 0.5;
var delta = 1;
var maxIteration = 30;
while (true) {
var leftBottom = transformFromWGSToGCJ(minLat, minLng);
var rightBottom = transformFromWGSToGCJ(minLat, maxLng);
var leftUp = transformFromWGSToGCJ(maxLat, minLng);
var midPoint = transformFromWGSToGCJ((minLat + maxLat) / 2, (minLng + maxLng) / 2);
delta = Math.abs(midPoint.latitude - latitude) + Math.abs(midPoint.longitude - longitude);
if (maxIteration-- <= 0 || delta <= threshold) {
return { latitude: (minLat + maxLat) / 2, longitude: (minLng + maxLng) / 2 };
}
if (isContains({ latitude: latitude, longitude: longitude }, leftBottom, midPoint)) {
maxLat = (minLat + maxLat) / 2;
maxLng = (minLng + maxLng) / 2;
}
else if (isContains({ latitude: latitude, longitude: longitude }, rightBottom, midPoint)) {
maxLat = (minLat + maxLat) / 2;
minLng = (minLng + maxLng) / 2;
}
else if (isContains({ latitude: latitude, longitude: longitude }, leftUp, midPoint)) {
minLat = (minLat + maxLat) / 2;
maxLng = (minLng + maxLng) / 2;
}
else {
minLat = (minLat + maxLat) / 2;
minLng = (minLng + maxLng) / 2;
}
}
}
function isContains(point, p1, p2) {
return (point.latitude >= Math.min(p1.latitude, p2.latitude) && point.latitude <= Math.max(p1.latitude, p2.latitude)) && (point.longitude >= Math.min(p1.longitude, p2.longitude) && point.longitude <= Math.max(p1.longitude, p2.longitude));
}
function transformLatWithXY(x, y) {
var pi = 3.14159265358979324;
var lat = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
lat += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
lat += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
lat += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
return lat;
}
function transformLonWithXY(x, y) {
var pi = 3.14159265358979324;
var lon = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
lon += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
lon += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
lon += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;
return lon;
}
module.exports = {
isLocationOutOfChina: isLocationOutOfChina,
transformFromWGSToGCJ: transformFromWGSToGCJ,
transformFromGCJToBaidu: transformFromGCJToBaidu,
transformFromBaiduToGCJ: transformFromBaiduToGCJ,
transformFromGCJToWGS: transformFromGCJToWGS
}
需要接口的在评论区回复
