torch
torch
  • 发布:2020-06-05 14:19
  • 更新:2021-05-17 16:32
  • 阅读:13997

UNI-APP中mapSearch 模块使用方法

分类:uni-app
map

UNI-APP中mapSearch 模块(module)具体使用案例如下:此方法为官方Demo,由于论坛收不到所以发帖。节约大家的时间。Demo地址 以及官方文档mapsearch-模块

<template>  
    <view class="content">  
        <map class="map" ref="dcmap" :markers="markers" @tap="selectPoint"></map>  
        <scroll-view class="scrollview" scroll-y="true">  
            <button class="button" @click="reverseGeocode">reverseGeocode</button>  
            <button class="button" @click="poiSearchNearBy">poiSearchNearBy</button>  
        </scroll-view>  
    </view>  
</template>  

<script>  
    // 116.397477,39.908692  
    let mapSearch = weex.requireModule('mapSearch')  
    module.exports = {  
        data() {  
            return {  
                markers: [{  
                    id: '1',  
                    latitude: 39.9086920000,  
                    longitude: 116.3974770000,  
                    title: '天安门',  
                    zIndex: '1',  
                    iconPath: '/static/gps.png',  
                    width: 20,  
                    height: 20,  
                    anchor: {  
                        x: 0.5,  
                        y: 1  
                    },  
                    callout: {  
                        content: '首都北京\n天安门',  
                        color: '#00BFFF',  
                        fontSize: 12,  
                        borderRadius: 2,  
                        borderWidth: 0,  
                        borderColor: '#333300',  
                        bgColor: '#CCFF11',  
                        padding: '1',  
                        display: 'ALWAYS'  
                    }  
                }]  
            }  
        },  
        methods: {  
            selectPoint(e) {  
                console.log(e);  
            },  
            reverseGeocode() {  
                var point = this.markers[0]  
                mapSearch.reverseGeocode({  
                    point: {  
                        latitude: point.latitude,  
                        longitude: point.longitude  
                    }  
                }, ret => {  
                    console.log(JSON.stringify(ret));  
                    uni.showModal({  
                        content: JSON.stringify(ret)  
                    })  
                })  
            },  
            poiSearchNearBy() {  
                var point = this.markers[0]  
                mapSearch.poiSearchNearBy({  
                    point: {  
                        latitude: point.latitude,  
                        longitude: point.longitude  
                    },  
                    key: '停车场',  
                    radius: 1000  
                }, ret => {  
                    console.log(ret);  
                    uni.showModal({  
                        content: JSON.stringify(ret)  
                    })  
                })  
            }  
        }  
    }  
</script>  

<style>  
    .content {  
        flex: 1;  
    }  
    .map {  
        width: 750rpx;  
        height: 500rpx;  
        background-color: black;  
    }  
    .scrollview {  
        flex: 1;  
    }  
    .button {  
        margin-top: 30rpx;  
        margin-bottom: 20rpx;  
    }  
</style>
2 关注 分享
1***@qq.com 2***@qq.com

要回复文章请先登录注册

1***@qq.com

1***@qq.com

回复 1***@qq.com :
云打包问题已解决,参考:https://www.jianshu.com/p/705d9eba8a00
2021-05-17 16:32
1***@qq.com

1***@qq.com

回复 1***@qq.com :
mapSearch.poiSearchNearBy 求教大佬,真机运行是正常的,云打包不执行是什么原因
2021-05-14 14:13
1***@qq.com

1***@qq.com

回复 2***@qq.com :
mapSearch.poiSearchNearBy 求教大佬,真机运行是正常的,云打包不执行是什么原因
2021-05-14 14:13
1***@qq.com

1***@qq.com

回复 2***@qq.com :
mapSearch.poiSearchNearBy 求教大佬,真机运行是正常的,云打包不执行是什么原因
2021-05-14 14:13
1***@qq.com

1***@qq.com

回复 8***@qq.com :
mapSearch.poiSearchNearBy 求教大佬,真机运行是正常的,云打包不执行是什么原因
2021-05-14 14:13
8***@qq.com

8***@qq.com

回复 只有问没有答 :
weex的应该在nvue页面才能引入
2021-03-11 15:03
棱山

棱山

标准调试基座能用mapSearch.poiSearchNearBy,换成自己的自定义调试基座就不能用了,为啥呢
2021-01-27 13:44
2***@qq.com

2***@qq.com

怎么才能使返回的列表出现精准,太难了,难道还要自己过滤一遍么。。
2021-01-23 10:25
2***@qq.com

2***@qq.com

回复 只有问没有答 :
加上app引用不报错,app搜出来的结果跟之前调api搜出来的还不一样,太难了,小程序有别的办法,高德有小程序相应的js,https://www.cnblogs.com/2186009311CFF/p/14312833.html,这个底下有相应的链接
2021-01-23 10:24
2***@qq.com

2***@qq.com

这个mapSearch 模块的poiSearchNearBy返回的参数,跟说明的不一致,而且不是关键字排序的,跟原先app调地图api返回的还有差别,有哪位做过uniapp 实现app的关键字搜索列表么,指导一下,谢谢!
2021-01-23 10:22