uni-app传入地址打开地图获取定位

planningRoute.js

function openMapRoute(lat,lon,cityName) {
	var url = '';
	if (plus.os.name == 'Android') {
		var hasBaiduMap = plus.runtime.isApplicationExist({
			pname: 'com.baidu.BaiduMap',
			action: 'baidumap://'
		});
		var hasAmap = plus.runtime.isApplicationExist({
			pname: 'com.autonavi.minimap',
			action: 'androidamap://'
		});
		var urlBaiduMap = 'baidumap://map/marker?location=' + lat + ',' + lon + '&title=' + cityName + '&src=源应用';
		var urlAmap = 'androidamap://viewMap?sourceApplication=源应用&poiname=' + cityName + '&lat=' + lat + '&lon=' + lon +
			'&dev=0';
		if (hasAmap && hasBaiduMap) {
			plus.nativeUI.actionSheet({
				title: '选择地图应用',
				cancel: '取消',
				buttons: [{
					title: '百度地图'
				}, {
					title: '高德地图'
				}]
			}, function(e) {
				switch (e.index) {
					case 1:
						plus.runtime.openURL(urlBaiduMap);
						break;
					case 2:
						plus.runtime.openURL(urlAmap);
						break;
				}
			});
		} else if (hasAmap) {
			plus.runtime.openURL(urlAmap);
		} else if (hasBaiduMap) {
			plus.runtime.openURL(urlBaiduMap);
		} else {
			url = 'geo:' + lat + ',' + lon + '?q=%e6%95%b0%e5%ad%97%e5%a4%a9%e5%a0%82';
			plus.runtime.openURL(url); //如果是国外应用,应该优先使用这个,会启动google地图。这个接口不能统一坐标系,进入百度地图时会有偏差
		}
	} else {
		// iOS上获取本机是否安装了百度高德地图,需要在manifest里配置,在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加(如urlschemewhitelist:["iosamap","baidumap"])
		plus.nativeUI.actionSheet({
			title: '选择地图应用',
			cancel: '取消',
			buttons: [{
				title: 'Apple地图'
			}, {
				title: '百度地图'
			}, {
				title: '高德地图'
			}]
		}, function(e) {
			switch (e.index) {
				case 1:
					url = 'http://maps.apple.com/?q=%e6%95%b0%e5%ad%97%e5%a4%a9%e5%a0%82&ll=' + lat + ',' + lon +
						'&spn=0.008766,0.019441';
					break;
				case 2:
					url = 'baidumap://map/marker?location=' + lat + ',' + lon + '&title=' + cityName + '&src=源应用';
					break;
				case 3:
					url = 'iosamap://viewMap?sourceApplication=源应用&poiname=' + cityName + '&lat=' + lat + '&lon=' + lon + '&dev=0';
					break;
				default:
					break;
			}
			if (url != '') {
				plus.runtime.openURL(url, function(e) {
					plus.nativeUI.alert('本机未安装指定的地图应用');
				});
			}
		});
	}
}
// 获取地址坐标,注入坐标,开启地图
export default function addressCoordinates(cityName) {
	plus.maps.Map.geocode(
		cityName,
		event => {
			var address = event.address; // 转换后的地理位置
			var point = event.coord; // 转换后的坐标信息
			var coordType = event.coordType; // 转换后的坐标系类型
			// 注入
			openMapRoute(point.latitude, point.longitude,cityName)
		},
		e => {
			var address = e.address; // 转换后的地理位置
			var point = e.coord; // 转换后的坐标信息
			var coordType = e.coordType; // 转换后的坐标系类型
			// 注入
			openMapRoute(point.latitude, point.longitude,cityName)
		}
	);
}

enterprise.vue

1.先导入

import planningRoute from '@/static/utils/planningRoute.js'

2.调用

planningRoute(address){
	planningRoute(address)
}
### 如何在uni-appApp端项目中引入和配置谷歌地图API #### 创建并获取Google Maps API密钥 为了能够在应用程序中使用谷歌地图服务,开发者需要先注册一个Google Cloud账号,并创建一个新的项目。接着,在该平台上启用Maps JavaScript API以及其他可能需要用到的服务(比如Geocoding API)。最后一步是从控制台生成一个API Key用于后续的地图加载。 #### 安装必要的插件或模块 对于uni-app来说,虽然官方并没有直接提供针对原生Android/iOS平台上的google maps的支持[^2],但是可以通过第三方库或者自定义webview的方式来实现这一功能。一种常见的做法是利用`dcloud/uni-map-plugin-google`这类由社区维护的地图插件来进行集成: ```bash npm install dcloud/uni-map-plugin-google --save ``` #### 修改manifest文件以适应不同操作系统的要求 由于涉及到调用外部资源和服务,因此还需要调整项目的`manifest.json`配置文件中的权限设置部分,确保应用拥有访问网络以及定位设备位置的权利。另外需要注意的是,在iOS环境下还需额外声明NSLocationWhenInUseUsageDescription键值对来描述为何请求地理位置信息;而在安卓方面则要记得添加meta-data标签指定所使用的api key: ```json { "permissions": { ... "android.permission.ACCESS_FINE_LOCATION": {}, "android.permission.INTERNET": {} }, "ios": { "info.plist": { "NSLocationWhenInUseUsageDescription": "我们需要您的位置以便为您提供更精准的地图服务" } }, "android": { "application": { "metaData": [ {"name": "com.google.android.geo.API_KEY", "value": "$your_google_maps_api_key"} ] } } } ``` #### 编写页面逻辑展示地图控件 当完成了上述准备工作之后就可以着手编写具体的业务代码了。这里给出一段简单的示例用来说明如何在一个vue单文件组件内嵌入google map实例: ```html <template> <div id="map"></div> </template> <script> import { load } from 'dcloud/uni-map-plugin-google'; export default { mounted() { const initMap = async () => { try { await load(); new google.maps.Map(document.getElementById('map'), { center: { lat: -34.397, lng: 150.644 }, zoom: 8, }); } catch (error) { console.error(error); } }; initMap(); } }; </script> <style scoped> #map { height: 100vh; width: 100vw; } </style> ``` 此段代码首先导入了之前提到过的辅助函数load(),它负责按需加载所需的sdk; 接着是在生命周期钩子mounted里边执行异步操作完成地图对象初始化工作,并传入初始中心坐标参数与缩放级别等属性值给构造器方法new google.maps.Map(). 此外还设置了样式让容器占据整个视窗空间从而达到全屏显示的效果.
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值