Gaode Map API official website: Gaode Open Platform | Gaode Map API .
Table of contents
1. Register a Gaode open platform account
2. Create an application and add a key value
3. Use the map component in the project
2. Create a new MapContainer.vue file in the project as a map component.
4. Define the map initialization function initMap and call:
5. Complete code + detailed comments:
4. Add attributes such as overlays, layers, plug-ins, events, etc. to the map
2. Use the plug-in in the map (map control)
1. Case Effect
Polygon snapping
2. Development preparation
It should be noted that if you want to use the JS API, you must register an account and obtain the key value.
1. Register a Gaode open platform account
Simply enter your personal information to register.
2. Create an application and add a key value
After successful registration, enter the console, and click Create New Application;
After filling in the name, application name and type, you can see the created application;
Next click "Add" to add a key value for the application;
Note that we should choose the Web side (JS API) here;
After clicking Submit, the key value is obtained successfully.
3. Use the map component in the project
1. npm get Amap API
First pass the command in the Vue project
npm i @amap/amap-jsapi-loader --save Obtain Amap API; After the download is successful, you can use the map API in your own projects.
2. Create a new MapContainer.vue file in the project as a map component.
3. Create a div tag in the MapContainer.vue map component as the map container, and set the id attribute of the map container to container;
<template>
<!--地图容器-->
<div id="container"></div>
</template>
<script>
export default {
name: "gaode"
}
</script>
<style scoped>
#container {
width: 80%;
height: 400px;
margin: 100px auto;
border: 2px solid red;
}
</style>vue2 method (this method is used as an example below):
<script>
import AMapLoader from '@amap/amap-jsapi-loader'; //引入
export default {
name: "gaode",
data() {
return {
map: null //初始化 map 对象
}
}
}
</script>vue3 way:
<script>
import {shallowRef} from '@vue/reactivity' //引入
export default {
name: "gaode",
setup() {
const map = shallowRef(null);
return {
map,
}
},
}
</script>4. Define the map initialization function initMap and call:
methods: {
initMap() {
AMapLoader.load({
key: "ed2ea36f8564541569c370254845d93d", //此处填入我们注册账号后获取的Key
version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [''], //需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap) => {
this.map = new AMap.Map("container", { //设置地图容器id
viewMode: "3D", //是否为3D地图模式
zoom: 5, //初始化地图级别
center: [105.602725, 37.076636], //初始化地图中心点位置
});
}).catch(e => {
console.log(e);
})
},
},
mounted() {
//挂载阶段调用，DOM初始化完成进行地图初始化
this.initMap();
}5. Complete code + detailed comments:
<template>
<div>
<div id="container"></div>
</div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
name: "gaode",
data() {
return {
map: null //初始化 map 对象
}
},
methods: {
initMap() {
AMapLoader.load({
key: "ed2ea36f8564541569c370254845d93d", //此处填入我们注册账号后获取的Key
version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [''], //需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap) => {
this.map = new AMap.Map("container", { //设置地图容器id
viewMode: "3D", //是否为3D地图模式
zoom: 5, //初始化地图级别
center: [105.602725, 37.076636], //初始化地图中心点位置
});
}).catch(e => {
console.log(e);
})
},
},
mounted() {
//DOM初始化完成进行地图初始化
this.initMap();
}
}
</script>
<style>
#container {
width: 80%;
height: 400px;
margin: 100px auto;
border: 1px solid red;
}
</style>4. Add attributes such as overlays, layers, plug-ins, events, etc. to the map
After the configuration of the first three steps, a basic AutoNavi map is formed, but this is definitely not enough in practical applications, and there will be many demands in the project. So when we want to change its style, or add some other properties on the map such as layers, point markers, and click events, just add **this.map = new AMap.Map("container", Just add the relevant code at the same level as { }**.
Let's just give a few examples:
1. Add layers
By default, the map only displays the standard basemap. If you need to overlay other layers, you can add layers through the map.add method. We try to add a satellite layer TileLayer.Satellite , as follows:
The effect is as follows, the original map becomes a satellite map:
2. Use the plug-in in the map (map control)
JS API provides many plug-in functions, these functions will not be delivered along with the JSAPI main resource actively, and these plug-in functions need to be introduced before they can be used. Before using the plugin, we need to introduce each plugin into the plugin array, and then use addControl to add it to the map.
The following code adds three plugins: Layer Switching, Scale and Eagle Eye:
The effect is as follows:
3. Other settings
The method is the method described above, much the same. After mastering the method, it is easy to set up bells and whistles. For more properties and plug-ins, please refer to the JS API official website: Overview-Map JS API v2.0 | Gaode Map API Gaode Open Platform Official Website[Here is picture 017]https: https://lbs.amap.com/api/jsapi-v2/summar