一、呈現(xiàn)地圖
首先在擁有一個(gè)自己賬號(hào)，其次高德開放平臺(tái)注冊一個(gè)自己的key值和密鑰
?然后在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=「您申請的應(yīng)用Key」">
</script>
然后找一個(gè)頁面，
<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", // 默認(rèn)使用 2D 模式，如果希望使用帶有俯仰角的 3D 模式，請?jiān)O(shè)置 viewMode: '3D',
zoom: 11, //初始化地圖層級(jí)
center: [116.397428, 39.90923], //初始化地圖中心點(diǎn)
});
},
},
};
</script>
<style scoped>
#container {
width: 100wh;
height: 93vh;
}
</style>?放上去。刷新，于是你就得到了一個(gè)這樣的地圖。
?需要注意的點(diǎn)，初始化加載地圖的時(shí)候，調(diào)用方法應(yīng)該寫在mounted而不是created中。其次，我是以我們的首都為中心點(diǎn)定位的，你也可以根據(jù)需求，定位你想要的位置
修改這個(gè)位置就可以了。
二、修改地圖背景
如果你不想要這個(gè)原顏色，或者你做的大屏是其他顏色的，在高德地圖API中打開控制臺(tái)-找到自定義地圖-你可以自己設(shè)計(jì)，也可找你的ui小姐姐給你設(shè)計(jì)，更甚至掏錢買他們現(xiàn)成的模板，選中點(diǎn)擊分享，復(fù)制模板樣式的id到代碼中
?三、行政區(qū)區(qū)分邊界
你想特別突出某個(gè)城市，那么以北京市為例，參考下屬行政區(qū)查詢-行政區(qū)劃查詢-示例中心-JS API 2.0 示例 | 高德地圖API
做出了以我剛剛設(shè)置了樣式黑底為背景，以北京市為突出點(diǎn)做的“描邊”
這里是效果圖
?下面是具體代碼，直接cv到我們剛剛的地圖下面即可。
var district = null;
var polygon;
function drawBounds() {
//加載行政區(qū)劃插件
// if (!district) {
//實(shí)例化DistrictSearch
var opts = {
subdistrict: 0, //獲取邊界不需要返回下級(jí)行政區(qū)
extensions: "all", //返回行政區(qū)邊界坐標(biāo)組等具體信息
level: "district", //查詢行政級(jí)別為 市
};
district = new AMap.DistrictSearch(opts);
// }
//行政區(qū)查詢
district.search("北京市", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政區(qū)劃polygon
for (var i = 0; i < bounds.length; i += 1) {
//構(gòu)造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定義輪廓的粗細(xì)
path: bounds,
fillOpacity: 0.1, // 遮罩層透明度
fillColor: "", // 遮罩層顏色，沒有代表不覆蓋顏色
strokeColor: "#fff", // 輪廓顏色，因?yàn)榈咨呛谏晕覟榱送癸@效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //視口自適應(yīng)
}
});
}
drawBounds();
?四、添加覆蓋物
覆蓋物就是放在地圖上的圖片或者文字啦。
我們先來放圖片。
接著剛剛的往下寫，這一段直接放到drawBounds()方法下面就可以了。
// 我們先來定義幾個(gè)要出現(xiàn)圖標(biāo)的點(diǎn)，這個(gè)你也是可以通過接口區(qū)去拿到，然后放進(jìn)去，我這個(gè)是案例久
var lnglats = [
[116.39, 39.92],
[116.41, 39.93],
[116.43, 39.91],
[116.46, 39.93],
];
var markers = []; //存放覆蓋物的數(shù)組
for (var i = 0; i < lnglats.length; i++) {
// 這就是去遍歷需要添加覆蓋物圖片的數(shù)組，讓他的每一項(xiàng)上面加一個(gè)圖片，只需要用到他的坐標(biāo)點(diǎn)，和你要加的圖片，都可以隨意變換
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);
}
// 創(chuàng)建覆蓋物群組，并將 marker 傳給 OverlayGroup
var overlayGroups = new AMap.OverlayGroup(markers);
// 添加覆蓋物群組
function addOverlayGroup() {
map.add(overlayGroups);
}
addOverlayGroup(); //覆蓋物出現(xiàn)了。?下面是展示效果圖~
這個(gè)時(shí)候你會(huì)發(fā)現(xiàn)我們創(chuàng)建的圖標(biāo)，太大了，不符合我們的預(yù)期，所以我們接下來應(yīng)該，修改圖片大小----
在上面的for循環(huán)里面修改圖片樣式即可，也不一定非得用這一個(gè)圖片，它遍歷的每一項(xiàng)就是一個(gè)點(diǎn)嘛，所以你可以根據(jù)位置啊或者其他的來給他放不一樣的圖片
（此處是修改圖標(biāo)大小的代碼---）
for (var i = 0; i < lnglats.length; i++) {
// 這就是去遍歷需要添加覆蓋物圖片的數(shù)組，讓他的每一項(xiàng)上面加一個(gè)圖片，只需要用到他的坐標(biāo)點(diǎn)，和你要加的圖片，都可以隨意變換
var lnglat = lnglats[i];
var icons = require("../../assets/map/img.png");
// 創(chuàng)建點(diǎn)實(shí)例
var iconSmall = new AMap.Icon({
size: new AMap.Size(25, 26), // 圖標(biāo)尺寸
image: icons, // Icon的圖像
// imageOffset: new AMap.Pixel(0, -60), // 圖像相對展示區(qū)域的偏移量，適于雪碧圖等
imageSize: new AMap.Size(25, 26), // 根據(jù)所設(shè)置的大小拉伸或壓縮圖片
});
var marker = new AMap.Marker({
position: new AMap.LngLat(lnglat[0], lnglat[1]),
icon: iconSmall,
});
markers.push(marker);
}下面是修改完圖片之后效果圖
?五、添加文本標(biāo)記
說白了，文本標(biāo)記，就是覆蓋物的一種，只不過剛剛是加圖片，現(xiàn)在是文字罷了。
因?yàn)槭墙o每一個(gè)點(diǎn)添加文本標(biāo)記，所以還是跟剛剛添加圖片一樣，在剛剛遍歷的for循環(huán)添加下面的代碼即可。
let label = new AMap.Text({
text: "我是第" + i + "個(gè)文本標(biāo)記",
anchor: "center", // 設(shè)置文本標(biāo)記錨點(diǎn)
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), // 設(shè)置文本偏移量
});
label.setMap(map);
六、地圖縮放
zoom表示的就是縮放層級(jí)，數(shù)字越大，放大倍數(shù)越大，位置就越精準(zhǔn)。
?一般就是根據(jù)地圖的縮放等級(jí)去顯示和不顯示部分內(nèi)容吧，那我們就以上面添加的文本標(biāo)記為例，當(dāng)放大到一定程度再顯示，縮小的時(shí)候就不顯示。
map.on("zoomend", () => {
let zoom = map.getZoom(); // 獲取縮放級(jí)別
console.log("zoom", zoom); //你可以打印縮放的層級(jí)
for (let i = 0; i < this.labell.length; i++) {
//剛開始的時(shí)候因?yàn)樯厦娑x的 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]);
}
}
});上面的代碼僅僅取了下面圖片的兩處，還有一處修改和定義的，自己記得改0~
?下面放效果圖
?可以看出一開始是不顯示的，等我放大放大放大---至15的時(shí)候，就顯示出來了
七、信息窗口
信息窗口的展示，點(diǎn)擊小圖標(biāo)的出現(xiàn)個(gè)小彈框，有點(diǎn)注釋 的作用，基礎(chǔ)用法很簡單，三步走，調(diào)注冊調(diào)用+事件即可。
這個(gè)是效果圖?
信息窗口的樣式優(yōu)化
這是最基礎(chǔ)的最默認(rèn)的寫法，下面是信息窗口樣式的調(diào)整，
?修改背景顏色
整體代碼添加：這里放了整個(gè)map方法哈文章來源：http://www.zghlxwxcb.cn/news/detail-736617.html
getMap() {
var map = new AMap.Map("container", {
viewMode: "2D", // 默認(rèn)使用 2D 模式，如果希望使用帶有俯仰角的 3D 模式，請?jiān)O(shè)置 viewMode: '3D',
zoom: 11, //初始化地圖層級(jí)
center: [116.39, 39.92], //初始化地圖中心點(diǎn)
mapStyle: "amap://styles/5f1483245b363ab2e7526f4b833dcb27", //設(shè)置地圖的顯示樣式
});
var district = null;
var polygon;
function drawBounds() {
//加載行政區(qū)劃插件
// if (!district) {
//實(shí)例化DistrictSearch
var opts = {
subdistrict: 0, //獲取邊界不需要返回下級(jí)行政區(qū)
extensions: "all", //返回行政區(qū)邊界坐標(biāo)組等具體信息
level: "district", //查詢行政級(jí)別為 市
};
district = new AMap.DistrictSearch(opts);
// }
//行政區(qū)查詢
district.search("北京市", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政區(qū)劃polygon
for (var i = 0; i < bounds.length; i += 1) {
//構(gòu)造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定義輪廓的粗細(xì)
path: bounds,
fillOpacity: 0.1, // 遮罩層透明度
fillColor: "", // 遮罩層顏色，沒有代表不覆蓋顏色
strokeColor: "#fff", // 輪廓顏色，因?yàn)榈咨呛谏晕覟榱送癸@效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //視口自適應(yīng)
}
});
district.search("懷柔區(qū)", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政區(qū)劃polygon
for (var i = 0; i < bounds.length; i += 1) {
//構(gòu)造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定義輪廓的粗細(xì)
path: bounds,
fillOpacity: 0.1, // 遮罩層透明度
fillColor: "", // 遮罩層顏色，沒有代表不覆蓋顏色
strokeColor: "#fff", // 輪廓顏色，因?yàn)榈咨呛谏晕覟榱送癸@效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //視口自適應(yīng)
}
});
district.search("門頭溝區(qū)", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政區(qū)劃polygon
for (var i = 0; i < bounds.length; i += 1) {
//構(gòu)造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定義輪廓的粗細(xì)
path: bounds,
fillOpacity: 0.1, // 遮罩層透明度
fillColor: "", // 遮罩層顏色，沒有代表不覆蓋顏色
strokeColor: "#fff", // 輪廓顏色，因?yàn)榈咨呛谏晕覟榱送癸@效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //視口自適應(yīng)
}
});
district.search("平谷區(qū)", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政區(qū)劃polygon
for (var i = 0; i < bounds.length; i += 1) {
//構(gòu)造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定義輪廓的粗細(xì)
path: bounds,
fillOpacity: 0.1, // 遮罩層透明度
fillColor: "", // 遮罩層顏色，沒有代表不覆蓋顏色
strokeColor: "#fff", // 輪廓顏色，因?yàn)榈咨呛谏晕覟榱送癸@效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //視口自適應(yīng)
}
});
district.search("密云區(qū)", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政區(qū)劃polygon
for (var i = 0; i < bounds.length; i += 1) {
//構(gòu)造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定義輪廓的粗細(xì)
path: bounds,
fillOpacity: 0.1, // 遮罩層透明度
fillColor: "", // 遮罩層顏色，沒有代表不覆蓋顏色
strokeColor: "#fff", // 輪廓顏色，因?yàn)榈咨呛谏晕覟榱送癸@效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //視口自適應(yīng)
}
});
district.search("順義區(qū)", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政區(qū)劃polygon
for (var i = 0; i < bounds.length; i += 1) {
//構(gòu)造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定義輪廓的粗細(xì)
path: bounds,
fillOpacity: 0.1, // 遮罩層透明度
fillColor: "", // 遮罩層顏色，沒有代表不覆蓋顏色
strokeColor: "#fff", // 輪廓顏色，因?yàn)榈咨呛谏晕覟榱送癸@效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //視口自適應(yīng)
}
});
district.search("朝陽區(qū)", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政區(qū)劃polygon
for (var i = 0; i < bounds.length; i += 1) {
//構(gòu)造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定義輪廓的粗細(xì)
path: bounds,
fillOpacity: 0.1, // 遮罩層透明度
fillColor: "", // 遮罩層顏色，沒有代表不覆蓋顏色
strokeColor: "#fff", // 輪廓顏色，因?yàn)榈咨呛谏晕覟榱送癸@效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //視口自適應(yīng)
}
});
district.search("石景山區(qū)", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政區(qū)劃polygon
for (var i = 0; i < bounds.length; i += 1) {
//構(gòu)造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定義輪廓的粗細(xì)
path: bounds,
fillOpacity: 0.1, // 遮罩層透明度
fillColor: "", // 遮罩層顏色，沒有代表不覆蓋顏色
strokeColor: "#fff", // 輪廓顏色，因?yàn)榈咨呛谏晕覟榱送癸@效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //視口自適應(yīng)
}
});
district.search("西城區(qū)", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政區(qū)劃polygon
for (var i = 0; i < bounds.length; i += 1) {
//構(gòu)造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定義輪廓的粗細(xì)
path: bounds,
fillOpacity: 0.1, // 遮罩層透明度
fillColor: "", // 遮罩層顏色，沒有代表不覆蓋顏色
strokeColor: "#fff", // 輪廓顏色，因?yàn)榈咨呛谏晕覟榱送癸@效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //視口自適應(yīng)
}
});
district.search("大興區(qū)", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政區(qū)劃polygon
for (var i = 0; i < bounds.length; i += 1) {
//構(gòu)造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定義輪廓的粗細(xì)
path: bounds,
fillOpacity: 0.1, // 遮罩層透明度
fillColor: "", // 遮罩層顏色，沒有代表不覆蓋顏色
strokeColor: "#fff", // 輪廓顏色，因?yàn)榈咨呛谏晕覟榱送癸@效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //視口自適應(yīng)
}
});
district.search("東城區(qū)", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政區(qū)劃polygon
for (var i = 0; i < bounds.length; i += 1) {
//構(gòu)造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定義輪廓的粗細(xì)
path: bounds,
fillOpacity: 0.1, // 遮罩層透明度
fillColor: "", // 遮罩層顏色，沒有代表不覆蓋顏色
strokeColor: "#fff", // 輪廓顏色，因?yàn)榈咨呛谏晕覟榱送癸@效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //視口自適應(yīng)
}
});
district.search("海淀區(qū)", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政區(qū)劃polygon
for (var i = 0; i < bounds.length; i += 1) {
//構(gòu)造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定義輪廓的粗細(xì)
path: bounds,
fillOpacity: 0.1, // 遮罩層透明度
fillColor: "", // 遮罩層顏色，沒有代表不覆蓋顏色
strokeColor: "#fff", // 輪廓顏色，因?yàn)榈咨呛谏晕覟榱送癸@效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //視口自適應(yīng)
}
});
district.search("昌平區(qū)", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政區(qū)劃polygon
for (var i = 0; i < bounds.length; i += 1) {
//構(gòu)造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定義輪廓的粗細(xì)
path: bounds,
fillOpacity: 0.1, // 遮罩層透明度
fillColor: "", // 遮罩層顏色，沒有代表不覆蓋顏色
strokeColor: "#fff", // 輪廓顏色，因?yàn)榈咨呛谏晕覟榱送癸@效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //視口自適應(yīng)
}
});
district.search("延慶區(qū)", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政區(qū)劃polygon
for (var i = 0; i < bounds.length; i += 1) {
//構(gòu)造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定義輪廓的粗細(xì)
path: bounds,
fillOpacity: 0.1, // 遮罩層透明度
fillColor: "", // 遮罩層顏色，沒有代表不覆蓋顏色
strokeColor: "#fff", // 輪廓顏色，因?yàn)榈咨呛谏晕覟榱送癸@效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //視口自適應(yīng)
}
});
district.search("通州區(qū)", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政區(qū)劃polygon
for (var i = 0; i < bounds.length; i += 1) {
//構(gòu)造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定義輪廓的粗細(xì)
path: bounds,
fillOpacity: 0.1, // 遮罩層透明度
fillColor: "", // 遮罩層顏色，沒有代表不覆蓋顏色
strokeColor: "#fff", // 輪廓顏色，因?yàn)榈咨呛谏晕覟榱送癸@效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //視口自適應(yīng)
}
});
district.search("房山區(qū)", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政區(qū)劃polygon
for (var i = 0; i < bounds.length; i += 1) {
//構(gòu)造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定義輪廓的粗細(xì)
path: bounds,
fillOpacity: 0.1, // 遮罩層透明度
fillColor: "", // 遮罩層顏色，沒有代表不覆蓋顏色
strokeColor: "#fff", // 輪廓顏色，因?yàn)榈咨呛谏晕覟榱送癸@效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //視口自適應(yīng)
}
});
district.search("豐臺(tái)區(qū)", (status, result) => {
var bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政區(qū)劃polygon
for (var i = 0; i < bounds.length; i += 1) {
//構(gòu)造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 2, // 定義輪廓的粗細(xì)
path: bounds,
fillOpacity: 0.1, // 遮罩層透明度
fillColor: "", // 遮罩層顏色，沒有代表不覆蓋顏色
strokeColor: "#fff", // 輪廓顏色，因?yàn)榈咨呛谏晕覟榱送癸@效果用的白色
});
map.add(polygon);
map.setFitView(polygon); //視口自適應(yīng)
}
});
}
drawBounds();
// 我們先來定義幾個(gè)要出現(xiàn)圖標(biāo)的點(diǎn)，這個(gè)你也是可以通過接口區(qū)去拿到，然后放進(jìn)去，我這個(gè)是案例久
var lnglats = [
[116.39, 39.92],
[116.41, 39.93],
[116.43, 39.91],
[116.46, 39.93],
];
var markers = []; //存放覆蓋物的數(shù)組
var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
for (var i = 0; i < lnglats.length; i++) {
// 這就是去遍歷需要添加覆蓋物圖片的數(shù)組，讓他的每一項(xiàng)上面加一個(gè)圖片，只需要用到他的坐標(biāo)點(diǎn)，和你要加的圖片，都可以隨意變換
var lnglat = lnglats[i];
var icons = require("../../assets/map/img.png");
// 創(chuàng)建點(diǎn)實(shí)例
var iconSmall = new AMap.Icon({
size: new AMap.Size(25, 26), // 圖標(biāo)尺寸
image: icons, // Icon的圖像
// imageOffset: new AMap.Pixel(0, -60), // 圖像相對展示區(qū)域的偏移量，適于雪碧圖等
imageSize: new AMap.Size(25, 26), // 根據(jù)所設(shè)置的大小拉伸或壓縮圖片
});
var marker = new AMap.Marker({
position: new AMap.LngLat(lnglat[0], lnglat[1]),
icon: iconSmall,
});
// marker.content = "我是第" + (i + 1) + "個(gè)Marker";
var info = [];
info.push(
`<div style=" padding:7px 0px 6px 3px; width:300px;color:black; font-size:18px">${
"我是第" + i + 1 + "標(biāo)題"
}</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 + "個(gè)文本標(biāo)記",
anchor: "center", // 設(shè)置文本標(biāo)記錨點(diǎn)
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), // 設(shè)置文本偏移量
});
this.labell[i] = label; // label.setMap(map);
}
function markerClick(e) {
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
// 創(chuàng)建覆蓋物群組，并將 marker 傳給 OverlayGroup
var overlayGroups = new AMap.OverlayGroup(markers);
// 添加覆蓋物群組
function addOverlayGroup() {
map.add(overlayGroups);
}
addOverlayGroup(); //覆蓋物出現(xiàn)了。
map.on("zoomend", () => {
let zoom = map.getZoom(); // 獲取縮放級(jí)別
console.log("zoom", zoom); //你可以打印縮放的層級(jí)
for (let i = 0; i < this.labell.length; i++) {
//剛開始的時(shí)候因?yàn)樯厦娑x的 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]);
}
}
});
},
?修改信息窗口背景顏色文章來源地址http://www.zghlxwxcb.cn/news/detail-736617.html
<style scoped>
#container {
width: 100wh;
height: 93vh;
}
::v-deep .amap-info-content {
background-color: #2f597c;
/* opacity: 0.6; */
}
</style>到了這里，關(guān)于高德地圖API使用~Web開發(fā)~從創(chuàng)建到具體功能展示的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
