父组件代码:
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协议,不然地址有偏差并且存在调不通的情况)