H5之vue3+高德地图api

众所周知,在移动端app中,iOS定位和安卓定位都可以使用GPS,配合着高德,百度,腾讯的api可以很方便的处理定位,导航,路线规划等一系列问题,但是对于H5端的定位情况,却有些复杂.

浏览器定位是否能调GPS辅助?路线规划,精细定位是否准确?这些问题需要一一探索

一.浏览器IP定位

浏览器ip定位是一种粗略的,只能获取到当前城市的定位方式,最简单的有两种方式:

1:使用浏览器自带 geolocation 方法,获取IP和当前IP的大致经纬度,代码如下:

if (navigator.geolocation)navigator.geolocation.getCurrentPosition(showPosition, showError);else console.log("该浏览器无法获取IP");function showPosition(position: object) {console.log(position);
}function showError(error: object) {console.log("H5错误编码  " + error.code);
}

2.使用各大厂商的ip定位服务,免费版每天限额大概5000个,其原理是向厂商发送一条请求,请求会携带自身IP,返回值包含该IP的详细信息,:https://restapi.amap.com/v3/ip?key="自己申请的key".

以下代码以高德地图为例:

import axios from "axios";//引入axiosaxios.get("https://restapi.amap.com/v3/ip?key=你申请的key").then((res: object) => {console.log(res)});

二.浏览器精确定位

浏览器的精确定位就需要使用厂商的API接口:高德开放平台 | 高德地图API,其中开发文档,API都很详细,可以前往查看使用.

下面我以vue3+高德地图API的形式展示:

首先npm安装依赖 : npm i @amap/amap-jsapi-loader --save

1.创建地图面板,初始化地图:

import AMapLoader from "@amap/amap-jsapi-loader";import { reactive,onMounted } from "vue";import { shallowRef } from "@vue/reactivity";const map = shallowRef(null);//地图面板const Map = reactive({myMap: {}, //把AMap中的方法保存在浏览器lng:"",lat:""
});//
const initMap = () => {AMapLoader.load({key: "你的key", // 申请Web端开发者Keyversion: "2.0", // 指定要加载的 JSAPI 的版本plugins: ["AMap.Geolocation",], // 需要使用的的插件列表,此处以定位为例}).then((AMap) => {Map.myMap = AMap;//保存获取到的方法//初始化地图房源地图map.value = new AMap.Map("container", //绑定container
{enableHighAccuracy: true, //是否使用高精度定位，默认:trueresizeEnable: true,viewMode: "3D", //是否为3D地图模式zoom: 16, //初始化地图级别//center: [Map.lng, Map.lat], //初始化地图中心点位置// zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点});//调用获取定位方法getGeolocation();});
};//地图定位
function getGeolocation() {var Geolocation = new Map.myMap.Geolocation({enableHighAccuracy: true, //是否使用高精度定位，默认:truetimeout: 10000, //超过10秒后停止定位，默认：5s// position: "RB", //定位按钮的停靠位置// offset: [10, 240], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]panToLocation: false,});map.value.addControl(Geolocation);Geolocation.getCurrentPosition(function (status: any, result: any) {if (status == "complete") {onComplete(result);} else {onError(result);}});
}//解析定位结果
function onComplete(data: any) {console.log(data);map.lat = data.position.lat;map.lng = data.position.lng;
}
//解析定位错误信息
function onError(data: any) {console.log(data);
}
onMounted(() => {initMap();
});
<template>
<div id="container">
</div>
</template>

如果不需要地图面板,不添加map.value即可,代码如下:

import AMapLoader from "@amap/amap-jsapi-loader";
import { reactive,onMounted } from "vue";const Map = reactive({myMap: {}, //把AMap中的方法保存在浏览器lng:"",lat:""
});//
const initMap = () => {AMapLoader.load({key: "你的key", // 申请Web端开发者Keyversion: "2.0", // 指定要加载的 JSAPI 的版本plugins: ["AMap.Geolocation",], // 需要使用的的插件列表,此处以定位为例}).then((AMap) => {Map.myMap = AMap;//保存获取到的方法//调用获取定位方法getGeolocation();});
};//地图定位
function getGeolocation() {var Geolocation = new Map.myMap.Geolocation({enableHighAccuracy: true, //是否使用高精度定位，默认:truetimeout: 10000, //超过10秒后停止定位，默认：5s});Geolocation.getCurrentPosition(function (status: any, result: any) {if (status == "complete") {onComplete(result);} else {onError(result);}});
}
//解析定位结果
function onComplete(data: any) {console.log(data);map.lat = data.position.lat;map.lng = data.position.lng;
}
//解析定位错误信息
function onError(data: any) {console.log(data);
}onMounted(() => {initMap();
});

三.高德地图路线规划

路线规划即导航功能,高德地图支持汽车,骑行,步行,打车等方案的路线规划,分为展示端和web端

1.展示端:展示在地图map中,高德地图定义过ui,也可以自己定制

插件

plugins: [

"AMap.Walking",//步行

”AMap.Transfer“,//公交

“AMap.Riding” //骑行

"AMap.Driving",//驾车

], // 需要使用的的插件列表，如比例尺'AMap.Scale'等

本次以驾车行驶展示示例,代码如下:

import AMapLoader from "@amap/amap-jsapi-loader";import { reactive,onMounted } from "vue";import { shallowRef } from "@vue/reactivity";const map = shallowRef(null);//地图面板const Map = reactive({myMap: {}, //把AMap中的方法保存在浏览器lng:"",lat:""
});//
const initMap = () => {AMapLoader.load({key: "你的key", // 申请Web端开发者Keyversion: "2.0", // 指定要加载的 JSAPI 的版本plugins: ["AMap.Driving",], // 需要使用的的插件列表,此处以驾车为例子}).then((AMap) => {Map.myMap = AMap;//保存获取到的方法//初始化地图房源地图map.value = new AMap.Map("container", //绑定container
{enableHighAccuracy: true, //是否使用高精度定位，默认:trueresizeEnable: true,viewMode: "3D", //是否为3D地图模式zoom: 16, //初始化地图级别//center: [Map.lng, Map.lat], //初始化地图中心点位置// zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点});});
};//汽车导航路线规划
function getDriving() {console.log("我是汽车导航");Driving = new Map.myMap.Driving({map: map.value, //地图hideMarkers: false,  //自定义起点终点图标,默认falsepolicy: Map.myMap.DrivingPolicy.LEAST_TIME,//驾车策略,可选择最快,最经济,最近});//传入起点坐标,终点坐标,也可以添加图经点Driving.search([lng, lat],//起点坐标,可通过上面getGeolocation()获取[lng, lat],//终点坐标,服务器获取终点,也可自己设置function (status: any, result: any) {console.log("result", result);});
}<template>
<div id="container">
</div>
</template>

2.web端:通过接口调用,传入开始和结束的坐标或者名称,以对象的形式返回路线方案.代码如下:

路径规划 2.0-API文档-开发指南-Web服务 API | 高德地图API web路线规划文档

import axios from "axios";axios({method: "get",url: "https://restapi.amap.com/v5/direction/driving",params: {key: "你的key",origin: `lng,lat`,//起点destination: `lng,lat`,//终点strategy: "2,0,3",show_fields: "cost",//需要增加的字段},}).then((res: any) => {if (res.status == 1) {console.log("res", res);}});

四.跳转高德地图

我们在定位导航的最后一步,一般是跳转高德地图app,在app内部导航,这是一个很简单的方式.

只需要填写起点,终点,通过mode选择出行方式

//跳转高德地图appfunction getloaction() {window.open("https://uri.amap.com/navigation?from=`lng,lat`,startpoint&to=`lng,lat`,endpoint&mode=car&callnative=1");
}

五.总结

总的来说,各个地图厂商把API封装的都很不错,不过对于各个机型可能会有差异,比如跳转高德地图APP,鸿蒙系统的手机跳转不了等,还需要慢慢发现.

纸上看来终觉浅,欲知此事要躬行,赶快写起来吧!