web端仿微信朋友圈定位检索功能

web端仿微信朋友圈定位功能

1. 先看实现的效果。

2.实现思路

• 用户点击时通过高德地图接口的geolocation函数获取用户的经纬度和所在的城市。然后将经纬度和城市存储起来。以便于下面其他接口使用。

• 获取到经纬度后通过经纬度和城市去查询附近的一些商家，或者建筑物的数据。然后将这些 数据渲染到页面。

• 当用户在输入框搜索的时候，去调用高德地图的POI接口,然后将返回的数据渲染到页面。

3.上代码

//1.引入高德地图的js
<script src="https://webapi.amap.com/maps?v=1.4.15&key=125155455445"></script>
//2. 用高德地图获取当前的定位
 mounted(){
            var that=this;
            // 用高德地图获取当前的定位
            AMap.plugin('AMap.Geolocation', function() {
                var geolocation = new AMap.Geolocation({
                    // 是否使用高精度定位，默认：true
                    enableHighAccuracy: true,
                    // 设置定位超时时间，默认：无穷大
                    timeout: 10000,
                    // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
                    buttonOffset: new AMap.Pixel(10, 20),
                    //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：			  false
                    zoomToAccuracy: true,     
                    //  定位按钮的排放位置,  RB表示右下
                    buttonPosition: 'RB',
                    useNative:false,
                })

                geolocation.getCurrentPosition()
                AMap.event.addListener(geolocation, 'complete', onComplete)
                AMap.event.addListener(geolocation, 'error', onError)

                function onComplete (data) {
                    // data是具体的定位信息
                    var arr=[]
                    arr.push(data.position.lng)
                    arr.push(data.position.lat)
                    that.location=data.position.lng+","+data.position.lat
                    // console.log(data.position.lng,data.position.lat,data.addressComponent.city)
                    that.aMapSearchNearBy(arr,data.addressComponent.city)
                }

                function onError (data) {
                    // 定位出错
                    if(data.message=="Geolocation permission denied"){
                        alert("地理定位权限被拒绝！")
                    }else if(data.message=="Browser not Support html5 geolocation"){
                        alert("浏览器不支持原生定位接口")
                    }else if(data.message=="Get geolocation time out"){
                        alert("浏览器定位超时")
                    }else if(data.message=="Get geolocation failed"){
                        alert("定位失败")
                    }
                    // alert(JSON.stringify(data));
                }
            })
                         
        },
      
        methods:{
          // 高德地图根据经纬度查询周边
            aMapSearchNearBy(centerPoint, city) {
                var that=this
                AMap.service(["AMap.PlaceSearch"], function() {
                    var placeSearch = new AMap.PlaceSearch({
                        pageSize: 10,    // 每页10条
                        pageIndex: 1,    // 获取第一页
                        city: city       // 指定城市名(如果你获取不到城市名称，这个参数也可以不传，注释掉)
                    });
                    // 第一个参数是关键字，这里传入的空表示不需要根据关键字过滤
                    // 第二个参数是经纬度，数组类型
                    // 第三个参数是半径，周边的范围
                    // 第四个参数为回调函数
                    placeSearch.searchNearBy('', centerPoint, 1000, function(status, result) {
                        // console.log(centerPoint)
                        if(result.info === 'OK') {
                            var locationList = result.poiList.pois; // 周边地标建筑列表
                            // alert(locationList[1]+"周边")
                            for(let i in locationList){
                                locationList[i].district=locationList[i].address
                            }
                            // console.log(locationList)
                            that.list=locationList
                            // console.log($("#listSearch").html())
                            // console.log(that.list)
            　　　　　　　　　 // 生成地址列表html
                            // createLocationHtml(locationList);
                        } else {
                            alert('获取位置信息失败!请重试');
                        }
                    });
                });
            },
            //根据input输入的内容模糊查询地址
             searchAdress(){
                var that=this;
                $.ajax({
                    url:"https://restapi.amap.com/v3/assistant/inputtips?&key=12346654&datatype=all&keywords="+$("#inputEmail3").val()+"&location="+this.location,
                    type:"GET",
                    success:function(res){
                        if(res.info!=0){
                            if(res.count>0){
                                that.list=res.tips;
                            }
                            if(res.count==0){
                                that.list.push("暂未查询到结果")
                            }
                        }
                    }
                })
            },

注意事项

1.获取用户经纬度时候存在兼容问题。浏览器禁止了非安全域的定位请求，比如Chrome、IOS10已陆续禁止，这时候需要升级站点到HTTPS。注意Chrome不会禁止localhost等域名HTTP协议下的定位。
2.在输入数据获取模糊匹配位置信息时，高德地图用到的接口的key 要求是web服务类的key.不然无法获取信息。详细信息参考https://lbs.amap.com/api/webservice/guide/api/search/

github地址：https://github.com/Xglhngy/-.git