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
The JS API allows you to specify the deployment environment (service region) it connects to by configuring the key and security key in the console request.
Sample Code (Using Singapore as an Example)
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "「The security key you applied for」",
};
window._AMapServiceConfig = {
type: 'oversea_sg', // Deployment environment: 'oversea_sg' (Singapore) | 'oversea_de' (Germany)
};
</script>
<script src="https://sg-webapi.opnavi.com/maps?v=2.0&key=「The application key you applied for」"></script>
<!-- To connect to Germany: change the src above to https://de-webapi.opnavi.com/maps?v=2.0&key=..., and set type to 'oversea_de' -->
<script type="text/javascript">
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>The JS API allows you to specify the deployment environment (service region) to connect to via the global configuration object window._AMapServiceConfig. The type field is a preset environment switch.
window._AMapServiceConfig = {
type: 'oversea_sg', // Deployment environment: 'oversea_sg' (Singapore) | 'oversea_de' (Germany)
};Deployment Environment Notes
The deployment region is jointly determined by the entry script domain and the type value. When switching regions, both must be updated together (i.e., the two commented-out sections in the code above):
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);