微信小程序开发MAP(地图)实例详解 微信小程序开发MAP(地图)实例详解是指在微信小程序中开发地图实例的详细指导。微信小程序开发MAP(地图)实例详解主要介绍了微信小程序中开发MAP(地图)的相关资料,需要的朋友可以参考以下内容。 一、创建项目 在微信小程序中创建MAP(地图)实例之前,需要首先创建项目。创建项目后,需要起项目名和项目地址。在本例中,我们以index为文件名。 二、WXML文件代码 在创建项目后,需要编写WXML文件代码。WXML文件代码如下所示: ``` <map id="map4select" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" scale="20" style="width:{{map_width}}px;height:{{map_height}}px" bindregionchange="regionchange" controls="{{controls}}" > </map> ``` 这个WXML文件代码用于创建MAP(地图)控件,其中包括了地图的经度、纬度、标记、缩放级别、宽度和高度等属性。 三、index.js文件代码 在编写WXML文件代码后,需要编写index.js文件代码。index.js文件代码如下所示: ``` var app = getApp() Page({ data: { map_width: 380, map_height: 380 }, onLoad: function (options) { console.log(options.schedule_id); var that = this; // 获取定位,并把位置标示出来 that.setData({ longitude: 113.324520, latitude: 23.099994, markers: [{ id: 0, iconPath: "../imgs/ic_position.png", longitude: 113.324520, latitude: 23.099994, width: 30, height: 30 }] }) //set the width and height wx.getSystemInfo({ success: function (res) { console.log(res.windowWidth); that.setData({ map_width: res.windowWidth, map_height: res.windowWidth, controls: [{ id: 1, iconPath: '../imgs/ic_location.png', position: { left: res.windowWidth / 2 - 8, top: res.windowWidth / 2 - 16, width: 30, height: 30 }, clickable: true }] }) } }) }, //获取中间点的经纬度,并mark出来 getLngLat: function () { var that = this; this.mapCtx = wx.createMapContext("map4select"); this.mapCtx.getCenterLocation({ success: function (res) { that.setData({ longitude: 113.324520, latitude: 23.099994, markers: [{ id: 0, iconPath: "../imgs/ic_position.png", longitude: 113.324520, latitude: 23.099994, width: 30, height: 30 }] }) } }) }, regionchange(e) { // 地图发生变化的时候,获取中间点,也就是用户选择的位置 if (e.type == 'end') { this.getLngLat() } }, markertap(e) { console.log(e) } }) ``` 这个index.js文件代码用于处理地图的相关逻辑,包括获取用户当前位置、设置地图的宽度和高度、mark出用户选择的位置等。 微信小程序开发MAP(地图)实例详解需要贯穿整个开发过程,包括创建项目、编写WXML文件代码、编写index.js文件代码等步骤。在开发过程中,需要注意地图的相关属性和方法,以便更好地实现地图实例的开发。
















- 粉丝: 2
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


最新资源
- 第二章-汉字信息在计算机内部的表示省名师优质课赛课获奖课件市赛课百校联赛优质课一等奖课件(1).ppt
- 石首市新厂镇小学教育装备与信息化应用典型案例(1).docx
- 【推荐下载】Xilinx扩充嵌入式视觉和工业物联网产品系列(1).pdf
- 黑马程序员javaweb教程:HttpServletRequest获取参数(1).doc
- linux介绍(1).docx
- Oracle数据库系统综合设计实验试验参考指导书.doc
- 单片机课程设计-节日彩灯控制器设计(1)(1).doc
- 会计实务:巧用查账软件找出人为调整痕迹(1).doc
- 数据加密技术在计算机网络通信安全中的应用(1).docx
- HTML基础知识点继承(1).ppt
- 浅析高中生提高计算机能力的方法(1).docx
- OEM合作协议书(软件产品)(正式版)(1).docx
- 分析电气自动化控制设备故障预防与检修技术(1).docx
- 高校成绩管理系统数据库设计与实现实验报告书--本科毕业设计论文(1).doc
- 新版数据库专业课程设计题目.doc
- 软件开发设计外文翻译--软件开发概念和设计方法(1).doc


