wxml:
<
map
class=
"map"
longitude=
'{{longitude}}'
latitude=
'{{latitude}}'
scale=
'{{scale}}'
markers=
'{{markers}}'
polyline=
'{{polyline}}'
bindmarkertap=
'bindmarkertap'
bindregionchange=
'bindregionchange'
show-location
circles=
"{{circles}}"
></
map
>
<
view
><
text
>经度{{jd}}
</
text
></
view
>
<
view
><
text
>纬度{{wd}}
</
text
></
view
>
<
view
><
text
>地点{{address}}
</
text
></
view
>
<
view
><
text
>相隔距离
<
text
class=
'juli'>{{juli}}
</
text
>公里
</
text
></
view
>
wxss:
.map{
display:
block;
width:
100%;
height:
80%;
}
page{
width:
100%;
height:
100%;
}
.juli{
color:
red;
}
js:
var QQMapWX =
require(
'../../utils/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
data: {
//mapContext:null,
scale:
16,
//缩放级别
latitude:
0,
longitude:
0,
controls:[],
juli:
''
},
onLoad:
function (options) {
qqmapsdk =
new QQMapWX({
key:
'自己的腾讯地图key'
}) ,
this.distance(
31.52853,
120.28429,
35.95995,
120.19653)
},
//公式计算（经纬度）
distance:
function (la1, lo1, la2, lo2) {
var La1 = la1 * Math.PI /
180.0;
var La2 = la2 * Math.PI /
180.0;
var La3 = La1 - La2;
var Lb3 = lo1 * Math.PI /
180.0 - lo2 * Math.PI /
180.0;
var s =
2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 /
2),
2) + Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 /
2),
2)));
s = s *
6378.137;
//地球半径
s = Math.round(s *
10000) /
10000;
console.log(
"计算结果",s)
this.setData({
juli:s
})
},
onReady:
function () {
var that =
this
//基础定位
wx.getLocation({
type:
'wgs84',
success:
function (res) {
console.log(res)
var latitude1 = res.latitude
var longitude1 = res.longitude
var speed=res.speed
var accuracy=res.accuracy
that.setData({
latitude:res.latitude,
longitude:res.longitude,
markers:[{
id:
"1",
latitude: res.latitude,
longitude: res.longitude,
width:
50,
height:
50,
iconPath:
'',
title:
'这里',
}],
circles:[{
latitude: res.latitude,
longitude: res.longitude,
color:
'#8A4DB3',
fillColor:
'#7cb5ec88',
radius:
1000,
strokeWidth:
1
}],
polyline: [{
points: [{
longitude: res.longitude,
latitude: res.latitude
}, {
longitude:
120.19,
latitude:
36.07
}],
color:
"#FF0000DD",
width:
2,
dottedLine:
true
}],
}),
//关键词数据提示
qqmapsdk.getSuggestion({
keyword:
'超市',
success:
function (res) {
console.log(res);
},
fail:
function (res) {
console.log(res);
},
complete:
function (res) {
console.log(res);
}
}),
//地点搜索
qqmapsdk .search({
keyword:
'酒店',
success:
function (res) {
console.log(res);
},
fail:
function (res) {
console.log(res);
},
complete:
function (res) {
console.log(res);
}
}),
//城市列表
qqmapsdk.getCityList({
success:
function (res) {
console.log(res);
},
fail:
function (res) {
console.log(res);
},
complete:
function (res) {
console.log(res);
}
}),
//城市列表
qqmapsdk.getDistrictByCityId({
id:
'370000',
// 对应城市ID
success:
function (res) {
console.log(res);
},
fail:
function (res) {
console.log(res);
},
complete:
function (res) {
console.log(res);
}
}),
qqmapsdk.reverseGeocoder({
location: {
latitude: latitude1,
longitude: longitude1
},
success:
function (res) {
console.log(res);
var add = res.result.address
that.setData({
wd: latitude1,
jd: longitude1,
address: add
})
}
})
}
})}
})