1. Presenting the map
First of all, you have your own account, and then register your own key value and key on the AutoNavi open platform
Then put this code under the public\index.html file
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "「您申请的安全密钥」",
}
</script>
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=2.0&key=「您申请的应用Key」">
</script>
Then find a page,
<template>
<div class="content">
<div id="container"></div>
</div>
</template>
<script>
export default {
mounted() {
this.getMap();
},
methods: {
getMap() {
var map = new AMap.Map("container", {
viewMode: "2D", // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
zoom: 11, //初始化地图层级
center: [116.397428, 39.90923], //初始化地图中心点
});
},
},
};
</script>
<style scoped>
#container {
width: 100wh;
height: 93vh;
}
</style> put it on. Refresh, and you've got a map like this.
It should be noted that when initializing and loading the map, the calling method should be written in mounted instead of created. Secondly, I positioned our capital as the center point, and you can also locate the location you want according to your needs
Just modify this location.
2. Modify the map background
If you don't want this original color, or the big screen you made is in other colors, open the console in the Gaode map API - find a custom map - you can design it yourself, or ask your ui lady to design it for you , and even pay for their ready-made templates, select and click to share, copy the id of the template style into the code
3. Boundaries of administrative divisions
If you want to highlight a certain city, take Beijing as an example, refer to Subordinate Administrative District Query-Administrative Division Query-Example Center-JS API 2.0 Example | Gaode Map API
Made a "stroke" with the black background of the style I just set as the background and the prominent point of Beijing
Here is the rendering
The following is the specific code, just cv directly to the map we just made.
var district = null;
var polygon;
function drawBounds() {
//加载行政区划插件
// if (!district) {
//实例化DistrictSearch
var opts = {
subdistrict: 0, //获取边界不需要返回下级行政区
extensions: "all", //返回行政区边界坐标组等具体信息
level: "district", //查询行政级别为 市
};
district = new AMap.DistrictSearch(opts);
// }
//行政区查询
district.search("北京市", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政区划polygon
for (var i = 0; i < bounds.length; i += 1) {
//构造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定义轮廓的粗细
path: bounds,
fillOpacity: 0.1, // 遮罩层透明度
fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //视口自适应
}
});
}
drawBounds();
4. Add covering
An overlay is an image or text placed on a map.
Let's put the pictures first.
Then just write down, this paragraph can be placed directly under the drawBounds() method.
// 我们先来定义几个要出现图标的点，这个你也是可以通过接口区去拿到，然后放进去，我这个是案例久
var lnglats = [
[116.39, 39.92],
[116.41, 39.93],
[116.43, 39.91],
[116.46, 39.93],
];
var markers = []; //存放覆盖物的数组
for (var i = 0; i < lnglats.length; i++) {
// 这就是去遍历需要添加覆盖物图片的数组，让他的每一项上面加一个图片，只需要用到他的坐标点，和你要加的图片，都可以随意变换
var lnglat = lnglats[i];
var marker = new AMap.Marker({
position: new AMap.LngLat(lnglat[0], lnglat[1]),
icon: require("../../assets/map/img.png"),
});
markers.push(marker);
}
// 创建覆盖物群组，并将 marker 传给 OverlayGroup
var overlayGroups = new AMap.OverlayGroup(markers);
// 添加覆盖物群组
function addOverlayGroup() {
map.add(overlayGroups);
}
addOverlayGroup(); //覆盖物出现了。The following is the display effect diagram~
At this time, you will find that the icon we created is too large to meet our expectations, so we should modify the image size next ----
You can modify the picture style in the above for loop, and you don’t have to use this picture. Every item it traverses is a point, so you can put different pictures for it according to the position or other
(Here is the code to modify the icon size ---)
for (var i = 0; i < lnglats.length; i++) {
// 这就是去遍历需要添加覆盖物图片的数组，让他的每一项上面加一个图片，只需要用到他的坐标点，和你要加的图片，都可以随意变换
var lnglat = lnglats[i];
var icons = require("../../assets/map/img.png");
// 创建点实例
var iconSmall = new AMap.Icon({
size: new AMap.Size(25, 26), // 图标尺寸
image: icons, // Icon的图像
// imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量，适于雪碧图等
imageSize: new AMap.Size(25, 26), // 根据所设置的大小拉伸或压缩图片
});
var marker = new AMap.Marker({
position: new AMap.LngLat(lnglat[0], lnglat[1]),
icon: iconSmall,
});
markers.push(marker);
}The following is the effect picture after modifying the picture
5. Add text markup
To put it bluntly, text markup is a kind of overlay, but it is just adding pictures, and now it is text.
Because the text mark is added to each point, it is still the same as adding the picture just now, just add the following code in the for loop just traversed.
let label = new AMap.Text({
text: "我是第" + i + "个文本标记",
anchor: "center", // 设置文本标记锚点
draggable: true,
cursor: "pointer",
// angle: 10,
style: {
padding: "10px",
borderColor: "#57AFBB",
borderRadius: "5px",
backgroundColor: "#0f2b42",
width: "15rem",
height: "45px",
lineHeight: "25px",
fontFamily: "微软雅黑",
fontSize: "18px",
"text-align": "center",
color: "#0efcff",
},
position: lnglat,
offset: new AMap.Pixel(20, 50), // 设置文本偏移量
});
label.setMap(map);
6. Map zooming
zoom indicates the zoom level, the larger the number, the greater the magnification and the more accurate the position.
Generally, it is to display or not display part of the content according to the zoom level of the map. Let's take the text mark added above as an example. It will be displayed when it is zoomed in to a certain extent, and it will not be displayed when it is zoomed out.
map.on("zoomend", () => {
let zoom = map.getZoom(); // 获取缩放级别
console.log("zoom", zoom); //你可以打印缩放的层级
for (let i = 0; i < this.labell.length; i++) {
//刚开始的时候因为上面定义的 zoom为11，所以不到15也就是不显示字体，所以用下面的方法清除
map.remove(this.labell[i]);
}
if (zoom > 15) {
//超过15显示
for (let i = 0; i < this.labell.length; i++) {
this.labell[i].setMap(map);
}
} else {
for (let i = 0; i < this.labell.length; i++) {
map.remove(this.labell[i]);
}
}
});The above code only takes two parts of the picture below, and there is one modification and definition, remember to change 0~
Put the renderings below
It can be seen that it is not displayed at the beginning, and when I zoom in and out to 15, it will be displayed
7. Information window
For the display of the information window, click the small icon to display a small bullet box, which is a bit of a comment function. The basic usage is very simple, three steps, just call the registration call + event.
This is the rendering
Style optimization of info window
This is the most basic and default way of writing, the following is the adjustment of the information window style,
Modify the background color
Overall code addition: here is the entire map method
getMap() {
var map = new AMap.Map("container", {
viewMode: "2D", // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
zoom: 11, //初始化地图层级
center: [116.39, 39.92], //初始化地图中心点
mapStyle: "amap://styles/5f1483245b363ab2e7526f4b833dcb27", //设置地图的显示样式
});
var district = null;
var polygon;
function drawBounds() {
//加载行政区划插件
// if (!district) {
//实例化DistrictSearch
var opts = {
subdistrict: 0, //获取边界不需要返回下级行政区
extensions: "all", //返回行政区边界坐标组等具体信息
level: "district", //查询行政级别为 市
};
district = new AMap.DistrictSearch(opts);
// }
//行政区查询
district.search("北京市", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政区划polygon
for (var i = 0; i < bounds.length; i += 1) {
//构造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定义轮廓的粗细
path: bounds,
fillOpacity: 0.1, // 遮罩层透明度
fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //视口自适应
}
});
district.search("怀柔区", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政区划polygon
for (var i = 0; i < bounds.length; i += 1) {
//构造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定义轮廓的粗细
path: bounds,
fillOpacity: 0.1, // 遮罩层透明度
fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //视口自适应
}
});
district.search("门头沟区", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政区划polygon
for (var i = 0; i < bounds.length; i += 1) {
//构造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定义轮廓的粗细
path: bounds,
fillOpacity: 0.1, // 遮罩层透明度
fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //视口自适应
}
});
district.search("平谷区", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政区划polygon
for (var i = 0; i < bounds.length; i += 1) {
//构造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定义轮廓的粗细
path: bounds,
fillOpacity: 0.1, // 遮罩层透明度
fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //视口自适应
}
});
district.search("密云区", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政区划polygon
for (var i = 0; i < bounds.length; i += 1) {
//构造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定义轮廓的粗细
path: bounds,
fillOpacity: 0.1, // 遮罩层透明度
fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //视口自适应
}
});
district.search("顺义区", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政区划polygon
for (var i = 0; i < bounds.length; i += 1) {
//构造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定义轮廓的粗细
path: bounds,
fillOpacity: 0.1, // 遮罩层透明度
fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //视口自适应
}
});
district.search("朝阳区", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政区划polygon
for (var i = 0; i < bounds.length; i += 1) {
//构造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定义轮廓的粗细
path: bounds,
fillOpacity: 0.1, // 遮罩层透明度
fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //视口自适应
}
});
district.search("石景山区", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政区划polygon
for (var i = 0; i < bounds.length; i += 1) {
//构造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定义轮廓的粗细
path: bounds,
fillOpacity: 0.1, // 遮罩层透明度
fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //视口自适应
}
});
district.search("西城区", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政区划polygon
for (var i = 0; i < bounds.length; i += 1) {
//构造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定义轮廓的粗细
path: bounds,
fillOpacity: 0.1, // 遮罩层透明度
fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //视口自适应
}
});
district.search("大兴区", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政区划polygon
for (var i = 0; i < bounds.length; i += 1) {
//构造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定义轮廓的粗细
path: bounds,
fillOpacity: 0.1, // 遮罩层透明度
fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //视口自适应
}
});
district.search("东城区", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政区划polygon
for (var i = 0; i < bounds.length; i += 1) {
//构造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定义轮廓的粗细
path: bounds,
fillOpacity: 0.1, // 遮罩层透明度
fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //视口自适应
}
});
district.search("海淀区", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政区划polygon
for (var i = 0; i < bounds.length; i += 1) {
//构造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定义轮廓的粗细
path: bounds,
fillOpacity: 0.1, // 遮罩层透明度
fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //视口自适应
}
});
district.search("昌平区", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政区划polygon
for (var i = 0; i < bounds.length; i += 1) {
//构造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定义轮廓的粗细
path: bounds,
fillOpacity: 0.1, // 遮罩层透明度
fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //视口自适应
}
});
district.search("延庆区", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政区划polygon
for (var i = 0; i < bounds.length; i += 1) {
//构造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定义轮廓的粗细
path: bounds,
fillOpacity: 0.1, // 遮罩层透明度
fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //视口自适应
}
});
district.search("通州区", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政区划polygon
for (var i = 0; i < bounds.length; i += 1) {
//构造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定义轮廓的粗细
path: bounds,
fillOpacity: 0.1, // 遮罩层透明度
fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //视口自适应
}
});
district.search("房山区", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政区划polygon
for (var i = 0; i < bounds.length; i += 1) {
//构造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定义轮廓的粗细
path: bounds,
fillOpacity: 0.1, // 遮罩层透明度
fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //视口自适应
}
});
district.search("丰台区", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政区划polygon
for (var i = 0; i < bounds.length; i += 1) {
//构造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定义轮廓的粗细
path: bounds,
fillOpacity: 0.1, // 遮罩层透明度
fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //视口自适应
}
});
}
drawBounds();
// 我们先来定义几个要出现图标的点，这个你也是可以通过接口区去拿到，然后放进去，我这个是案例久
var lnglats = [
[116.39, 39.92],
[116.41, 39.93],
[116.43, 39.91],
[116.46, 39.93],
];
var markers = []; //存放覆盖物的数组
var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
for (var i = 0; i < lnglats.length; i++) {
// 这就是去遍历需要添加覆盖物图片的数组，让他的每一项上面加一个图片，只需要用到他的坐标点，和你要加的图片，都可以随意变换
var lnglat = lnglats[i];
var icons = require("../../assets/map/img.png");
// 创建点实例
var iconSmall = new AMap.Icon({
size: new AMap.Size(25, 26), // 图标尺寸
image: icons, // Icon的图像
// imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量，适于雪碧图等
imageSize: new AMap.Size(25, 26), // 根据所设置的大小拉伸或压缩图片
});
var marker = new AMap.Marker({
position: new AMap.LngLat(lnglat[0], lnglat[1]),
icon: iconSmall,
});
// marker.content = "我是第" + (i + 1) + "个Marker";
var info = [];
info.push(
`<div style=" padding:7px 0px 6px 3px; width:300px;color:black; font-size:18px">${
"我是第" + i + 1 + "标题"
}</div>`
);
info.push(
`<div style="padding:7px 0px 0px 3px; fontSize：15px;fontFamily:微软雅黑; color:black;">叭叭叭叭叭叭</div>`
);
info.push(
`<div style=" padding:7px 0px 0px 3px; fontSize：15px;fontFamily:微软雅黑; color:black;">嘟嘟嘟嘟嘟嘟</div>`
);
marker.content = info.join("");
marker.on("click", markerClick);
markers.push(marker);
let label = new AMap.Text({
text: "我是第" + i + "个文本标记",
anchor: "center", // 设置文本标记锚点
draggable: true,
cursor: "pointer",
// angle: 10,
style: {
padding: "10px",
borderColor: "#57AFBB",
borderRadius: "5px",
backgroundColor: "#0f2b42",
width: "15rem",
height: "45px",
lineHeight: "25px",
fontFamily: "微软雅黑",
fontSize: "18px",
"text-align": "center",
color: "#0efcff",
},
position: lnglat,
offset: new AMap.Pixel(20, 50), // 设置文本偏移量
});
this.labell[i] = label; // label.setMap(map);
}
function markerClick(e) {
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
// 创建覆盖物群组，并将 marker 传给 OverlayGroup
var overlayGroups = new AMap.OverlayGroup(markers);
// 添加覆盖物群组
function addOverlayGroup() {
map.add(overlayGroups);
}
addOverlayGroup(); //覆盖物出现了。
map.on("zoomend", () => {
let zoom = map.getZoom(); // 获取缩放级别
console.log("zoom", zoom); //你可以打印缩放的层级
for (let i = 0; i < this.labell.length; i++) {
//刚开始的时候因为上面定义的 zoom为11，所以不到15也就是不显示字体，所以用下面的方法清除
map.remove(this.labell[i]);
}
if (zoom > 15) {
//超过15显示
for (let i = 0; i < this.labell.length; i++) {
this.labell[i].setMap(map);
}
} else {
for (let i = 0; i < this.labell.length; i++) {
map.remove(this.labell[i]);
}
}
});
},
Modify the background color of the information window
<style scoped>
#container {
width: 100wh;
height: 93vh;
}
::v-deep .amap-info-content {
background-color: #2f597c;
/* opacity: 0.6; */
}
</style>