小程序地图定位

男娘i 2022-05-22 05:07 161阅读 0赞

##   https://blog.csdn.net/weixin\_42120669/article/details/80897374          ##

# 上面这个链接可以获取地址和天气！！！ #

##     ##

## ![70][]![70 1][]![70 2][] ##

## //这些代码是借鉴了别人的，我只改了一小部分。里面有的东西还是可以去掉的！ ##

##  大哥的链接为  ##

#  **https://blog.csdn.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)

// \}

)

****

< 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

\})

[70]: https://img-blog.csdn.net/20180625100327758?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyMDY2OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20180625100338574?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyMDY2OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: /images/20220522/1b9436c97597439abbf723425ca4f887.png