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({// 是否使用高精度定位，默认：trueenableHighAccuracy: true,// 设置定位超时时间，默认：无穷大timeout: 10000,// 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)buttonOffset: new AMap.Pixel(10, 20),//  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：              falsezoomToAccuracy: 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=thisAMap.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

web端仿微信朋友圈定位检索功能相关推荐

html仿微信评论输入框,简单仿微信朋友圈评论功能
[实例简介] 简单实现了微信朋友圈评论的功能,被点击的评论能够随着输入框高度的改变而改变位置! [实例截图] [核心代码] 简单仿微信朋友圈评论 └── TalkInTalk ├── AndroidM ...
vue整合uniapp_uni-app仿微信App界面|vue+uniapp聊天室|仿微信朋友圈
项目简介基于uni-app+vue+vuex+uniPop+swiper等技术开发的仿微信聊天室uniapp-chatroom项目,类似vue及小程序api语法使开发更加方便,实现了发送图文消息.表 ...
Android仿微信朋友圈7实现点赞功能
前言: 之前一直有朋友问我点赞怎么实现?今天趁着休息时间整理出来,其实点赞的功能和用户评论差不多,都是显示一个用户列表,只不过评论有评论内容和回复评论功能.实现点赞的思路如下: 1.当用户点击点赞按钮 ...
Android自定义弹窗模仿微信,Android 仿微信朋友圈点赞和评论弹出框功能
本文简单模仿微信朋友圈的点赞和评论弹出框,布局等细节请忽略,着重实现弹出框.发评论,及弹出位置的控制. 1. 微信弹出框微信朋友圈的点赞和评论功能,有2个组成部分: 点击左下角的"更多&q ...
android com.mylhyl,Android 高仿微信朋友圈拍照上传功能
模仿微信朋友圈发布动态,输入文字支持文字多少高度自增,有一个最小输入框高度,输入文字有限制,不过这些都很easy! 1. photopicker的使用这是一个支持选择多张图片,点击图片放大,图片之间 ...
Android 实现仿微信朋友圈九宫格图片+NineGridView+ImageWatcher(图片查看:1.预览，2.拖动，3.放大，4.左右滑动，5.长按保存到手机)的功能
一.测试实现: 二.添加依赖包: implementation 'androidx.appcompat:appcompat:1.1.0'implementation 'androidx.recycl ...
安卓开发仿微信图片拖拽_仿微信朋友圈发表图片拖拽和删除功能
原标题:仿微信朋友圈发表图片拖拽和删除功能中国联通在香港公布了上市公司2017年中期业绩.2017年上半年,公司主要业绩指标持续向好,收入稳步回升,服务收入达到人民币1,241.1亿元,同比增长3. ...
android 微信朋友圈全功能,Android仿微信朋友圈文字展开全文功能 Android自定义TextView仿微信朋友圈文字展开全文功能...
Android自定义TextView仿微信朋友圈文字信息,展开全文功能代码及注释如下: 首先写一个xml文件 showmore.xml: android:orientation="vert ...
自定义控件仿微信朋友圈文字展开全文功能
自定义TextView仿微信朋友圈文字信息,展开全文功能代码及注释如下: 首先写一个xml文件 showmore.xml: <?xml version="1.0" enco ...

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