微信小程序 开发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文件夹里面,小图标的路径引用正确就可以显示出来。
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
# 微信小程序
# 开发MAP
# 小程序
# map
# 微信小程序 高德地图SDK详解及简单实例(源码下载)
# 微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
# 微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
# 微信小程序使用map组件实现解析经纬度功能示例
# 微信小程序使用map组件实现路线规划功能示例
# 微信小程序地图(map)组件点击(tap)获取经纬度的方法
# 微信小程序出现wx.getLocation再次授权问题的解决方法分析
# 微信小程序 location API接口详解及实例代码
# 微信小程序 location API实例详解
# 微信小程序开发之map地图实现教程
# 微信小程序 地图(map)实例详解
# 微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
# 小图标
# 就来
# 写好
# 第三步
# 自己的
# 小伙伴们
# 我在
# 只需
# 要把
# 希望能
# 请各位
# 要来
# 谢谢大家
# 可以根据
# 并把
# 第二步
# 创建一个
# 就可以
# 来写
# 程序开发
相关文章:
h5网站制作工具有哪些,h5页面制作工具有哪些?
建站之星代理如何获取技术支持?
再谈Python中的字符串与字符编码(推荐)
电影网站制作价格表,那些提供免费电影的网站,他们是怎么盈利的?
php条件判断怎么写_ifelse和switchcase的使用区别【对比】
齐河建站公司:营销型网站建设与SEO优化双核驱动策略
最好的网站制作公司,网购哪个网站口碑最好,推荐几个?谢谢?
学校免费自助建站系统:智能生成+拖拽设计+多端适配
建站之星安装后如何自定义网站颜色与字体?
定制建站策划方案_专业建站与网站建设方案一站式指南
定制建站是什么?如何实现个性化需求?
如何用已有域名快速搭建网站?
建站为何优先选择香港服务器?
建站之星×万网:智能建站系统+自助建站平台一键生成
建站之星安装后界面空白如何解决?
Python多线程使用规范_线程安全解析【教程】
建设网站制作价格,怎样建立自己的公司网站?
家庭建站与云服务器建站,如何选择更优?
,石家庄四十八中学官网?
制作公司内部网站有哪些,内网如何建网站?
建站之星上传入口如何快速找到?
简易网站制作视频教程,使用记事本编写一个简单的网页html文件?
如何快速搭建支持数据库操作的智能建站平台?
建站之星后台密码遗忘?如何快速找回?
如何设计高效校园网站?
制作旅游网站html,怎样注册旅游网站?
如何在IIS管理器中快速创建并配置网站?
宝塔建站教程:一键部署配置流程与SEO优化实战指南
如何快速搭建二级域名独立网站?
如何通过主机屋免费建站教程十分钟搭建网站?
网站制作多少钱一个,建一个论坛网站大约需要多少钱?
油猴 教程,油猴搜脚本为什么会网页无法显示?
如何选择PHP开源工具快速搭建网站?
,网站推广常用方法?
建站之星代理商如何保障技术支持与售后服务?
如何快速生成ASP一键建站模板并优化安全性?
宝塔新建站点报错如何解决?
c++ stringstream用法详解_c++字符串与数字转换利器
如何撰写建站申请书?关键要点有哪些?
企业在线网站设计制作流程,想建设一个属于自己的企业网站,该如何去做?
如何在IIS7上新建站点并设置安全权限?
陕西网站制作公司有哪些,陕西凌云电器有限公司官网?
湖南网站制作公司,湖南上善若水科技有限公司做什么的?
微信推文制作网站有哪些,怎么做微信推文,急?
官网网站制作腾讯审核要多久,联想路由器newifi官网
如何确保FTP站点访问权限与数据传输安全?
枣阳网站制作,阳新火车站打的到仙岛湖多少钱?
建站之星如何一键生成手机站?
如何零基础开发自助建站系统?完整教程解析
北京网站制作的公司有哪些,北京白云观官方网站?
*请认真填写需求信息,我们会在24小时内与您取得联系。