Quick Start
This article explains how to create a key and develop a simple map application.
The map is a key feature within our comprehensive suite of advanced mapping tools. Should you require access to premium features or additional support, please initiate a support ticket to request a business consultation.
The first map example
1、Implementation Steps
1.1 HTML Page Preparation
The basic structure code for writing an HTML page requires a <div> node as a map container, and an id attribute should be specified for this <div>. In this tutorial, <div id=\"container\"></div> is used, and you can customize the id.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="initial-scale=1.0, user-scalable=no, width=device-width"
/>
<title>HELLO，AMAP!</title>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>1.2 Loading and initialization of JS API and map
Introduce the key and security key in the console request.
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "「The security key you applied for」",
};
window._AMapServiceConfig = {
type: 'oversea', // Deployment Environment Setup
};
</script>
<script src="https://sg-webapi.opnavi.com/maps?v=2.0&key=「The application key you applied for」"></script>
<script>
const map = new AMap.Map("container", {
viewMode: "3D", //Default to 2D mode
zoom: 11, //Zoom level
showOversea: true, //Enable world Map
center: [77.193045, 28.59086], //Center point
});
</script>To avoid errors related to key during development, please ensure the correct use of key and security key.
1.3 Add point markers to the map
The JS API provides the capability to draw overlays on the map, and now we are using the add() method to add a default point Marker.
const marker = new AMap.Marker({
position: [77.193045, 28.59086],
});
map.add(marker);1.4 Add events to the Marker and trigger the InfoWindow
The instances of Map point markers and vector graphics provided by the JS API all support events and mouse or touch operations will trigger the corresponding events We bind the click event to the point marker and handle the callback event of the click by adding the InfoWindow information window.
const infoWindow = new AMap.InfoWindow({
//Create information form
isCustom: true, //Use custom form
content: "<div>HELLO,AMAP!</div>", //The content of the message form can be any HTML fragment
offset: new AMap.Pixel(16, -45),
});
const onMarkerClick = function (e) {
infoWindow.open(map, e.target.getPosition());
//e.target is the Marker that was clicked
};
const marker = new AMap.Marker({
position: [77.193045, 28.59086],
});
map.add(marker);
marker.on("click", onMarkerClick); 1.5 Add a Polyline to the map
Just like point markers, add a Polyline to the map using the add() method.
const lineArr = [
[77.075972, 28.634261],
[77.407622, 28.643301],
[77.167296, 28.559504],
];
const polyline = new AMap.Polyline({
path: lineArr,
strokeColor: "#3366FF",
strokeWeight: 5,
strokeStyle: "solid",
});
map.add(polyline);