微信小程序实现腾讯地图

1、// map.js

Page({

data: {

latitude: 0, // 初始纬度值

longitude: 0, // 初始经度值

markers: []

},

onReady: function (e) {

this.getLocation(); // 主动获取用户地理位置信息

},

getLocation: function () {

wx.getLocation({

type: 'gcj02',

success: (res) => {

this.setData({

latitude: res.latitude,

longitude: res.longitude,

markers: [{

id: 0,

latitude: res.latitude,

longitude: res.longitude,

title: '当前位置'

}]

});

this.mapCtx = wx.createMapContext('myMap');

this.mapCtx.moveToLocation(); // 移动地图到当前位置

},

fail: (error) => {

console.log('获取地理位置失败', error);

}

});

},

navigateTo: function () {

wx.openLocation({

latitude: this.data.latitude,

longitude: this.data.longitude,

name: '当前位置',

scale: 18

});

}

});

2、<!-- map.wxml -->

<view>

<map id="MyMap" style="width: 100%; height: 300px;"></map>

<button bindtap="navigateTo" type="primary">导航到目的地</button>

</view>

3、/* pages/map/map.wxss */

.page{

height: 100%;

}

相关推荐
小白_ysf3 小时前
uniapp 开发微信小程序,获取经纬度并且转化详细地址(单独封装版本)
微信小程序·uni-app
weixin_lynhgworld8 小时前
剧本杀小程序系统开发:构建剧本杀社交新生态
小程序
说私域8 小时前
基于定制开发开源 AI 智能名片 S2B2C 商城小程序的热点与人工下发策略研究
人工智能·小程序
weixin_lynhgworld8 小时前
陪诊小程序系统开发:让就医不再是一件难事
小程序
是一碗螺丝粉1 天前
拯救你的app/小程序审核!一套完美避开审核封禁的URL黑名单机制
前端·javascript·微信小程序
weixin_lynhgworld1 天前
盲盒抽谷机小程序系统开发:从0到1的完整方法论
小程序
weixin_lynhgworld1 天前
短剧小程序系统开发:赋能创作者,推动短剧艺术创新发展
小程序
一匹电信狗1 天前
【C++】异常详解(万字解读)
服务器·c++·算法·leetcode·小程序·stl·visual studio
我叫黑大帅1 天前
微信小程序分包:告别加载慢,像拆快递一样简单!
前端·微信小程序
两个月菜鸟1 天前
vue+微信小程序 五角星
前端·vue.js·微信小程序