微信小程序 地图定位简单实例

微信小程序 前端之家
前端之家收集整理的这篇文章主要介绍了微信小程序 地图定位简单实例，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

微信小程序开发地图定位。

微信小程序 刚刚公布没多久，自己学习一下内容，以便以后的开发，想落后别人，这里做了一个简单的小程序示例，大家可以参考下

要求要完成的功能：

1.要完成的要点是城市定位。

2.就是切换城市。

首页我们先参照微信小程序开放的官方文档找到：

在这里我们可以找到”当前位置经纬度“

获取经纬度 　　　　}) 　　　　} 　　}) },

//将经纬度转换成城市名和街道地址，参见百度地图接口文档：http://developer.baidu.com/map/index.PHP?title=webapi/guide/webservice-geocoding

这里用到微信小程序的文档里面有发起的是https请求

这里面有案例我就不多讲解：

上面的代码打印出来的数据是：

renderReverse&&renderReverse( {"status":0, "result": {"location":{"lng":114.05786799999997,"lat":22.543098999645019}, "formatted_address":"广东省深圳市福田区福华一路138-5", "business":"购物公园,新洲,香蜜湖", "addressComponent":{"country":"中国","country_code":0,"province":"广东省","city":"深圳市","district":"福田区","adcode":"440304","street":"福华一路","street_number":"138-5","direction":"附近","distance":"18"},"pois":[{"addr":"深圳市福田区福华一路138号","cp":" ","direction":"北","distance":"51","name":"深圳国际商会大厦","poiType":"房地产","point":{"x":114.05776971981998,"y":22.54267931627966},"tag":"房地产;写字楼","tel":"","uid":"9ed8fd9034cebefaeb12e42c","zip":""},{"addr":"福华一路98号","direction":"南","distance":"60","name":"卓越大厦","point":{"x":114.05777870287507,"y":22.543597255274773},"uid":"c7fb04bd8fb44d68fb0cad85",{"addr":"深圳市福田区","direction":"西北","distance":"236","name":"购物公园","poiType":"购物","point":{"x":114.05972802583108,"y":22.54214523984097},"tag":"购物;购物中心","uid":"0e082dd9db526730aecb66f9",{"addr":"福华一路南侧","distance":"123","name":"投行大厦","point":{"x":114.05829972007068,"uid":"b3a40a67bedbe7782fb17ea0",{"addr":"深圳福田区国际商会大厦A座","direction":"东北","distance":"77","name":"深圳国际商会大厦A座","point":{"x":114.05750022816707,"y":22.54255414230188},"uid":"108ed554a3f5358229fc4892",{"addr":"福华一路88号","direction":"西","distance":"131","name":"中心商务大厦","point":{"x":114.05899141531315,"y":22.54275442061121},"uid":"cac5fc76d0304d8e2db96d8b",{"addr":"深圳市福田区福华一路88号中心商务大厦首层","distance":"134","name":"招商银行(中央商务支行)","poiType":"金融","point":{"x":114.05900039836824,"y":22.542704351061439},"tag":"金融;银行","uid":"c7fb04bd3d531f6bfa0cadef",{"addr":"深圳福田中心区福华一路28号(投资大厦旁)","distance":"229","name":"深圳马哥孛罗好日子酒店","poiType":"酒店","point":{"x":114.05991666998811,"y":22.54288793932078},"tag":"酒店;星级酒店","uid":"0523a14106ceb804b23c8142",{"addr":"福华一路208号购物公园B1层","distance":"234","name":"永旺超市(购物公园店)","point":{"x":114.05971904277598,"y":22.542170274720726},"tag":"购物;超市","uid":"9884a864bb2c032af8dc85d1",{"addr":"深圳市福田区深南大道4103号兴业银行大厦17-18层","direction":"西南","distance":"158","name":"深圳市公证处(一号路)","poiType":"政府机构","point":{"x":114.05857819477869,"y":22.54424815372944},"tag":"政府机构;公检法机构","uid":"765bf8daf4efd08cb45f1ec0","zip":""}],"poiRegions":[],"sematic_description":"深圳国际商会大厦北51米","cityCode":340}})

你找到city传进去就可以了，

第二步切换城市：

在次找到我们的微信小程序的开发文档里面有

滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器。

普通选择器：mode = selector

属性名

时间选择器：mode = time

类型 默认值 说明
属性名

日期选择器：mode = date

类型 默认值 说明
属性名

注意：开发工具暂时只支持mode = selector。

示例代码：

<view class="section">
<view class="section__title">日期选择器
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
<view class="picker">
当前选择: {{date}}

Page({ data: { array: ['美国','中国','巴西','日本'],index: 0,date: '2016-09-01',time: '12:01' },bindPickerChange: function(e) { console.log('picker发送选择改变，携带值为',e.detail.value) this.setData({ index: e.detail.value }) },bindDateChange: function(e) { this.setData({ date: e.detail.value }) },bindTimeChange: function(e) { this.setData({ time: e.detail.value }) } })

　　 {{array[index]}} 　　 　　 　　

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

原文链接：https://www.f2er.com/weapp/45174.html
地图定位地图定位实例代码地图定位详解微信小程序

猜你在找的微信小程序相关文章

[小程序]微信小程序获取input并发送网络请求
1. 获取输入框数据wxml中的input上增加bindinput属性，和方法值在js部分定义与之对应的方法...
[小程序]微信小程序获取位置展示地图并标注信息
1.map组件的高度如果想要铺满屏幕，要是使用height:100vh样式2.获取位置要在app.json中标明...
QQ小程序支付
QQ小程序支付 Java后端 同学折腾QQ小程序的支付折腾了好几天，没有完成统一下单，因为我做...
.NET之微信小程序获取用户UnionID
前言： 在实际项目开发中我们经常会遇到账号统一的问题，如何在不同端或者是不同的登录方式...
微信小程序picker组件关于objectArray数据类型绑定
一、前言： 我发现很多的同学都在抱怨说微信小程序的picker的mode = selector/mode = mult...
uni-app微信小程序开发之引入腾讯视频小程序播放插件
登录微信小程序管理后台添加腾讯视频播放插件： 正式开始使用腾讯视频小程序插件之前需先在...
微信小程序开发笔记
前言： 因为前段时间一直在做关于微信小程序方面的项目，作为一名后端的攻城狮而言做一些简...
微信小程序之onLaunch与onload异步问题
所述问题： 前端时间开发了一个微信小程序商城项目，因为这个项目我们的需求是进入小程序就...
微信小程序开发之多图片上传+.NET WebAPI后端服务保存图片资源
前言： 最近开发的一个微信小程序项目需要做一个同时选中三张（或者是多张）图片一起上传到...
小程序修改原生标题栏返回键的方法
在开发的过程中，我遇到过一个需求，需要将4到5个页面合为一个，在页面里制作切换和返回方...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作
类型 默认值 说明