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!
Let’s take a look at the renderings first
##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 inapp 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
Map marker points
To create marker points in uniapp map, you need to use an attributemarkers .
markers
Description | Type | Required | |
---|---|---|---|
Mark point id | number | true | |
latitude | number | true | |
Longitude | number | true | ##iconPath |
string | false | callout | |
Object | false | label | |
Object | false |
https://uniapp.dcloud.io/component/map.htmlThe attribute creates marker points.After understanding these, we can use
markers
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: '../../static/shop.png', title: "目的地" } ];
If you want to add more marker points, you can continue to add them in the array.
object, Each
object
mount
<map :markers="covers"></map>
Coordinate connectionIf we want to connect our coordinates, we need to use the polyline
attribute. Let’s take a look at the common attributes of
polyline
Type | Required | ##points | |
---|---|---|---|
true | color | The color of the line | |
false | width | Line width | |
false | iconPath | Displayed icon | |
false | arrowLine | Line with arrow | |
false | colorList | Rainbow display | |
false |
The above is the detailed content of Use uniapp to develop a simple map navigation. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Dreamweaver CS6
Visual web development tools

SublimeText3 Linux new version
SublimeText3 Linux latest version

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

Atom editor mac version download
The most popular open source editor
