Use uniapp to develop a simple map navigation-uni-app-php.cn

How to use uniapp to develop a simple map navigation? This article will provide you with an idea for making a simple map. I hope it will be helpful to you!

Use uniapp to develop a simple map navigation

Let’s take a look at the renderings first

Use uniapp to develop a simple map navigation

##Simple map

In the map in Figure 1, you can see that point a is connected to point b, basic information and basic controls (zoom in, zoom out, return to a specified point). Next, we will proceed step by step explain.

Required configuration

needs to be in

app module in manifest.json Configure the map and add the key of the relevant map. If not, you can apply on the relevant developer platform

Use uniapp to develop a simple map navigation

After configuring this part, you can start using the map Component

Map marker points

To create marker points in uniapp map, you need to use an attribute

markers .

Let’s first take a look at the common attributes of

markers

NameDescription TypeRequired##idlatitudelongitude##iconPathDisplayed iconstringfalsecalloutCustomize the bubble box above the mark pointObjectfalselabelAdd a label to the marked pointObjectfalseFor more information, please check:


Mark point id	number	true
latitude	number	true
Longitude	number	true

https://uniapp.dcloud.io/component/map.html

After understanding these, we can use
markers

The attribute creates marker points.

markersThe attribute is of array type, so marker points should be created like this

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

Copy after login

If you want to add more marker points, you can continue to add them in the array. object

Each object

represents a marking point

mount

    <map :markers="covers"></map>

Copy after login

Coordinate connection

If we want to connect our coordinates, we need to use the polyline

attribute.

Let’s take a look at the common attributes of polyline

##NameDescription##pointsArray of latitude and longitudeArraytrue colorThe color of the linestringfalsewidthLine widthNumberfalseiconPathDisplayed iconstring falsearrowLineLine with arrowBooleanfalsecolorListRainbow displayArrayfalse

平台差异请查看
https://uniapp.dcloud.io/component/map.html#app平台地图服务商差异

这里我们要注意 两个坑，作者亲踩

polyline 属性是一个数组
polyline 之所以是一个数组是因为他可以同时创建多条线并且连线，每条线还可以有着不同的颜色、箭头、图标等。
points 也是一个数组
points之所以是一个数组是因为他要确定某一条线上的每一个点，且每个点都应该由经纬度构成

所以 polyline 的正确写法应该是这样的

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

Copy after login

如果想添加第二条线仅仅只需要在 polyline 中在添加一个 Object。挂载

    <map :polyline="polyline"></map>

Copy after login

放大缩小

map 的放大缩依赖于 scale 属性所以只需要动态改变 scale 属性的值就可以了。但这里要注意 scale 的取值范围为 3~20，数字类型

这就是放大缩小功能的依赖

Use uniapp to develop a simple map navigation

回到指定位置

想要地图回到指定的位置也非常简单，只需要使用 uni.createMapContext() 方法创建一个 mapContent 对象在使用附带的 moveToLocatio 方法便可让地图回到指定的位置。

// 回到定位点
goBackToLocation() {
   uni.createMapContext("map").moveToLocation({34.7486, 113.6709});
},

Copy after login

Use uniapp to develop a simple map navigation

导航弹框

图二中的地图应用选择弹框则是使用了 h5Plus 的

nativeUI.actionSheet 方法创建了弹框

runtime.openURL 方法打开了导航软件或 h5 页面导航

nativeUI情请查看
https://www.html5plus.org/doc/zh_cn/nativeui.html
runtime情请查看
https://www.html5plus.org/doc/zh_cn/runtime.html

    // 导航 会打开导航菜单供用户选择
    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);
                });
            }
    })
}

Copy after login

这就是我导航弹窗实现的逻辑了, 这里我仅仅只是用了高德地图的选项，大家可以根据需要增加相应地图app，其他常见的我放在下方了。

腾讯

app url

let appUrl = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=${腾讯地图key}`

Copy after login

web url

let webUrl = `https://apis.map.qq.com/uri/v1/marker?marker=coord:经度,纬度;title:名称;addr:地址&referer=myapp`

Copy after login

百度

app url

let appUrl = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`

Copy after login

web url

let webUrl = `http://api.map.baidu.com/marker?location=${latitude},${longitude}&title=${name}&content=${content}&output=html&src=webapp.baidu.openAPIdemo`

Copy after login

Type	Required