찾다
웹 프론트엔드uni-appuniapp을 사용하여 간단한 지도 탐색 개발

uniapp을 사용하여 간단한 지도 내비게이션을 개발하는 방법은 무엇입니까? 이 기사는 간단한 지도를 만드는 데 도움이 되기를 바랍니다.

uniapp을 사용하여 간단한 지도 탐색 개발

먼저 렌더링을 살펴보겠습니다

uniapp을 사용하여 간단한 지도 탐색 개발

uniapp을 사용하여 간단한 지도 탐색 개발

간단한 지도

그림 1의 지도를 보면 a지점이 b지점과 연결되어 있는 것을 알 수 있으며, 기본정보와 기본정보 컨트롤(확대, 축소, 지정된 지점으로 돌아가기)에 대해서는 단계별로 별도로 설명하겠습니다.

필수 구성

먼저 manifest.json앱 모듈에서 지도를 구성하고 키를 추가해야 합니다. 관련 맵코드>가 없으면 해당 개발자 플랫폼에서 신청하시면 됩니다<code>manifest.json中的 app模块中配置地图,并添加相关地图的key,如果没有可在相关开发者平台进行申请

uniapp을 사용하여 간단한 지도 탐색 개발

配置好这一部分就可以开始使用map组件了

地图标记点

在uniapp map中想创建标记点就需要使用到一个属性 markers

我们先来看一下markers的常用属性

名称 说明 类型 必填
id 标记点id number true
latitude 纬度 number true
longitude 经度 number true
iconPath 显示的图标 string false
callout 自定义标记点上方的气泡框 Object false
label 为标记点傍边增加标签 Object false

查看更多请查看:

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

了解过这些我们就可以使用markers属性创建标记点了, markers属性是数组类型的,所以应该这样创建标记点

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

如果想添加更多的标记点就可以继续在数组中添加object

每个object都代表了一个标记点

挂载

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

坐标连线

想让我们的坐标连线就需要使用到 polyline 属性。

我们先来看一下polyline

uniapp을 사용하여 간단한 지도 탐색 개발이 부분을 구성한 후 지도 구성 요소를 사용할 수 있습니다먼저 마커namedescriptiontyperequiredidmarker id번호 ㅋㅋㅋ 아이콘 표시됨stringfalse 설명선 마커 포인트 위의 풍선 상자를 사용자 정의하세요Objectfalselabel마커 포인트에 라벨을 추가하세요Objectfalse
자세히 보기:
    // 连线
    this.polyline = [
        // 第一条线
        {
            // 每个点的经纬度
            points: [{34.7486, 113.6709}, {28.7486, 113.6709}],
            // 颜色
            color: "#000",
            // 宽度
            width: 10
        }
    ]
mount
    <map :polyline="polyline"></map>
지도 마커 포인트 유니앱 지도에 마커 포인트를 생성하려면, markers 속성을 ​​사용해야 합니다.
의 공통 속성을 살펴보겠습니다.
https://uniapp.dcloud.io/comComponent/map.html 이 점을 이해한 후 markers 속성을 ​​사용하여 마커 포인트, markers를 생성할 수 있습니다. code> 속성은 배열 유형이므로 마커 포인트는 다음과 같이 생성되어야 합니다 더 많은 마커 포인트를 추가하려면 계속해서 배열에 객체를 추가하면 됩니다. 각 객체는 둘 다 표시된 지점을 나타냅니다
🎜🎜좌표 연결🎜🎜🎜🎜좌표를 연결하려면 폴리라인 속성. 🎜🎜먼저 <code>폴리라인🎜🎜🎜🎜🎜Name🎜🎜Description🎜🎜Type🎜🎜Required🎜🎜🎜🎜🎜🎜points🎜🎜위도와 경도🎜 🎜 배열🎜🎜 true🎜🎜🎜🎜color🎜🎜선 색상🎜🎜string🎜🎜false🎜🎜🎜🎜width🎜🎜line width🎜🎜Number🎜🎜false🎜🎜🎜🎜iconPath 🎜 🎜표시된 아이콘🎜🎜string🎜🎜false🎜 🎜 🎜🎜arrowLine🎜🎜화살표가 있는 선🎜🎜Boolean🎜🎜false🎜🎜🎜🎜colorList🎜🎜Rainbow display🎜🎜Array🎜🎜false🎜🎜🎜🎜

平台差异请查看

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
        }
    ]

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

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

放大缩小

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

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

uniapp을 사용하여 간단한 지도 탐색 개발

回到指定位置

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

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

uniapp을 사용하여 간단한 지도 탐색 개발

导航弹框

图二中的地图应用选择弹框则是使用了 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);
                });
            }
    })
}

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

腾讯

app url

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

web url

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

百度

app url

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

web url

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

推荐:《uniapp教程

위 내용은 uniapp을 사용하여 간단한 지도 탐색 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
이 기사는 掘金社区에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
VSCode中如何开发uni-app?(教程分享)VSCode中如何开发uni-app?(教程分享)May 13, 2022 pm 08:11 PM

VSCode中如何开发uni-app?下面本篇文章给大家分享一下VSCode中开发uni-app的教程,这可能是最好、最详细的教程了。快来看看!

利用uniapp开发一个简单的地图导航利用uniapp开发一个简单的地图导航Jun 09, 2022 pm 07:46 PM

怎么利用uniapp开发一个简单的地图导航?本篇文章就来为大家提供一个制作简单地图的思路,希望对大家有所帮助!

聊聊如何利用uniapp开发一个贪吃蛇小游戏!聊聊如何利用uniapp开发一个贪吃蛇小游戏!May 20, 2022 pm 07:56 PM

如何利用uniapp开发一个贪吃蛇小游戏?下面本篇文章就手把手带大家在uniapp中实现贪吃蛇小游戏,希望对大家有所帮助!

uni-app vue3接口请求怎么封装uni-app vue3接口请求怎么封装May 11, 2023 pm 07:28 PM

uni-app接口,全局方法封装1.在根目录创建一个api文件,在api文件夹中创建api.js,baseUrl.js和http.js文件2.baseUrl.js文件代码exportdefault"https://XXXX.test03.qcw800.com/api/"3.http.js文件代码exportfunctionhttps(opts,data){lethttpDefaultOpts={url:opts.url,data:data,method:opts.method

手把手带你开发一个uni-app日历插件(并发布)手把手带你开发一个uni-app日历插件(并发布)Jun 30, 2022 pm 08:13 PM

本篇文章手把手带大家开发一个uni-app日历插件,介绍下一款日历插件是如何从开发到发布的,希望对大家有所帮助!

实例讲解uniapp实现多选框的全选功能实例讲解uniapp实现多选框的全选功能Jun 22, 2022 am 11:57 AM

本篇文章给大家带来了关于uniapp的相关知识,其中主要整理了实现多选框的全选功能的相关问题,无法实现全选的原因是动态修改checkbox的checked字段时,界面上的状态能够实时变化,但是无法触发checkbox-group的change事件,下面一起来看一下,希望对大家有帮助。

聊聊uniapp的scroll-view下拉加载聊聊uniapp的scroll-view下拉加载Jul 14, 2022 pm 09:07 PM

uniapp怎么实现scroll-view下拉加载?下面本篇文章聊聊uniapp微信小程序scroll-view的下拉加载,希望对大家有所帮助!

实例详解uniapp如何实现电话录音功能(附代码)实例详解uniapp如何实现电话录音功能(附代码)Jan 05, 2023 pm 04:41 PM

本篇文章给大家带来了关于uniapp的相关知识,其中主要介绍了怎么用uniapp实现拨打电话并且还能同步录音的功能,感兴趣的朋友一起来看一下吧,希望对大家有帮助。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.