微信小程序 开发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进行拖拽
Jul 20 Javascript
各种效果的jquery ui(接口)介绍
Sep 17 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
js中的布尔运算符使用介绍
Nov 20 Javascript
JavaScript中的正则表达式简明总结
Apr 04 Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
Express进阶之log4js实用入门指南
Feb 10 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
vue 授权获取微信openId操作
Nov 13 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实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
jquery中实现简单的tabs插件功能的代码
2011/03/02 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
js select下拉联动 更具级联性!
2020/04/17 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
Python GAE、Django导出Excel的方法
2008/11/24 Python
python列表去重的二种方法
2014/02/14 Python
Python运用于数据分析的简单教程
2015/03/27 Python
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
Python实现约瑟夫环问题的方法
2016/05/03 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
Python下载的11种姿势(小结)
2020/11/18 Python
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
巴西在线鞋店:Shoestock
2017/10/28 全球购物
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
构造器Constructor是否可被override?
2013/08/06 面试题
电大毕业生自我鉴定
2013/11/10 职场文书
车工岗位职责
2013/11/26 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
单位绩效考核方案
2014/05/11 职场文书
校园广播稿100字
2014/10/06 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS