关于地图

最新推荐文章于 2023-09-19 15:12:08 发布

DJANDAB

最新推荐文章于 2023-09-19 15:12:08 发布

阅读量248

点赞数

本文链接：https://blog.csdn.net/weixin_43339946/article/details/102712242

版权

地图控件，在实战中相信大家都遇到过用到经纬度。uni-app提供了一些api

uni.getLocation({
    type: 'wgs84',
    success: function (res) {
        console.log('当前位置的经度：' + res.longitude);
        console.log('当前位置的纬度：' + res.latitude);
    }
});

当然，在原生的导航中我们也要把当前位置的地址显示在左上角，我们可以在onlond中获取当前位置的信息。因为可能app多处要用到，我们可以将方法写在vuex上，同时在外面封装一个工具类

先创建工具类文件，在根目录创建一个common文件夹，在文件夹中创建util.js文件，然后封装一个方法

	/**
	 * @description 坐标转换为地理未知
	 * @param {Object} latitude
	 * @param {Object} longitude
	 * @param {Object} callBackFun
	 */
	reverseGeocoder(latitude,longitude,callBackFun){
		
		//根据坐标获取当前位置名称，显示在顶部:腾讯地图逆地址解析
		qqmapsdk.reverseGeocoder({
		  location: {
			latitude: latitude,
			longitude: longitude
		  },
		  success: function (res) {
			callBackFun(res)
		  }
		})
	}

同时，我们要用到vuex ，我们要在main.js配置（如何用vuex可以百度，这里只是略写）

import Vue from 'vue'
import App from './App'
import store from './store';


Vue.prototype.$store = store;

然后vuex的文件夹中创建一个mapPosition.js文件

/**
 * 全局地图位置管理，位置选择
 */
import { util } from "../../common/js/util.js";
const state = {
		currentPosition: null,//当前位置信息
		selectedPosition:null//所选择的位置
	};
const getters = {
		getCurrentLocation(state){
			return state.currentPosition;
		},
		getSelectedLocation(state){
			return state.selectedPosition;
		},
	};
const mutations = {
		initLocation(state, p) {
			state.currentPosition = p;
			state.selectedPosition = p;
		},
		changLocation(state,p) {
			state.selectedPosition = p;
		}
	};
const actions = {
	    reInitLocation(context){
			uni.getLocation({
				type:'wgs84',
				geocode: true,
				success(e) {
					util.reverseGeocoder(e.latitude,e.longitude,(res)=>{
						//将获取到的地址信息存入缓存，便于其他地方调用
						context.commit("initLocation",res.result)
					})
					
				}
			})
			
		},
		// 初始化位置信息
		initLocation: function (context) {
			uni.getLocation({
				type:'wgs84',
				geocode: true,
				success(e) {
					util.reverseGeocoder(e.latitude,e.longitude,(res)=>{
						//将获取到的地址信息存入缓存，便于其他地方调用
						context.commit("initLocation",res.result)
					})
					
				},
				fail(e) {
					uni.showModal({
						title: "获取位置失败",
						content: "失败原因：" + JSON.stringify(e)
					})
				},
			})
		},
		//改变位置信息
		changLocation(context,postion){
			context.commit("changLocation",postion)
		},
	};

export default {
     namespaced:true,//用于在全局引用此文件里的方法时标识这一个的文件名
     state,
     getters,
     mutations,
     actions
}

然后我们可以在需要用到地理位置信息的页面引入vuex，在onlond中进行操作

let self = this;
			//如果没有获取到位置信息，则每300毫秒重试一次
			let pages = getCurrentPages();
			let page = pages[pages.length - 1];
			let currentWebview = page.$getAppWebview();
			let interval = setInterval(() => {
				if (self.currentPosition) {
					currentWebview.setTitleNViewButtonStyle(0, {
						text: "\ue303" + self.currentPosition.address_component.street,
					});
					// 初始化用户信息
					self.$store.dispatch("user/initUserInfo");
					if (interval) {
						clearInterval(interval)
					}
				} else {
					self.$store.dispatch("mapPosition/reInitLocation");
				}
			}, 300)

关于地图用法，我们也可以在页面中手动创建Map地图控件对象


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var map = null;
// 创建地图控件
function createMap() {
	if(!map){
		map = plus.maps.create('map', {
			top:'100px',
			left:'0px',
			width: '100%',
			height: '200px',
			position: 'static'
		});
		plus.webview.currentWebview().append(map);
	}
}
		</script>
		<style type="text/css">
*{
	-webkit-user-select: none;
}
html,body{
	margin: 0px;
	padding: 0px;
	height: 100%;
}
		</style>
	</head>
	<body>
		<button onclick="createMap()">创建地图控件</button>
	</body>
</html>

关于地图的导航，可以用到


plus.maps.openSysMap( dst, des, src );

这个方法可以调起系统第三方进行导航

dst: ( Point ) 必选 导航目的地坐标
要求使用WGS-84坐标系值，即GPS获取的值。

des: ( String ) 必选 导航目的地描述
要求使用WGS-84坐标系，即GPS获取的值。

src: ( Point ) 必选 导航起始地描述

同时关于uni，还有关于map的一些操作；

打开地图选择位置：

uni.chooseLocation({
    success: function (res) {
        console.log('位置名称：' + res.name);
        console.log('详细地址：' + res.address);
        console.log('纬度：' + res.latitude);
        console.log('经度：' + res.longitude);
    }
});

DJANDAB

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于地图

地图控件，在实战中相信大家都遇到过用到经纬度。uni-app提供了一些apiuni.getLocation({ type: 'wgs84', success: function (res) { console.log('当前位置的经度：' + res.longitude); console.log('当前位置的纬度：' + res.latitu...
复制链接

扫一扫

关于地图

“相关推荐”对你有帮助么？