微信小程序 开发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 相关文章推荐
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
关于vue-resource报错450的解决方案
Jul 24 Javascript
layui实现根据table数据判断按钮显示情况的方法
Sep 26 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 Javascript
jQuery实现视频展示效果
May 30 jQuery
JavaScript用document.write()输出换行的示例代码
Nov 26 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&amp;&amp;mysql)二
2006/10/09 PHP
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
vue 简单自动补全的输入框的示例
2018/03/12 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
python实现k-means聚类算法
2018/02/23 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
Django渲染Markdown文章目录的方法示例
2019/01/02 Python
Python qrcode 生成一个二维码的实例详解
2020/02/12 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
10款最佳Python开发工具推荐,每一款都是神器
2020/10/15 Python
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
物业管理求职自荐信
2013/09/25 职场文书
区域销售经理岗位职责
2013/12/10 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书