小程序四种常用获取微信地图的方法
废话不多说 直接上代码 四种方法手机端和电脑端都能完美运行
第一种
.xwml
{{name?name:'获取用户位置'}}
纬度:{{latitude}}---经度:{{longitude}}
.js
Page({
data: {
},
onLoad: function () {
},
ginsxo:function(e){
let that = this
if (this.data.a != 1) {
wx.showToast({
title: '请开启GPS',
icon: 'none',
})
} else {
that.setData({
a: 0
})
wx.chooseLocation({
success: function (res) {
console.log(res)
that.setData({
latitude: res.latitude,
longitude: res.longitude,
name: res.name
})
}
})
}
},
//获取用户经纬度
getLocation: function (e) {
let that = this
wx.getLocation({
type: 'wgs84',
success: function (res) {
let latitude = res.latitude
let longitude = res.longitude
console.log('纬度:', latitude)
console.log('经度:', longitude)
that.setData({
a:1
})
}
})
setTimeout(function () {
if (getCurrentPages().length != 0) {
//刷新当前页面的数据
getCurrentPages()[getCurrentPages().length - 1].ginsxo()
}
}, 1000)
}
})
第二种
.wxml
获取地理位置
.js
Page({
data: {},
onLoad: function(options) {},
getlocaj: function(e) {
let that = this
if (this.data.a != 1) {
wx.showToast({
title: '你没有打开GPS',
icon: 'none',
})
} else {
that.setData({
a: 0
})
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success(res) {
const latitude = res.latitude
const longitude = res.longitude
wx.openLocation({
latitude,
longitude,
scale: 18
})
}
})
}
},
//获取用户经纬度
getLocation: function(e) {
let that = this
wx.getLocation({
type: 'wgs84',
success: function(res) {
let latitude = res.latitude
let longitude = res.longitude
console.log('纬度:', latitude)
console.log('经度:', longitude)
that.setData({
a: 1
})
}
})
setTimeout(function() {
if (getCurrentPages().length != 0) {
//刷新当前页面的数据
getCurrentPages()[getCurrentPages().length - 1].getlocaj()
}
}, 1000)
}
})
第三种
.wxml
.js
Page({
data: {
hospitalData:[{
"id": 1,
"name": "永州市中心医院",
"longitude": "111.62852107566833",
"latitude": "26.42142999357519"
},
{
"id": 2,
"name": "永州市中医院",
"longitude": "113.5972679762268",
"latitude": "26.44470581245983"
}
],
centerX: 0.0,
centerY: 0.0,
//可能我标识的地点和你所在区域比较远，缩放比例建议5;
scale: 15,
markers: [],
controls: [{
id: 1,
iconPath: '/img/pointCircle.png',
position: {
left: 0,
top: 10,
width: 40,
height: 40
},
clickable: true
}]
},
onReady: function(e) {
// 使用 wx.createMapContext 获取 map 上下文
this.mapCtx = wx.createMapContext('myMap')
},
onLoad: function() {
console.log('地图定位！')
let that = this
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success: (res) => {
let latitude = res.latitude;
let longitude = res.longitude;
let marker = this.createMarker(res);
this.setData({
centerX: longitude,
centerY: latitude,
markers: this.getHospitalMarkers()
})
}
});
},
/**
* 标示点移动触发
*/
regionchange(e) {
console.log(e.type)
},
/**
* 点击标识点触发
*/
markertap(e) {
console.log(e)
},
/**
* control控件点击时间
*/
controltap(e) {
console.log(e.controlId)
this.moveToLocation()
},
/**
* 获取医院标识
*/
getHospitalMarkers() {
let markers = [];
for (let item of this.data.hospitalData) {
let marker = this.createMarker(item);
markers.push(marker)
}
return markers;
},
/**
* 移动到自己位置
*/
moveToLocation: function() {
let mpCtx = wx.createMapContext("map");
mpCtx.moveToLocation();
},
/**
* 还有地图标识，可以在name上面动手
*/
createMarker(point) {
let latitude = point.latitude;
let longitude = point.longitude;
let marker = {
iconPath: "/img/location.png",
id: point.id || 0,
name: point.name || '',
latitude: latitude,
longitude: longitude,
width: 40,
height: 48
};
return marker;
}
})
第四种
.wxml
发表博客地址
.js
Page({
data: {
},
onLoad: function (options) {
},
insoc:function(e){
const name = "深圳省"
const latitude = 22.72174
const longitude = 114.06031
wx.openLocation({
name,
latitude,
longitude,
scale: 18
})
},
})
有什么问题欢迎评论留言，我会及时回复你的。