1. Presentación del mapa
En primer lugar, tiene su propia cuenta y luego registra su propio valor de clave y clave en la plataforma abierta de AutoNavi
Luego coloque este código en el archivo public\index.html
<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>
Luego encuentra una página,
<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> póntelo. Actualice, y tendrá un mapa como este.
Cabe señalar que al inicializar y cargar el mapa, el método de llamada debe escribirse en montado en lugar de creado. En segundo lugar, posicioné nuestra capital como el punto central, y también puede ubicar la ubicación que desee de acuerdo con sus necesidades.
Simplemente modifique esta ubicación.
2. Modificar el fondo del mapa
Si no desea este color original, o la pantalla grande que creó tiene otros colores, abra la consola en la API de mapas de Gaode; busque un mapa personalizado; puede diseñarlo usted mismo o pedirle a su ui lady que lo diseñe para usted, e incluso pague por sus plantillas listas para usar, seleccione y haga clic para compartir, copie la identificación del estilo de la plantilla en el código
3. Límites de las divisiones administrativas
Si desea resaltar una ciudad determinada, tome Beijing como ejemplo, consulte Consulta de distrito administrativo subordinado-Consulta de división administrativa-Centro de ejemplo-JS API 2.0 Ejemplo | Gaode Map API
Hice un "trazo" con el fondo negro del estilo que acabo de poner como fondo y el punto destacado de Beijing
Aquí está la representación
El siguiente es el código específico, solo cv directamente al mapa que acabamos de hacer.
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. Agrega cobertura
Una superposición es una imagen o texto colocado en un mapa.
Pongamos primero las imágenes.
Luego simplemente escriba, este párrafo se puede colocar directamente debajo del método drawBounds().
// 我们先来定义几个要出现图标的点，这个你也是可以通过接口区去拿到，然后放进去，我这个是案例久
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(); //覆盖物出现了。El siguiente es el diagrama de efectos de visualización ~
En este momento, encontrará que el ícono que creamos es demasiado grande para cumplir con nuestras expectativas, por lo que debemos modificar el tamaño de la imagen a continuación ----
Puede modificar el estilo de la imagen en el bucle for anterior, y no tiene que usar esta imagen. Cada elemento que atraviesa es un punto, por lo que puede colocar diferentes imágenes según la posición u otra
(Aquí está el código para modificar el tamaño del icono ---)
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);
}La siguiente es la imagen del efecto después de modificar la imagen.
5. Agregar marcado de texto
Para decirlo sin rodeos, el marcado de texto es una especie de superposición, pero solo agrega imágenes, y ahora es texto.
Debido a que la marca de texto se agrega a cada punto, sigue siendo lo mismo que agregar la imagen en este momento, simplemente agregue el siguiente código en el ciclo for que acaba de atravesar.
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. Zoom del mapa
zoom indica el nivel de zoom, cuanto mayor sea el número, mayor será la ampliación y más precisa la posición.
En general, es para mostrar o no mostrar parte del contenido de acuerdo con el nivel de zoom del mapa. Entonces, tomemos la marca de texto agregada arriba como ejemplo. Se mostrará cuando se amplíe hasta cierto punto, y no se mostrará cuando se aleje.
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]);
}
}
});El código anterior solo toma dos partes de la imagen a continuación, y hay una modificación y definición, recuerde cambiar 0 ~
Ponga las representaciones a continuación
Se puede ver que no se muestra al principio, y cuando acerco y alejo a 15, se mostrará
7. Ventana de información
Para mostrar la ventana de información, haga clic en el icono pequeño para mostrar un pequeño cuadro de viñeta, que es un pequeño comentario. El uso básico es muy simple. Se necesitan tres pasos para ajustar la llamada de registro + evento.
Esta es la representación
Optimización del estilo de la ventana de información
Esta es la forma de escritura más básica y predeterminada, el siguiente es el ajuste del estilo de la ventana de información,
Modificar el color de fondo
Adición de código general: aquí está el método de mapa completo
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]);
}
}
});
},
Modificar el color de fondo de la ventana de información
<style scoped>
#container {
width: 100wh;
height: 93vh;
}
::v-deep .amap-info-content {
background-color: #2f597c;
/* opacity: 0.6; */
}
</style>