获取定位及附近位置 , 输入框搜索附近位置（三种方法）
2024-05-16 04:30:52
一 , 前两种方法, 服务器都必须升级到https ,http无法获取定位, 但是http可以在localhost本地浏览器里获取到 (谷歌浏览器localhost也不行 , 火狐浏览器中可以)
二 , 第三种方法是用微信的api , wx.getLocation , 在微信平台中实现 , 比如微信小程序, 公众号 , 企业微信里的H5页面 , 这个方法电脑上无法获取定位 , 只能在手机微信平台上
研究这个定位已经研究几天了 , 百度都翻烂了 , 最后还是没搞出来http怎么获取定位, 如果有知道的大神可以指教一下
先看结果 , 有两个功能
一 : 获取当前定位以及附近位置
二 : 一个输入框 ， 可以输入搜索附近位置
三 , 用三种方法实现 ， 高德api直接获取 , 浏览器api获取经纬度再用高德api逆地址解析出具体位置 , wx.getLocation获取经纬度再用高德api逆地址解析出具体位置 （下面三个截图对应三种方法）
搜索附近位置
上代码
一 , index.html中引入高德jsdk , key是你自己在高德开放平台申请的 , 要申请web端的key
高德开放平台网站 : https://lbs.amap.com/
怎么申请 ? 看这里 == > 申请高德地图开发者key_青梅煮酒-CSDN博客_高德地图注册成为开发者
<!-- 引入高德地图jsdk ,web端的key--><script src="https://webapi.amap.com/maps?v=1.4.15&key=4e3c7848a50dda0dbe3b30234b040377"></script>二 , 新建一个vue页面 ,把下面代码全部贴过去 , 打开就是我上面截图的效果 , 每行代码都注释的很清楚
<template><div><van-search v-model="value" placeholder="搜索附近位置" show-action @search="onSearch" @cancel="onCancel" @clear="onCancel" /><div class="searchResult" :style='Style'><ul><li v-for="(item,index) in searchList" :key="index">{{item.name}} <br>{{item.address}}</li></ul></div><button @click="getLocation">高德api获取定位</button><button @click="getPosition">浏览器api获取定位</button><button @click="getWXPosition">微信api获取定位</button><div>当前位置 : {{dz}}</div><div> 纬度 : {{latitude}}</div><div class="jd">经度 :{{longitude}} </div><h3>附近:</h3><ul><li v-for="(item,index) in list" :key="index">{{item.name}} <br>{{item.address}}</li></ul></div>
</template><script>export default {name: '',data() {return {// 当前位置dz: "",// 纬度latitude: "",// 经度longitude: '',// 附近list: "",// 城市名city: "",// 搜索地点searchList: "",// 搜索结果显示/隐藏Style: {display: "none"},// 搜索关键字value: ""}},methods: {// 高德api获取定位(可直接获取到具体位置)getLocation() {var that = thislet geolocationAMap.plugin('AMap.Geolocation', function () {geolocation = new AMap.Geolocation();geolocation.getCurrentPosition((status, result) => {if (status == 'complete') {that.onComplete(result)} else {that.onError(result)}});})},//定位成功onComplete(data) {console.log(data);// 当前地址this.dz = data.formattedAddress;// 经纬度this.latitude = data.position.lat;this.longitude = data.position.lng;console.log(this.latitude, this.longitude);alert(`纬度是 ${this.latitude}`);alert(`经度是 ${this.longitude}`);alert(this.dz);// 调用查询周边的方法, 传经纬度 , 城市名this.aMapSearchNearBy(`${this.longitude},${this.latitude}`, data.addressComponent.city)},//定位失败onError(data) {console.log("定位失败:" + data.message);alert("定位失败:" + data.message);},// 浏览器自带api获取经纬度(只能获取经纬度再用高德api解析出位置)getPosition() {if (navigator.geolocation) {alert('支持定位')navigator.geolocation.getCurrentPosition(this.showPosition, this.showError);} else {alert("浏览器不支持地理定位");}},// 获取经纬度成功async showPosition(position) {console.log(position);this.latitude = position.coords.latitude; //纬度this.longitude = position.coords.longitude; //经度console.log(this.latitude, this.longitude);alert(`纬度是 ${this.latitude}`);alert(`经度是 ${this.longitude}`);// 根据经纬度解析成位置信息let geocoderAMap.plugin("AMap.Geocoder", function () {geocoder = new AMap.Geocoder();})geocoder.getAddress(`${this.longitude},${this.latitude}`, (status, {regeocode}) => {console.log(regeocode);if (status === 'complete' && regeocode) {// formattedAddress即经纬度转换后的位置名称this.dz = regeocode.formattedAddressthis.city = regeocode.addressComponent.cityconsole.log(this.dz, this.city);alert(this.dz, this.city);// 调用查询周边的方法, 传经纬度 , 城市名this.aMapSearchNearBy(`${this.longitude},${this.latitude}`, this.city)} else {// 失败回调 status 统一返回1switch (originMessage) {case 'Timeout expired':// 超时break;case 'User denied Geolocation':// 拒绝授权break;case 'error Network location provider at \'https://www.googleapis.com/\' : No response received.':// 不支持定位，定位不可用的浏览器break;default:// 其他错误return;}}})},// 获取经纬度失败showError(error) {switch (error.code) {case error.PERMISSION_DENIED:alert("定位失败,用户拒绝请求地理定位");break;case error.POSITION_UNAVAILABLE:alert("定位失败,位置信息是不可用");break;case error.TIMEOUT:alert("定位失败,请求获取用户位置超时");break;case error.UNKNOWN_ERROR:alert("定位失败,定位系统失效");break;}},// 微信api获取经纬度getWXPosition() {alert('获取当前位置')wx.getLocation({type: 'gcj02',success: res => {console.log('获取经纬度成功');alert('获取经纬度成功');this.latitude = res.latitude.toFixed(6);this.longitude = res.longitude.toFixed(6);console.log(this.latitude, this.longitude);alert(`纬度是 ${this.latitude}`);alert(`经度是 ${this.longitude}`);// 根据经纬度解析成位置信息let geocoder;AMap.plugin('AMap.Geocoder', function () {geocoder = new AMap.Geocoder();});geocoder.getAddress(`${this.longitude},${this.latitude}`, (status, {regeocode}) => {console.log(regeocode);if (status === 'complete' && regeocode) {// formattedAddress即经纬度转换后的位置名称this.dz = regeocode.formattedAddress;this.city = regeocode.addressComponent.city;console.log(this.dz, this.city);alert(`当前位置是${this.dz}`);alert(`当前城市是${this.city}`);// 调用查询周边的方法, 传经纬度 , 城市名this.aMapSearchNearBy(`${this.longitude},${this.latitude}`, this.city);} else {// 失败回调 status 统一返回1switch (originMessage) {case 'Timeout expired':// 超时break;case 'User denied Geolocation':// 拒绝授权break;case "error Network location provider at 'https://www.googleapis.com/' : No response received.":// 不支持定位，定位不可用的浏览器break;default:// 其他错误return;}}});},fail: res => {console.log('获取经纬度失败');alert('获取经纬度失败');alert(res.errMsg);}});},// 查询附近地点的方法aMapSearchNearBy(centerPoint, city) {var that = this;let placeSearchAMap.service(["AMap.PlaceSearch"], function () {placeSearch = new AMap.PlaceSearch({pageSize: 20,pageIndex: 1,city: city});placeSearch.searchNearBy('', centerPoint, 1000, function (status, result) {console.log(result);if (result.info === 'OK') {var locationList = result.poiList.pois;that.list = locationList} else {alert('获取位置信息失败!请重试');}});});},// 输入框搜索时onSearch(val) {var that = thislet placeSearchAMap.plugin('AMap.PlaceSearch', function () {placeSearch = new AMap.PlaceSearch({pageSize: 20})placeSearch.search(`${val}`, (status, result) => {console.log(result);that.searchList = result.poiList.poisconsole.log(that.searchList);// 显示搜索结果that.Style.display = "block"})})},// 取消搜索时onCancel() {this.Style.display = "none"},}}</script><style lang="scss" scoped>button {width: 300px;height: 100px;}li {margin: 20px;}div {margin: 10px;}.jd {margin-bottom: 20px;}button {margin-top: 10px;}.searchResult {position: absolute;width: 100%;background: #eee;left: 0}</style>
获取定位及附近位置 , 输入框搜索附近位置（三种方法）相关推荐
- EFR32获取Zigbee Light Link Key和NWK Key的三种方法
方法一:抓包的方式获取 当设备默认TC link key为5A 69...,通过抓包新设备入网的方式可以获取nwk key 方法二:串口打印的方式 设备能通过串口CLI命令输出"keys p ...
- java 获取键盘输入法_Java中接收键盘输入的三种方法
import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import ...
- Android 手机app三种方法获取定位地址（自带API，外接SDK，获取外网IP）
一.手机App定位在我看来有三种方法: 1.通过Android自带的API:LocationManager获取到经纬度,再通过Geocoder反地理位置查询到所在的地址. 2.外接SDK,如高德SDK ...
- 相对定位 绝对定位 固定定位 粘性定位 居中的三种方法 calc函数标签的使用方法
相对定位 绝对定位 固定定位 粘性定位 居中的三种方法 calc函数标签的使用方法 一.相对定位:position:relative; 二.绝对定位:position:absolute; 1.找参照物 ...
- C#获取文件的Content-Type(MIME Type)的三种方法
什么是ContentType? 我们知道浏览器可以处理各种各样的内容,比如:HTML.XML.JPG.Flash等等,那么浏览器是如何区分它们的呢?答案就是MIME Type,即资源的媒体类型.媒体类 ...
- Understand教程—使用搜索功能的几种方法
Understand是一款针对程序员设计的代码静态分析软件,不仅可以有效率的查看.审查代码,但是代码写的很多如何定位?这个时候就需要搜索功能了.使用Understand搜索功能的几种方法如下: 1.左 ...
- xp系统怎样启动搜索服务器,XP系统使用搜索功能的三种方式
教你怎样找到WinXP搜索?我们的电脑里放了很多文件,如果想要找到自己需要的哪个文件,找起来还真的不好找.那这时候我们就可以用搜索功能来搜索,这样找起来就方便多了.最近有使用WinXP系统的用户,想使 ...
- Struts2获取request三种方法
2019独角兽企业重金招聘Python工程师标准>>> Struts2获取request三种方法 Struts2获取request三种方法 struts2里面有三种方法可以获取req ...
- 获取cookie_抢券第一课：三种方法获取Cookie
现在分享京东抢券是不是不合适?毕竟还没有到双十一或者其他京东大促的时间. 记得以往京东还有那种神券299减200,399减300.基本上都是到点进行抢购,而且还不一定能抢到.不过今天先来分享获取Coo ...
最新文章
- pykafka连接重要使用pykafka，kafka-python的api开发kafka生产者和消费者
- DSDT亮度修复失败
- linux目录空间内存,Linux 目录结构：内存文件夹
- 使用top命令监控linux系统cpu变化
- shell中单引号、双引号、反引号、反斜杠的使用
- mysql基本sql语句总结（一）
- Android 微信分享信息
- 数学建模系列--拟合算法
- visio 2016插入origin 2020 导出的图片是黑色
- 微软win2008停止服务器,微软停止技术支持Windows Server 2008/2008 R2
- Spark面试题及其答案
- 做为软件测试的前辈，你能不能给我一点建议？
- Angular属性绑定，class绑定，事件绑定，属性样式绑定
- grub引导安装win10
- 常用RL算法的主要特性
- 查询数据库dblink
- 调焦距离S远近与景深之关系
- 血战力扣 332.零钱兑换
- 一些关于国内腿足式机器人公司研究所的信息分享
- 全网优秀的攻防渗透工具总结