微信小程序 开发MAP(地图)实例详解


Posted in Javascript onJune 27, 2017

微信小程序 开发MAP(地图)实例详解

在创建MAP(地图)前,请各位小伙伴们认真的去了解微信小程序开发的说明。

https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html#map

了解完MAP(地图)里的属性之后,接下来我们就来创建一个简单的MAP(地图)控件。

第一步:肯定是创建项目、起项目名、项目地址

PS:我这里以index的文件为名

第二步:我们来写 index.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文件的代码写好之后,就要来进行第三步了。

第三步:写 index.js 文件的代码

var app = getApp()

Page({
 data: {
 map_width: 380
 , map_height: 380
 }
 //show current position
 , 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
 // 动态设置map的宽和高
 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 和 index.wxml 两个文件的代码已经写好,那么我们就来页面上看看效果。

PS:“../imgs/ic_position.png” 和 “../imgs/ic_location.png” 是我在项目里创建的一个名叫imgs文件夹里面的两个定位小图标,各位小伙伴们可以根据自己的需求改换小图标,只需要把小图标放进imgs文件夹里面,小图标的路径引用正确就可以显示出来。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Javascript中的常见排序算法
Mar 27 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 Javascript
jquery中change()用法实例分析
Feb 06 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
May 25 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
微信小程序--获取用户地理位置名称(无须用户授权)的方法
Apr 29 Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 Javascript
微信小程序商品到详情的实现
Jun 27 #Javascript
微信小程序的分类页面制作
Jun 27 #Javascript
JS实现批量上传文件并显示进度功能
Jun 27 #Javascript
angular过滤器实现排序功能
Jun 27 #Javascript
详解AngularJS ng-class样式切换
Jun 27 #Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 #jQuery
JavaScript事件方法(实例讲解)
Jun 27 #Javascript
You might like
拼音码表的生成
2006/10/09 PHP
处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
Laravel 5框架学习之向视图传送数据
2015/04/08 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
php正则修正符用法实例详解
2016/12/29 PHP
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python重试装饰器示例
2014/02/11 Python
Python中多线程thread与threading的实现方法
2014/08/18 Python
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
python dict 相同key 合并value的实例
2019/01/21 Python
django celery redis使用具体实践
2019/04/08 Python
Django stark组件使用及原理详解
2019/08/22 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
Html5自定义字体解决方法
2019/10/09 HTML / CSS
职高毕业生自我鉴定
2013/10/21 职场文书
应届生自我鉴定
2013/12/11 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
2015年化妆品销售工作总结
2015/05/11 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
SQL Server内存机制浅探
2022/04/06 SQL Server
Python中re模块的元字符使用小结
2022/04/07 Python