微信小程序----map组件实现(高德地图API实现wx.chooseLocation(OBJECT))
声明
bug: 页面搜索返回的列表在真机测试是会出现不显示问题?
造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡!
解决办法:将该文本视图采用cover-view,放在map中。
感谢: 感谢Lrj_estranged指出问题!
效果图
实现原理
通过高德地图的微信小程序开发API(getInputtips),实现关键词获取对应提示列表,同时返回location。
WXML
<view class="map-inputtips-input">
<input bindinput="bindInput" placeholder="搜索" focus="true" />
</view>
<view class="map_container">
<map class="map" latitude='{
{
latitude}}' longitude='{
{
longitude}}' markers='{
{
markers}}'>
<cover-view class="map-search-list {
{
isShow ? '' : '