小程序自定义组件中封装使用map无法通过getCenterLocation获取经纬度,但是在Page 注册页面中直接调用就可以,不知道这个是小程序自定义组件问题不? 1. 在page 页面中调用是可以通过
regionchange回调通过getCenterLocation获取到中心节点经纬度。
markers: [{ iconPath: "https://huotu.oss-cn-shanghai.aliyuncs.com/wxx/add_cart@3x.png", id: 0, latitude: 23.099994, longitude: 113.324520, width: 50, height: 50 }], polyline: [{ points: [{ longitude: 113.3245211, latitude: 23.10229 }, { longitude: 113.324520, latitude: 23.21229 }], color: "#FF0000DD", width: 2, dottedLine: true }], controls: [{ id: 1, iconPath: 'https://huotu.oss-cn-shanghai.aliyuncs.com/wxx/conplete-center@3x.png', position: { left: 0, top: 300 - 50, width: 50, height: 50 }, clickable: true }]
this .mapCtx = wx.createMapContext( 'myMap' ) }, regionchange(e) { if (e.type == 'end' ) { console.log(e) console.log( this .mapCtx) this .mapCtx.getCenterLocation({ success: (res) => { console.log(res) }, }) } }, |
2. 但是经同样额代码放在自定义组件就不可以获取到经纬度
组件代码(map-native):
// pages/components/map-native/index.js Component({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { markers: [{ iconPath: "https://huotu.oss-cn-shanghai.aliyuncs.com/wxx/add_cart@3x.png" , id: 0, latitude: 23.099994, longitude: 113.324520, width: 50, height: 50 }], polyline: [{ points: [{ longitude: 113.3245211, latitude: 23.10229 }, { longitude: 113.324520, latitude: 23.21229 }], color: "#FF0000DD" , width: 2, dottedLine: true }], controls: [{ id: 1, iconPath: 'https://huotu.oss-cn-shanghai.aliyuncs.com/wxx/conplete-center@3x.png' , position: { left: 0, top: 300 - 50, width: 50, height: 50 }, clickable: true }], mapCtx: null , }, ready() { this .setData({ mapCtx: wx.createMapContext( 'myMap' ) }) }, /** * 组件的方法列表 */ methods: { regionchange(e) { if (e.type == 'end' ) { console.log(e) console.log( this .data.mapCtx) console.log( this .data.mapCtx.getCenterLocation) this .data.mapCtx.getCenterLocation({ success: (res) => { console.log(res) }, fail: (res) => { console.log(res) }, complete: (complete) => { console.log(2222) } }) } }, } }) |
模板:
< map id = "myMap" longitude = "113.324520" latitude = "23.099994" scale = "14" controls = "{{controls}}" bindcontroltap = "controltap" markers = "{{markers}}" bindmarkertap = "markertap" polyline = "{{polyline}}" bindregionchange = "regionchange" show-location style = "width: 400px; height: 300px;" ></ map > |
页面调用:
<map-native></map-native>
已经解决了.
怎么解的??
如何解决的?
不好意思,现在才回复。
wx.createMapContext(
'myMap'
) 如果在自定义组件中,必须添加第二个参数this
官方文档:
https://developers.weixin.qq.com/miniprogram/dev/api/api-map.html
不好意思,现在才回复。
wx.createMapContext(
'myMap'
) 如果在自定义组件中,必须添加第二个参数this
官方文档:
https://developers.weixin.qq.com/miniprogram/dev/api/api-map.html
感谢老哥!
我也遇到这个问题,mapCtx: wx.createMapContext
要成功创建。map隐藏或者有复杂的布局,都会影响创建