微信小程序 开发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_15_作用域分配与变量访问规则,再送个闭包
Oct 20 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
vue图片加载与显示默认图片实例代码
Mar 16 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 Javascript
js实现数组和对象的深浅拷贝
Sep 30 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
vue实现全匹配搜索列表内容
Sep 26 Javascript
js实现简易计算器功能
Oct 18 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 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
php长字符串定义方法
2012/07/12 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
PHP中COOKIES使用示例
2015/07/26 PHP
php工具型代码之印章抠图
2018/07/18 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
FireFox JavaScript全局Event对象
2009/06/14 Javascript
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
vue之延时刷新实例
2019/11/14 Javascript
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
Python深入学习之闭包
2014/08/31 Python
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
python SocketServer源码深入解读
2019/09/17 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
python开发入门——set的使用
2020/09/03 Python
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
师范大学应届生求职信
2013/11/21 职场文书
品牌转让协议书
2014/08/20 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
财务工作失职检讨书
2014/11/21 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
行政诉讼答辩状
2015/05/21 职场文书
护理工作心得体会
2016/01/22 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
Python中threading库实现线程锁与释放锁
2021/05/17 Python