微信小程序实现腾讯地图

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%;

}

相关推荐
ace_TiAmo1 小时前
React8+taro开发微信小程序,实现lottie动画
微信小程序·小程序·react·taro
老李不敲代码2 小时前
榕壹云在线商城系统:基于THinkPHP+ Mysql+UniApp全端适配、高效部署的电商解决方案
mysql·微信小程序·小程序·uni-app·软件需求
专业系统开发老赵4 小时前
小程序租赁系统源码功能分享
小程序
小咕聊编程6 小时前
【含文档+PPT+源码】基于微信小程序的卫生院预约挂号管理系统的设计与实现
微信小程序·小程序
夜猫的兔子8 小时前
微信小程序中使用ECharts 并且动态设置数据
微信小程序·小程序·echarts
爱分享的淘金达人11 小时前
25年河南事业单位报名详细流程图解
java·python·小程序·tomcat·流程图
2305_7978820912 小时前
美食推荐小程序
大数据·微信小程序·小程序
peachSoda71 天前
uniapp小程序生成海报/图片并保存分享
小程序·uni-app
说私域1 天前
社交电商引流策略中的让利行为及其影响——基于开源AI智能名片、链动2+1模式与S2B2C商城小程序的分析
人工智能·小程序·开源·产品运营·零售
罗政1 天前
AI小程序+SpringAI+管理后台+源码+支持动态添加大模型+支持动态添加AI应用
人工智能·小程序