微信小程序地图功能实现

1. app.json 增加测试面板我学Unity的也不知道这个专业名词叫啥,恩,就叫面板吧

{"pages":["pages/index/index","pages/test/test","pages/Map/Map","pages/miniMap/miniMap","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "ClassTest","navigationBarTextStyle":"white"},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页"},{"pagePath": "pages/test/test","text": "测试页"},{"pagePath": "pages/Map/Map","text": "地图"},{"pagePath": "pages/miniMap/miniMap","text": "腾讯地图"},{"pagePath": "pages/logs/logs","text": "日志"}]}
}

2.随便找三张 icon 导进去, 如果命名不是这个的,到代码里改下路径

3. miniMap.wxml

<map
id="map"
longitude="{{longitude}}"
latitude="{{latitude}}"
scale="{{scale}}"
controls="{{controls}}"
bindcontroltap="controltap"
markers="{{markers}}"
circles="{{circles}}"
bindmarkertap="markertap"
polyline="{{polyline}}"
bindregionchange="regionchange"
show-location style="width: 100%; height: {{view.Height}}px;">
</map>
<!-- polyline 连线  show-location 显示带有方向的标记点-->
<!-- controls 和 bindcontroltap 配合着使用 -->

4.miniMap.js 注释都在代码里

Page({data: {Height: 0,scale: 17,latitude: "",longitude: "",markers: [],// 初始化 + - 图片的位置controls: [{id: 1,iconPath: 'assests/imgs/jian.png',position: {left: 280,top: 100 - 50,width: 40,height: 40},clickable: true},{id: 2,iconPath: 'assests/imgs/jia.png',position: {left: 320,top: 100 - 50,width: 40,height: 40},clickable: true}],circles: []},// 加载的时候调用 微信地图的 api 获取需要的信息onLoad: function () {var _this = this;wx.getSystemInfo({success: function (res) {//设置map高度，根据当前设备宽高满屏显示_this.setData({view: {Height: res.windowHeight}})}})wx.getLocation({type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标success: function (res) {_this.setData({latitude: res.latitude,longitude: res.longitude,markers: [{id: "1",latitude: res.latitude,longitude: res.longitude,width: 30,height: 30,// iconPath: "assests/imgs/my.png",title: "我在这里"}],: [{latitude: res.latitude,longitude: res.longitude,color: '#FF0000DD',fillColor: '#7cb5ec88',radius: 60,strokeWidth: 1}]})}})},
// 视野发生变化时触发regionchange(e) {console.log("regionchange===" + e.type)},//点击merkers触发markertap(e) {console.log(e.markerId)wx.showActionSheet({itemList: ["A"],success: function (res) {console.log(res.tapIndex)},fail: function (res) {console.log(res.errMsg)}})},//点击缩放按钮 控件 时触发 动态请求数据controltap(e) {var that = this;console.log("scale===" + this.data.scale)// 这个是怎么调的 e.controlId?if (e.controlId === 1) {// if (this.data.scale === 13) {that.setData({scale: --this.data.scale})// }} else {//  if (this.data.scale !== 13) {that.setData({scale: ++this.data.scale})// }}},})

5.效果图如下:

微信小程序地图功能实现相关推荐

微信小程序地图功能的实现 map
微信小程序地图功能的实现 map wxml部分地图标签 wxss js 这次项目有个功能是地图以选项卡方式可以选择进行不同位置展示实现方法就是将地图和tab选项卡结合选项卡刚开始我套了之前的滑动 ...
微信小程序地图导航源码、地图导航小程序源码
最近研究了微信小程序地图功能,编写了地图导航功能的Demo(文章尾部附有下载地址). 1.用户定位功能:用户同意小程序获取位置权限,并定位用户当前位置: 2.选择目的地,并开始自动导航功能 2.选择交 ...
微信小程序自带地图_微信小程序开发之之地图功能（map）
本文将带你了解微信小程序开发之之地图功能(map),希望本文对大家学微信有所帮助. 主要介绍微信小程序中的地图模块相关功能.基本使用地图组件使用起来也很简单..wxml 1212参数列表及说明如下:除 ...
【小程序地图】uniapp开发微信小程序，显示地图功能，且点击后打开高德或腾讯地图。
最开始遇到地图这块的时候,想的比较复杂.想到是不是需要引用高德或者百度地图api 之类的. 其实完全没必要,使用uniapp自带的方法 uni.openLocation 即可. 话不多说,完整代码.注 ...
微信小程序----map组件实现（获取定位城市天气或者指定城市天气数据）
效果图实现原理采用高德地图微信小程序开发API(getWeather),如果 city 属性的值为空(或者没有city属性),默认返回定位位置的天气数据:如果 city 不为空,则返回 city ...
开发微信小程序，100 万开发者都离不开它
一种比较笼统的说法是,过去二十年,互联网彻底改变了人们的生活方式.但对这种影响人类吃穿住行的变革,再具体一点的说法是,"软件吞噬世界",互联网的背后是社交.电商.游戏.短视频等一个 ...
微信小程序----手势锁详解
设计思路流程图 1.全局常量 constructor(page,opts){// 初始化全局常量数据this.page = page;this.width = opts.width || 300;th ...
微信小程序----全局变量
全局变量的作用在微信小程序开发中,会遇到一个很实际的应用场景,就是一个变量会在多个页面进行使用. 例如: 1. 在微信小程序开发中使用高德地图的微信小程序开发,其中key值就需要在多个页面使用: 2 ...
腾讯位置服务+微信小程序，一文告诉你程序员为什么不会坐过站！
引言 1.1「腾讯位置服务」是什么? 立足生态,连接未来腾讯位置服务平台依托庞大的数据生态,以定位.地图展示.地点搜索.路线规划.导航.室内图.海外图等位置服务能力和LBS大数据能力为基础,面向开发 ...

微信小程序地图功能实现

微信小程序地图功能实现相关推荐

最新文章

热门文章

微信小程序 地图功能实现

微信小程序 地图功能实现相关推荐

最新文章

热门文章

微信小程序地图功能实现

微信小程序地图功能实现相关推荐