torch
torch
  • 发布:2020-06-05 14:19
  • 更新:2020-06-30 14:50
  • 阅读:511

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>
0 关注 分享

要回复文章请先登录注册

只有问没有答

只有问没有答

回复 torch :
哥们 给解答下呗
2020-06-30 14:50
只有问没有答

只有问没有答

回复 torch :
let mapSearch = weex.requireModule('mapSearch')
但是我在vue页面使用这个模块引入,没有weex对象,使用的uniapp开发的小程序。大佬给讲一下,感觉地图方法都不连着。也没个事例
2020-06-30 10:41
torch

torch (作者)

回复 只有问没有答 :
当然
2020-06-30 10:30
只有问没有答

只有问没有答

vue 页面可以使用吗
2020-06-30 10:26