我们平时引入地图的时候,就是默认的颜色 ,但是如果自定义颜色 ,可以根绝类型来选择自己的颜色
这个就是通过 高德改的
我们首先在高德开发者平台(首页 | 高德控制台)去申请key 值
申请完key 之后 我们可以找到 自定义地图
然后点击自定义地图去编辑 选择样式,选择适合的样式,然后我们在发布就可以使用了 ,发布之后 会有个 amap:// 就是我们要引入在代码之中的
我们要去安装高德npm包 npm i @amap/amap-jsapi-loader -S
然后代码展示
<template>
<div>
<LoadingVue v-if="loadingkey"></LoadingVue>
<div id="amapcontainer" style="width: 100vw; height: 100vh"></div>
</div>
</template>
<script>
import { getAction } from "../../utils/httpRequest.js";
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
securityJsCode: "", // '「申请的安全密钥」',
};
export default {
data() {
return {
cityId: "", // 城市id
latitude: "", // 维度
longitude: "", //经度
marke: [],
loadingkey: false,
};
},
created() {
this.cityId = this.$route.query.cityId;
this.GuideListMap();
},
mounted() {
const startTime = new Date().getTime();
const diff = new Date().getTime() - startTime;
this.loadingkey = true;
setTimeout(() => {
// 调用异步方法加载数据
}, Math.max(0, 400 - diff));
//DOM初始化完成进行地图初始化
this.initAMap();
},
methods: {
initAMap() {
AMapLoader.load({
key: "你申请的key",
version: "2.0",
plugins: [
"AMap.Scale",
"AMap.ToolBar",
"AMap.ControlBar",
"AMap.Geocoder",
"AMap.Marker",
"AMap.CitySearch",
"AMap.Geolocation",
"AMap.AutoComplete",
"AMap.InfoWindow",
],
})
.then((AMap) => {
this.map = new AMap.Map("amapcontainer", {
resizeEnable: true,
viewMode: "2D",
zoomEnable: true,
dragEnable: true,
doubleClickZoom: true,
zoom: 10,
center: [Number(this.longitude), Number(this.latitude)],
zooms: [5, 20], // 设置地图允许的缩放级别范围
mapStyle: "amap://-------", // 设置地图显示的样式
});
this.marke.forEach((item) => {
let glng = Number(item.glng);
let glat = Number(item.glat);
let name = item.name;
let coverImg = item.coverImg;
let Valid = item.id;
var markerContent =
'<div class="custom-content-marker" style="background-color: #fff; display: flex; align-items: center; width:100px;border-radius: 10px; ">' +
' <img src="' +
coverImg +
'" style="width:36px; height:30px;padding: 6px; border-radius: 10px;" >' +
// 使用 coverImg 变量作为图片的 src
' <span class="close-btn" style=" font-size: 10px;display: inline; ">' +
name +
"</span>" +
"</div>";
var startMarker = new AMap.Marker({
position: new AMap.LngLat(glng, glat),
content: markerContent,
});
// 将id绑定到Marker对象上,以便在事件处理中引用
startMarker.adId = Valid;
// 绑定点击事件 跳转到app 里面,给app 传递参数
startMarker.on("click", (event) => {
// 直接从Marker对象上获取id
var markerId = startMarker.adId;
window.uni.postMessage({
data: {
action: "backmap",
markerId: markerId,
},
});
});
this.map.add(startMarker); // 将每个标记点添加到地图
});
this.map.setBounds(imageLayer.getBounds()); // 设置地图视野范围为图片的范围
})
.catch((e) => {
console.log(e);
});
},
},
};
</script>