H5之vue3+高德地图api

一笑

已于 2022-12-06 16:26:08 修改

阅读量2.7k

点赞数 6

文章标签：前端 javascript 开发语言

于 2022-12-06 10:21:15 首次发布

本文链接：https://blog.csdn.net/weixin_42454747/article/details/128196408

版权

众所周知,在移动端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";//引入axios

axios.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端开发者Key
    version: "2.0", // 指定要加载的 JSAPI 的版本
    plugins: [
      "AMap.Geolocation",
    ], // 需要使用的的插件列表,此处以定位为例
  }).then((AMap) => {
    Map.myMap = AMap;//保存获取到的方法

    //初始化地图房源地图
    map.value = new AMap.Map("container", //绑定container
{
      enableHighAccuracy: true, //是否使用高精度定位，默认:true
      resizeEnable: true,
      viewMode: "3D", //是否为3D地图模式
      zoom: 16, //初始化地图级别
      //center: [Map.lng, Map.lat], //初始化地图中心点位置
     // zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
    });
    //调用获取定位方法
     getGeolocation();
  });
};

//地图定位
function getGeolocation() {
  var Geolocation = new Map.myMap.Geolocation({
    enableHighAccuracy: true, //是否使用高精度定位，默认:true
    timeout: 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端开发者Key
    version: "2.0", // 指定要加载的 JSAPI 的版本
    plugins: [
      "AMap.Geolocation",
    ], // 需要使用的的插件列表,此处以定位为例
  }).then((AMap) => {
    Map.myMap = AMap;//保存获取到的方法
    //调用获取定位方法
     getGeolocation();
  });
};

//地图定位
function getGeolocation() {
  var Geolocation = new Map.myMap.Geolocation({
    enableHighAccuracy: true, //是否使用高精度定位，默认:true
    timeout: 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端开发者Key
    version: "2.0", // 指定要加载的 JSAPI 的版本
    plugins: [
      "AMap.Driving",
    ], // 需要使用的的插件列表,此处以驾车为例子
  }).then((AMap) => {
    Map.myMap = AMap;//保存获取到的方法
    //初始化地图房源地图
    map.value = new AMap.Map("container", //绑定container
{
      enableHighAccuracy: true, //是否使用高精度定位，默认:true
      resizeEnable: 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,  //自定义起点终点图标,默认false
    policy: 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选择出行方式

//跳转高德地图app

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