高德地图获取手机定位以及经纬度组件

news/2024/10/24 4:44:09/

父组件代码:

html代码
<div><get-position :position.sync="currentPosition" :place.sync="currentPlace"/>
</div>import GetPosition from "../../components/GetPosition"  //引入GetPosition组件
export default {data() {return {currentPosition:{}, //经纬度currentPlace:"",//定位地址};},
}

子组件代码:

<template><div class="get_position"><div ref="scriptDiv"></div></div>
</template><script>
export default {name: "get_position",props: {place: {type: String,default: () => {}},position: {type: Object,default: () => {}}},model: {event: "loaded"},data() {return {phoneAddress: ""};},mounted() {// 如果缓存中有位置信息,则不用给页面中添加百度脚本。// let localPosition = this.$utils.cookie.getCookie(//   this.$config.storage.currentPosition// );// if (localPosition) {//   this.$emit("loaded");//   return;// }// 否则this.get("//webapi.amap.com/maps?v=1.4.15&key=密钥").then(res => {this.appendJsToDom(res, this.$refs.scriptDiv);this.getPosition();});},methods: {appendJsToDom(jsContent, domContainer) {var newScript = document.createElement("script");newScript.type = "text/javascript";// newScript.src = url;newScript.innerHTML = jsContent;domContainer.appendChild(newScript);this.$emit("loaded");},get(url) {if (!url) {console.error("JSONP 至少需要一个url参数!");return;}return new Promise((resolve, reject) => {window.jsonCallBack = result => {resolve(result);};var JSONP = document.createElement("script");JSONP.type = "text/javascript";JSONP.src = `${url}&callback=jsonCallBack`;document.getElementsByTagName("head")[0].appendChild(JSONP);setTimeout(() => {document.getElementsByTagName("head")[0].removeChild(JSONP);}, 500);});},/*** @description: 获取地理位置* @param {type}* @return:*/getPosition(callback) {AMap.plugin("AMap.Geolocation", () => {var geolocation = new AMap.Geolocation({enableHighAccuracy: true, //是否使用高精度定位,默认:truetimeout: 10000, //超过10秒后停止定位,默认:5sbuttonPosition: "RB", //定位按钮的停靠位置buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)zoomToAccuracy: true //定位成功后是否自动调整地图视野到定位点});geolocation.getCurrentPosition((status, result) => {if (result && result.position) {this.phoneAddress =result.addressComponent.township +result.addressComponent.streetNumber;this.$emit("update:place", this.phoneAddress);this.$emit("update:position", result.position);}});});//解析定位结果function onComplete(data) {document.getElementById("status").innerHTML = "定位成功";var str = [];str.push("定位结果:" + data.position);str.push("定位类别:" + data.location_type);if (data.accuracy) {str.push("精度:" + data.accuracy + " 米");} //如为IP精确定位结果则没有精度信息str.push("是否经过偏移:" + (data.isConverted ? "是" : "否"));}//解析定位错误信息function onError(data) {console.log("失败原因排查信息:" + data.message);}}}
};
</script><style  scoped>
</style>

填入高德地图密钥即可使用,简单方便。(备注:要调用百度地图或者高德地图需要使用https协议,不然地址有偏差并且存在调不通的情况)


http://www.ppmy.cn/news/659577.html

相关文章

uniapp 打包app用不了腾讯地图|高德地图

原因1:好像app只支持高德|百度地图 好像app只支持高德|百度地图的,申请一个高德地图的key就可 SHA1&#xff1a; 1.dcolud开发平台地址:开发者中心 2.查看SHA1&#xff08;点击应用名称进入&#xff09; 3.查看证书 包名: key: 原因2:配置权限及设置key 1.配置key 2.配置权…

高德地图获取可视区域内四角坐标(东北,东南,西南,西北)

高德地图获取可视区域内四角坐标&#xff08;东北&#xff0c;东南&#xff0c;西南&#xff0c;西北&#xff09; 场景&#xff1a;当需要实现查询某坐标区域内的所有共享单车&#xff0c;那么常规操作就是把所选区域内的左上和右下两点经纬度给到后端。获取方法如下&#xff…

百度经纬度与高德经纬度互转

使用不同的地图&#xff0c;在不同的地图上根据经纬度展示会有出入&#xff0c; 这边记录下 百度和高德经纬度的互转 // 将百度地图经纬度转换为腾讯/高德地图经纬度 用于大屏bMapTransQQMap(lng, lat) {let x_pi 3.14159265358979324 * 3000.0 / 180.0;let x lng - …

知道经纬度来调高德地图的官网API来获取所在的位置(逆地理编码)

第一步&#xff1a;首先要有一个key值 高德的参考 https://lbs.amap.com/api/webservice/guide/api/georegeo/?sug_index2 第二步&#xff1a;调接口 https://restapi.amap.com/v3/geocode/regeo?key"你的key值"&location经度,纬度 注&#xff1a;key值要…

高德地图一些常用的地理位置获取方法

1、首先引入plugin //webapi.amap.com/maps?v1.4.15&key000&pluginAMap.CustomLayer,AMap.Geocoder 2、mixin import { uuid } from /utils/utils; export default {data() {return {map: null,mapStyle: amap://styles/bcb8c05d5306c3e9004a513721f93262, //自定义…

使用高德地图获取拍照图片地理位置

1.寻找Terminal 配置环境变量 你需要将你的SDK中adb目录配置在path环境变量中 例如&#xff1a; D:\android-sdk2\android-sdk\platform-tools 然后将其添加到环境变量Path路径下 大家这样很直观吧 然后打开cmd输入adb shell测试 这样即为成功。但是我们还需要对cm…

高德地图八:手机定位和GPS定位

高德地图八&#xff1a;手机定位和GPS定位 高德地图八&#xff1a;手机定位和GPS定位 代码实现&#xff1a; layout/activity_main.xml <?xml version"1.0" encoding"utf-8"?> <LinearLayoutxmlns:android"http://schemas.android.com/a…

h5手机端或PC端利用高德地图获取当前定位位置

踩的坑写在前面&#xff1a; 想直接利用h5的特性来获取&#xff0c;但是一直报错&#xff0c;需要https服务&#xff0c;结果还去了阿里云搞ssl的域名卡住了&#xff0c;然后一直报未检测到DNS配置记录&#xff0c;如果你们服务是https就可以直接用这个了。 后来就搜了高德地…