记录–uniapp map 制作一个简单的地图导航

简易map

在图一的地图中可以看到 a点 连接 到 b点, 基本信息 以及 基本的控件(放大、缩小、回到某个指定的点)，接下来我们分开逐步讲解。

所需配置

需要先在manifest.json中的 app模块中配置地图，并添加相关地图的key，如果没有可在相关开发者平台进行申请

    this.covers = [          {             id: 1,             latitude: 34.7486,             longitude: 113.6709,             iconPath: '../../static/shop.png',             title: "目的地"         }     ];

    // 连线     this.polyline = [         // 第一条线         {             // 每个点的经纬度             points: [{34.7486, 113.6709}, {28.7486, 113.6709}],             // 颜色             color: "#000",             // 宽度             width: 10         }     ]

    // 导航 会打开导航菜单供用户选择     openNavigation(longitude, latitude, name) {         let url = ""; // app url         let webUrl = ""; // web url 用来为用户未安装导航软件时打开浏览器所使用url         plus.nativeUI.actionSheet({ //选择菜单             title: "选择地图应用",             cancel: "取消",             buttons: [{title: "高德地图"}] // 可选的地图类型         }, (e)=> {                 // 判断用户选择的地图             switch (e.index) {                 //下面是拼接url,不同系统以及不同地图都有不同的拼接字段                 case 1:                     // 安卓                     if(plus.os.name == "Android") {                         url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;                     }else {                         url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;                     }                     webUrl = `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${name}&src=mypage&coordinate=gaode`                     break;             }                 // 如果选中             if (url != "") {                 url = encodeURI(url);                 // 打开 app 导航                  plus.runtime.openURL(url, (err)=>{ // 失败回到                     // 如果失败则说明未安装 直接 打开网页版进行导航                     // 毕竟用户可能没有安装app但一定安装的有浏览器                     plus.runtime.openURL(webUrl);                 });             }     }) }