符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
本篇内容主要讲解“微信小程序怎么实现在地图上显示自己的位置”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序怎么实现在地图上显示自己的位置”吧!
成都创新互联专注于代县企业网站建设,成都响应式网站建设公司,商城网站建设。代县网站建设公司,为代县等地区提供建站服务。全流程按需设计,专业设计,全程项目跟踪,成都创新互联专业和态度为您提供的服务
画面截图
index.wxml
内容很简单,画面上布置了一个map对象和text对象。
其中map对象分别指定了longitude,latitude和markers。相信你还记得:在双重花括号{{}}包围的部分是变量,它们的值在对应页面的js文件中定义。
index.js
//index.js
//获取应用实例
const app = getApp()
Page({
data: { //数据定义
longitude: 0, // 对应wxml文件中的longitude变量
latitude: 0, // 对应wxml文件中的latitude变量
location: ',', // 对应wxml文件中的location变量
markers: [{ // 对应wxml文件中的markers变量
id: 0,
latitude: 0,
longitude: 0,
width: 50,
height: 50
}],
},
onShow: function() {
var that = this
wx.getLocation({
type: 'gcj02', // 返回 可以 用于 wx. openLocation 的 经纬度
success: function (res) {
var latitude = res.latitude
var longitude = res.longitude
console.log(res)
var location = latitude.toFixed(2) + ',' + longitude.toFixed(2)
that.setData({ longitude: longitude,
latitude: latitude,
location: location,
markers: [{latitude: latitude,
longitude: longitude,
}]
});
}
})
},
})
这段代码实现了生命周期函数onShow,它的核心是ws.getLocation,它的输出通过传递的success:function来处理。处理的内容很简单,就是通过setData函数设定到各个数据上。
到此,相信大家对“微信小程序怎么实现在地图上显示自己的位置”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!