H5 引用高德地图 ，自定义颜色变化

我们平时引入地图的时候，就是默认的颜色 ，但是如果自定义颜色 ，可以根绝类型来选择自己的颜色 

这个就是通过 高德改的

我们首先在高德开发者平台(首页 | 高德控制台)去申请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>