1. Problem description:
There are two sets of standard solutions that can be selected according to experience needs:
1. Map Picker (location details)
User experience: ① Display map ② Mark location ③ User selects installed map application
Access to the document:/consumer/cn/doc/harmonyos-guides-V5/map-location-details-V5
2. Navigation Intent Panel
User experience: ① Users select installed map application
Access to the document:/consumer/cn/doc/harmonyos-guides-V5/start-intent-panel-V5
Solution:
Check whether there is any image risk control:/consumer/cn/doc/harmonyos-references-V5/push-image-control-V5
2. Problem description:
How can the position of the marker be fixed in the specified position of the screen in the map component? For example, if I want the marker to be fixedly displayed at the position of screen width/2 and screen height/4, how to set it
Solution:
Here you can try using the stack layout and stack a marker style on the map component.
Try the following demo:
import { map, mapCommon, MapComponent } from '@';
import { AsyncCallback } from '@';
// 1. Import the file
import display from '@'
@Entry
@Component
struct Index3 {
private mapOptions?: ;
private callback?: AsyncCallback<>;
private mapController?: ;
@State screenWidth: number = 0
@State screenHeight: number = 0
aboutToAppear(): void {
// Initialize icon
// Map initialization parameters, set the coordinates and levels of the center point of the map
let target: = {
latitude: 39.9181,
longitude: 116.3970193
};
let cameraPosition: = {
target: target,
zoom: 15
};
= {
position: cameraPosition
};
// Callback for map initialization
= async (err, mapController) => {
if (!err) {
= mapController;
}
}
((err, data) => {
let screenWidth: number = data[0].width
let screenHeight: number = data[0].height
('width = ' + screenWidth + 'height = ' + screenHeight)
('width + height = ' + (data))
})
}
build() {
Stack() {
MapComponent({ mapOptions: , mapCallback: }).width('100%').height('100%')
marker().position({ x: "44%", y: "25%" })
}
}
}
@Component
struct marker {
build() {
Column({ space: 5 }) {
Image($r('')).width(50)
Text("xxxx")
}
.width(50).height(50)
}
}3. Problem description:
Use Huawei Map for map development, and positioning icon display does not meet the needs;
The expectation is to continuously position, the center point of the map does not move with the positioning blue point, and the direction of the positioning blue point rotates according to the direction of the device;
The most suitable one at present is to use the default mode, but the default mode can not rotate in the direction of the blue dot, and it is expected to support the rotation of the device.
Solution:
It has been confirmed that the current specification is to rotate and follow the device during continuous positioning.
The common competitors were analyzed during design, but none of them provided the current demand.
If it is not continuous positioning, you can not follow the movement;
Similar functions should not be added in the future. Please choose which mode you want to use.
4. Problem description:
How to open the candidate list of 3-party map apps?
Solution:
You can use the pull-up navigation application provided by Ability Kit:
/consumer/cn/doc/harmonyos-guides-V5/start-navigation-apps-V5
5. Problem description:
Using the MapComponent component, add a marker in the mapCallback callback, the pin is too big to set the size.
Solution:
import { map, mapCommon, MapComponent } from '@';
import { AsyncCallback } from '@';
import { image } from '@';
@Entry
@Component
struct AddMarker {
private mapOptions?: ;
private mapController?: ;
private callback?: AsyncCallback<>;
@State imagePixelMap: PixelMap | undefined = undefined;
getMarkerPixelMap() {
getContext(this).($r("")).then((data) => {
let arrayBuffer = (, + )
let imageSource: = (arrayBuffer);
((err, value) => {
//Get the size of the image resource
('testTag',`The size of the image is: width:${}height:${}`)
if (err) {return;}
//To convert to PixelMap, you can also set width and height in this, for example, the following is to enlarge 5 times based on the original width and height.
let opts: =
{ editable: true, desiredSize: { height: *5, width: *5 } };
(opts, (err,
pixelMap) => {
('testTag', `createPixelMap`)
= pixelMap
()
})
})
})
}
addMarker() {
// Marker initialization parameters
let markerOptions: = {
position: {
latitude: 31.984410259206815,
longitude: 118.76625379397866
},
rotation: 0,
visible: true,
zIndex: 0,
alpha: 1,
anchorU: 0.5,
anchorV: 1,
clickable: true,
draggable: true,
flat: false,
icon:
};
('testTag', `addMarker`)
?.addMarker(markerOptions);
}
aboutToAppear(): void {
// Map initialization parameters
= {
position: {
target: {
latitude: 31.984410259206815,
longitude: 118.76625379397866
},
zoom: 15
}
};
= async (err, mapController) => {
if (!err) {
('testTag', `callback`)
= mapController;
()
}
};
}
build() {
Stack() {
Column() {
MapComponent({ mapOptions: , mapCallback: });
}.width('100%')
}.height('100%')
}
}6. Problem description:
JavaScript introduces Huawei map API file, where the key must be transcoded through URL. How is it transcoded?
Solution:
The documentation states that when using API keys, you need to call ("Your apiKey", "UTF-8") method to encode the API key. Please refer to the documentation:/consumer/cn/doc/HMSCore-Guides/javascript-api-preparations-0000001078448006#section175508543353
How to protect API keys? :/consumer/cn/doc/HMSCore-Guides/faq-0000001050166999#section78166185011</></>