微信小程序-map组件

在小程序中使用个性化地图

小程序中的map组件 ：官方文档中的map介绍

登录“微信小程序”，在小程序后台中，“开发”->“开发者工具”->“腾讯位置服务”申请开通。具体步骤参考 《小程序个性地图使用指南》

小程序个性地图的设置参考： 小程序Javascript SDK。在此获取 qqmap-wx-jssdk.min.js 文件。

遇到的问题

微信小程序的map组件的层级是最高的，当你希望在map 组件之上显示其他的标签，在模拟器上是可以的，但是显示在手机上，就只有map组件了。不是没有渲染，而是被map组件覆盖了， 因为在小程序中，map组件的优先级是最高的，即使你使用了 z-index 也无济于事。

解决方法：

微信小程序为我们提供了 cover-view 组件，可覆盖的原生组件有 map , video ，canvas ， camera ，live-player , live-pusher。

当把标签换为 cover-view 后，的确能显示在 map 组件之上。但是当需求是希望在map组件上显示一个 搜索框 时，问题又来了。因为在 cover-view 中只支持嵌套 cover-view ，cover-image ，button。

而希望显示 input ，会报如下错误：

解决思路：

在 cover-view 下写 input 标签。

将 cover-view 的高度和 input 的高度相同（假如为50px），在为 input 设置 margin-top:5