小程序开发API之地图wx.createMapContext及MapContext 实例

最新推荐文章于 2024-06-20 08:48:30 发布
最新推荐文章于 2024-06-20 08:48:30 发布
阅读量1.6w 收藏 29
点赞数 11
分类专栏： ONE PIECE--小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JackJia2015/article/details/86700861
版权

效果展示


在这里插入图片描述

wx.createMapContext(string mapId, Object this)

创建 map 上下文 MapContext 对象。
参数 string mapId
组件的 id
Object this
在自定义组件下，当前组件实例的this，以操作组件内 组件
返回值
MapContext

MapContext

MapContext 实例，可通过 wx.createMapContext 获取。
mapContext 通过 id 跟一个 组件绑定，操作对应的 组件。

方法

MapContext.getCenterLocation()

获取当前地图中心的经纬度。返回的是 gcj02 坐标系，可以用于 wx.openLocation()
getCenterLocation参数

最低0.47元/天 解锁文章
M.Siebel
关注
  • 11
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序的常用API②
2301_76669854的博客
04-27 1778
动画API、map地图组件、地图API、位置API、路由API
微信小程序map作为子组件wx.createMapContext失效
solocao的专栏
01-05 2293
我是将map封装成了子组件进行使用，发现wx.createMapContext无论如何都没有效果。最后，定睛一看，原来将map放到子组件中，再使用wx.createMapContext需要增加额外的参数this 具体使用方法如下： const mapCtx = wx.createMapContext('map', this); mapCtx.includePoints({ paddin...
uni-app地图组件控制
最新发布
abc8002117034的博客
06-20 868
使用三方定位或者地图服务，需向服务提供商（如：高德地图、百度地图、腾讯地图、谷歌地图）申请商业授权和缴纳费用（5万/年）。DCloud为开发者争取了福利，可优惠获取高德、腾讯的商业授权。缩小地图可看到多个 marker 合并为 1 个并显示聚合数量，放大地图后恢复。在自定义组件下，第二个参数传入组件实例this，以操作组件内。（注明你的公司名称、应用介绍、HBuilder账户）；缩放或拖动导致新的聚合簇产生时触发，仅返回新创建的聚合簇信息。组件绑定，通过它可以操作对应的。地图聚合 API 示例(nvue)
微信小程序地图wx.createMapContext的moveToLocation
zhou_w_x的博客
05-28 1万+
<map id="myMap" style="width: 100%; height: 500rpx;" latitude="{{latitude}}" longitude="{{longitude}}" scale='18' markers="{{markers}}" show-location></map> data: { latitude: 45.76, ...
uni.createMapContext uniapp小程序 地图放大图标 动态切换图标
qq_47247479的博客
09-26 1595
uni.createMapContext uniapp小程序 地图放大图标 动态切换图标
微信小程序 MapContext.includePoints实现自动缩放地图大小
qq_43679736的博客
11-17 1794
官方文档又是一笔带过，没办法，查资料查的一肚子火，好在最后还是实现了，直接贴代码记录一下我踩的坑，也让后面的兄弟别踩了。最近做了个功能，根据用户和商家之间的距离画出导航线，然后根据距离自动缩放地图的scale。
微信小程序之地图组件
qq_34907249的博客
08-31 2737
官方提供好了 map组件直接使用即可，具体配置可以参考demo1、配置权限"desc": "请求获取地理信息"}}2、使用mapwx.getLocation() 可以获取当前位置，需要在小程序中申请，也可以使用demo中的方式获取(如下api获取上下文对象，再进行对应功能的获取)...
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
10-17
主要介绍了微信小程序map组件结合高德地图API实现wx.chooseLocation功能,结合实例形式分析了map组件调用高德地图API接口获取地理位置提示列表并返回location相关操作技巧,需要的朋友可以参考下
微信小程序开发问题之wx.previewImage
10-17
在微信小程序开发中，`wx.previewImage` 是一个至关重要的API，它允许开发者实现图片预览功能。这个API能够在新页面中全屏显示图片，并且用户可以在预览过程中执行多种操作，如保存图片或分享给朋友。然而，在实际...
微信小程序 wx.request(object) API详解及实例代码
09-01
主要介绍了微信小程序 wx.request(object) API详解及实例代码的相关资料,需要的朋友可以参考下
微信小程序网络请求wx.request详解及实例
12-08
微信小程序网络请求wx.request详解及实例 如果说小程序API里面最重要一个接口是哪一个？那么首推wx.request()。相当于在小程序内请发起一个https请求（本地调试模式下支持HTTP）。HTTP协议中共定义了八种方法或者叫...
微信小程序开发demo-地图定位
10-29
微信小程序开发demo-地图定位wx.getLocation接口，测试时获取的经纬度一直不变 版本信息： 微信web开发者工具 v0.10.101100
微信小程序 -- 解决MapContext.getCenterLocation(Object object)没有执行回调问题
Emily
04-21 3648
今天试了MapContext.getCenterLocation(Object object)，并没有执行成功success/失败fail的回调，很奇怪，之前用过，同样的代码复制过来就不生效了。 this.mapCtx = wx.createMapContext("myMap"); this.mapCtx.getCenterLocation({ success: function ...
微信小程序地图与位置相关操作
冲出仁川，走出马德里，故事还会再继续
03-20 6600
微信小程序地图与位置相关操作1、地图1.1 map的API1.2 简单地图示例1.3 MapContext对象常用操作1.4 地图操作示例2、位置2.1 位置API2.1.1 wx.getLocation(Object object)2.1.2 wx.openLocation(Object object)2.1.3 wx.chooseLocation()2.2 wx.openLocation()案例2.3 wx.chooseLocation()案例 1、地图 map是一个比较复杂的组件，他有很多参数，如下表
微信小程序API之map
...
06-03 343
微信小程序API之map wxml： <map id="map" longitude="113.324520" latitude="23.099994" scale="16" markers="{{markers}}" style="width:100%;height:1214rpx"></map> js： // pages/map/map.js Page({ /** * 页面的初始数据 */ data: { markers:[
uniapp的map地图组件介绍
热门推荐
weixin_67490903的博客
07-27 1万+
由之前描述可知，markers属性类型为Array，表示标记点用于在地图上显示标记的位置。这个数组属性，它里面有它的对象配置属性，分别是。
微信小程序自带地图_微信小程序API 地图组件控制
weixin_39943868的博客
12-19 649
wx.createMapContext(mapId)创建并返回 map 上下文mapContext对象。在自定义组件下，第二个参数传入组件实例this，以操作组件内组件mapContextmapContext通过 mapId 跟一个组件绑定，通过它可以操作对应的组件。mapContext 对象的方法列表方法参数说明最低版本getCenterLocationOBJECT获取当前地图中心的经纬...
微信小程序开发：实现地图导航功能
吃不胖.
10-08 6081
其中，id用于调用地图组件，latitude和longitude表示地图的中心点坐标，markers表示地图中的标记点，covers表示地图中的覆盖物，polyline表示地图中的折线图，show-location表示是否显示当前定位点，bindregionchange表示移动地图时触发的事件。其中，id表示标记点的唯一标识，latitude和longitude表示标记点的坐标，title表示标记点的名称，iconPath表示标记点的图标路径，width和height表示标记点的宽度和高度。
微信小程序map地图
CQXXTXX的博客
02-18 370
使用微信小程序实现地图功能
微信小程序wx.login使用实例
04-05
wx.login是微信小程序提供的一个API，用于获取用户登录凭证（code）。通过调用wx.login接口，可以获取到用户的code，然后将code发送给开发者服务器，开发者服务器可以通过code换取用户的唯一标识openid和会话密钥session_key。 以下是wx.login的使用实例： 1. 在小程序的某个页面中，可以通过以下代码调用wx.login接口： ``` wx.login({ success: function(res) { if (res.code) { // 登录成功，获取到用户的code var code = res.code; // 将code发送给开发者服务器进行后续处理 // ... } else { console.log('登录失败！' + res.errMsg) } } }) ``` 2. 在开发者服务器中，可以通过接收到的code向微信服务器发送请求，换取用户的openid和session_key。以下是一个简单的Node.js示例： ```javascript const request = require('request'); // 将code发送给微信服务器进行换取openid和session_key function getOpenidAndSessionKey(code) { const url = `https://api.weixin.qq.com/sns/jscode2session?appid=YOUR_APPID&secret=YOUR_SECRET&js_code=${code}&grant_type=authorization_code`; request(url, function(error, response, body) { if (!error && response.statusCode == 200) { var data = JSON.parse(body); var openid = data.openid; var session_key = data.session_key; // 处理获取到的openid和session_key // ... } else { console.log('请求失败！' + error); } }); } // 在接收到小程序发送的code后调用getOpenidAndSessionKey函数 // ... ``` 以上就是wx.login的一个简单使用实例。通过调用wx.login接口获取用户的code，然后将code发送给开发者服务器进行后续处理，可以实现用户登录功能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值