小程序 地图定位
https://blog.****.net/weixin_42120669/article/details/80897374
上面这个链接可以获取地址和天气！！！
//这些代码是借鉴了别人的，我只改了一小部分。里面有的东西还是可以去掉的！
大哥的链接为
https://blog.****.net/yangyang031213/article/details/79459675
// .js js文件
//获取应用实例
const app = getApp()
Page
(
{
data:
{
latitude: [], //纬度
longitude: [], //经度
markers: [],
mapControls: //地图控件
[
{ //定位
id: 0,
position: { //相对定位
left: app.globalData.scWidth * 0.03,
top: app.globalData.scHeight * 0.9,
width: app.globalData.scWidth * 0.1
},
iconPath: "../../imgs/ic_position.png",
clickable: true
},
{ //我的
id: 1,
position: { //相对定位
left: app.globalData.scWidth * 0.87,
top: app.globalData.scHeight * 0.9,
width: app.globalData.scWidth * 0.1
},
iconPath: "../../imgs/ic_location.png",
clickable: true
},
]
},
getLocation: function (e) { //获取当前位置，并移动地图到当前位置
var that = this
wx.getLocation({
type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
success: function (res) {
console.log(res) //打印经纬度
that.setData({
longitude: res.longitude,
latitude: res.latitude
})
}
})
this.myMapCtx.moveToLocation()
},
onLoad: function () { //加载
this.myMapCtx = wx.createMapContext("myMap", this)
this.getLocation()
},
// 地图中心
// regionChanged: function (e) { //地图视野改变
// if (e.type == "end") {
// var that = this
// // this.myMapCtx.getCenterLocation({ //获取中心点的经纬度
// // success: function (res) {
// // var mark = that.data.markers
// // var id = that.data.markers.length
// // var width = app.globalData.scWidth * 0.1
// // mark.push({ //放到标记里边
// // longitude: res.longitude, //经纬度
// // latitude: res.latitude,
// // iconPath: "/image/marker.png", //图标,相对于小程序根目录的路径
// // id: id,
// // width: width,
// // height: width,
// // title: "what is this?",
// // callout: { //气泡
// // content: "what is this?",
// // color: "lightgray",
// // fontSize: 15,
// // borderRadius: 5,
// // bgColor: "white",
// // display: "ALWAYS", //显示模式
// // padding: 5,
// // textAlign: "center"
// // },
// // label: { //标记下表的文本标签
// // content: "位置标记",
// // color: "lightgray",
// // textAlign: "center",
// // fontSize: 15
// // }
// // })
// // that.setData({ //必须使用setData设置，不然会出现数据跟新了，但是地图视图不跟新的情况
// // "markers": mark
// // })
// // }
// // })
// }
// },
scanCode: function () { //扫描二维码
wx.scanCode({
success(res) { //扫码成功
wx.showModal({ //扫码结果
title: "扫码结果",
content: res.result,
})
}
})
},
// navigateToPersonal:function(){
// wx.navigateTo({
// url: "/pages/personal/personal"
// })
// },
mapControlTap: function (e) { //地图控件点击
switch (e.controlId) {
case 0://定位
this.getLocation()
break;
case 2://扫码
this.scanCode()
break;
case 3://我的
this.navigateToPersonal()
break;
}
},
mapTap: function (e) { //地图点击
//console.log(e)
},
// mapMarker:function(e){
// console.log("点击了标记：" + e.markerId)
// }
}
)
<!--.wxml .wxml文件 -->
<map
id="myMap"
style="width:100vw;height:100vh"
latitude="{{latitude}}"
longitude="{{longitude}}"
controls="{{mapControls}}"
markers="{{markers}}"
bindcontroltap="mapControlTap"
bindregionchange="regionChanged"
bindtap="mapTap"
bindmarkertap="mapMarker"
show-location
>
</map>
//app.js app.js 文件
App({
onLaunch: function () {
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
console.log(this.globalData)
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
var that = this
//获取屏幕尺寸，放到全局结构中
wx.getSystemInfo({
success: function (res) {
that.globalData.scHeight = res.windowHeight
that.globalData.scWidth = res.windowWidth
},
})
console.log(this.globalData.scWidth)
console.log(this.globalData.scHeight)
},
globalData: {
userInfo: null,
scWidth: 0, //全局的屏幕尺寸，已经去掉了上边的标题栏
scHeight: 0
}
})