uniapp | Problems with the use of the official map component

1. Selection of map SDK

Before using uniapp to develop map functions, bloggers used Baidu Maps SDK to develop web map functions.In the initial development, I hope to be able to use the SDK of Baidu Maps, but there is a big difference between uniapp and web-side development when accessing the map function. Uniapp provides a map component

Note: When debugging on the real machine, the

2, different page file selection

When using uniapp for APP development, you can choose the vue page (suffixed with .vue) and the nvue page (suffixed with .nvue). The difference between the

Recommended to read carefully: Uniapp's map component introduction

Use vue page development (there is a hierarchy problem)

If you want to add other content to the map component: you can use the marker, control in the map component and the tag in uniapp; you can also use subNvue, because subNvue is a native page, and the map component is notThere is a hierarchy problem

Note: The tags of uniapp do not support mutual nesting. The content that can be displayed in the cover-view is very limited and involves complex functions. It is recommended to use the vue page+subNvue mixed development

Use nvue page development (no hierarchy problem)
To use nvue page, you need to configure nvue page and vue page in pages.json, there is no hierarchy problem in nvue page, you can nest tags at will in the map component, but the nvue page refers to the weex framework, which only supports flex layout in layout, does not support adding shadows, and supports limited tags and CSS. does not support CSS such as SCSSProcessorCorrect here, nvue page supports scss

Recommended to read carefully: Uniapp's nvue framework tutorial

3. Summary of common problems in development

Question 1: The map does not display after the app is packaged?

The map does not display after the app is packaged. It may be that the map component is not checked in the manifest.json and the secret key of the AutoNavi map or Baidu map is configured. In this case, the map area will be displayed in white after the page containing the map is opened..

Question 2: Markers are not displayed after adding the map component?

In this case, we usually need to obtain the positioning point information from the backend, and dynamically display the positioning as markers on the map. At this time, the array bound by markers is dynamically changed. After changing the array bound by markers,The array bound to markers needs to be reassigned, for example:

markers=[{latitude: Obtained latitude,longitude: Obtained longitude,}]//Reassign markers each time

Question 3: The marker on Android is displayed normally, but the marker on ios cannot be displayed?

This situation may be caused by markers not configuring the id attribute when they are used (pro-test). It is recommended to refer to the usage in Uniapp's hello-uniapp when using it.

Question 4: The use of the relevant JS API of the map component is invalid?

In this case, the map object is obtained through uni.createMapContext, but the use of the related API is invalid.The page we use map must be configured in pages.json, and the page that can be used for routing jumps, otherwise the use of the relevant JS API will be invalid. When the blogger encounters this problem, he uses the relevant subNvue page.JS API.

️️The blogger is also a novice who uses uniapp to develop. If there is something wrong, thank you for correcting!️️