Welcome to “Algorithms and the Beauty of Programming” ↑ pay attention to us!

This article was first published on the wechat official account “Beauty of Algorithms and Programming”. Please follow us and learn more about this series of articles in time.

1 Problem Description

As a novice, I recently do a map related project, and then do not know what, do not know what to do, how to do, finally all kinds of Baidu and see the blog, just have some ideas, just know how to call a map. Today we will talk about how to quickly call the MAPS control in H5+, which is used to display the map control on the Web page, and provide various interfaces to manipulate the map control, such as adding punctuation and routes, etc.

2 Solution

You can use openSysMap, Create, and getMapById to navigate, create, and search a map object by invoking third-party system programs.

1. OpenSysMap: invokes third-party programs of the system for navigation

2.Map(ID,options): Creates a Map object

Through real machine debugging, we can see:

And I’m gonna hit Test

Such a simple map roughly call good.

3. Map object parameters

Set the attribute parameters used when the map object is initially displayed.

Properties:

Center: indicates the center of the map

Zoom: (Number type) Zoom level of the map

Type: (MapType type) Indicates the view type of the map

Traffic: (Boolean type) Indicates whether the map displays traffic information

ZoomControls: (Boolean) Whether to display a built-in zoom control for the map

Position: (String) Layout mode of the map control in the Webview window

 

Call this method to create will not be displayed, need to call the Webview window append method to add it to the Webview window to display. Note: You need to set the position and size of the control with the top/left/width/height properties of the styles argument.

Here is an example of an official document:

GetMapById: Searches for created Map objects

Call this method to find the Map object with the specified ID, or return null if it does not exist.

Examples of official documentation:

Real machine operation:

Click create Map control:

Click find map control:

Now that a map control has been created, you can also use the positioning function, set the zoom level, set the map center, and so on, with the following code:

3 summary

And there are many on the official documentation on each map control method, because this is simply bring familiar and fast to use map controls, will not be too much to say other way, if you want to more rich map function, or to refer to the official documentation of each method, have detailed above.

More interesting articles:

\

can



force



The more


strong



accountability


ren


The more


big

Welcome to “Algorithms and the Beauty of Programming” ↑ pay attention to us!

This article was first published on the wechat official account “Beauty of Algorithms and Programming”. Please follow us and learn more about this series of articles in time.

\

More interesting articles:

Where2go team



Wechat: The beauty of algorithms and programming

Long press to identify the QR code to follow us!

Tips: Click on the lower right corner of the page “Write a message” to comment, looking forward to your participation! Looking forward to your forwarding!


The beauty of algorithms and programming

Editor: Zhang Zhenyue

Approved version: Zhang Zhenyue