微信小程序 开发MAP（地图）实例详解

微信小程序开发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文件代码等步骤。在开发过程中，需要注意地图的相关属性和方法，以便更好地实现地图实例的开发。