精华内容
下载资源
问答
  • 高德地图样式
    2022-07-05 09:11:46

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


    前言

    近期项目使用到高德地图,记录一下使用到的一些东西


    提示:以下是本篇文章正文内容,下面案例可供参考

    一、高德地图样式主题设置

    可选样式:
    在这里插入图片描述
    语法格式如下:
    在这里插入图片描述

    二、在vue中使用

    创建地图实例map,引用setMapStyle方法
    代码如下(示例):

     async initMap() {
          let AMap = await AMapLoader.load({
            key: '您申请的key',
            version: '2.0',
            plugins: [
              'AMap.PolygonEditor',
              'AMap.Autocomplete',
              'AMap.PlaceSearch',
              'AMap.Scale',
              'AMap.OverView',
              'AMap.ToolBar',
              'AMap.MapType',
              'AMap.PolyEditor',
              'AMap.CircleEditor',
              'AMap.Geolocation',
              'AMap.Geocoder',
              'AMap.AMapUI']
     
          })
          this.map = new AMap.Map('container', {
            center: [114.206641,24.059909],
            resizeEnable: true,
            zoom: 15,
            plugin: [   //一些工具插件
              {
                pName: 'MapType',  //地图类型
                defaultType: 0,
                events: {
                  init(instance) {
                  }
                }
              }
            ]
          })
          // 缩放地图到合适的视野级别
          this.map.setFitView()
          this.map.setMapStyle('amap://styles/darkblue')
        },
    
    更多相关内容
  • 高德地图自定义信息窗体样式
  • 然后自定义样式就一直是失效的状态,找了一些资料说是高德地图2021年12月02日升级了,自定义的样式要配置安全密钥 jscode(开发环境下选择第二种方式配置安全密钥‘);这个步骤已做但还是无效,最终发现是因为自己的...

    记录一下自定义地图失效的问题~~

    正常引用:

    index:html:
    
    <script src="https://webapi.amap.com/maps?v=1.4.4&key=高德地图key值"></script>
    

    需要引入的页面:Home
    在这里插入图片描述
    这里加载的时候报错了;说是AMap未定义;
    在.eslintrc.js文件加入: globals: { AMap: “true”} ;
    在这里插入图片描述
    然后自定义样式就一直是失效的状态,找了一些资料说是高德地图2021年12月02日升级了,自定义的样式要配置安全密钥 jscode(开发环境下选择第二种方式配置安全密钥‘);这个步骤已做但还是无效,最终发现是因为自己的自定义样式 ’ 未发布‘== 发布一下就可以正常使用了。乌鱼子。。。
    在这里插入图片描述

    展开全文
  • ⚡️ 由于高德api省界描边样式与ui差别很大,所以尝试自定义省界线样式 ⚡️ vue2、vue3实现方式一致,本篇记录vue3实现方式mapConfig.js 组件代码 案例中UI图片,与图分开效果更好 分开实现方式:这样拖动地图...

    ⚡️ 由于高德api省界描边样式与ui差别很大,所以尝试自定义省界线样式
    ⚡️ vue2、vue3实现方式一致,本篇记录vue3实现方式

    效果图(河北省为例)

    在这里插入图片描述

    vue3设置了高德地图安全密钥
    简述主要实现方式
    • 新建图片图层覆盖到所要展示的省份之上,高德图层 apiAMap.ImageLayer,图层图片由ui提供
    • AMap.Bounds([poitn1,poitn2],[poitn3,poitn4])四个点位置控制图层宽高与其地图实际大小重叠
    高德地图获取key、密钥不再叙述
    完整代码(vue3+vite)

    mapConfig.js

    // 高德Key Web端(JS API)
     export const MapKey='你申请的key'
    // 高德安全密钥 Web端(JS API)
     export const MapSecretKey='你的密钥'
    

    组件代码

    <!-- 省界自定义样式 -->
    <template>
      <div class="box">
        <!-- 高德地图容器 -->
        <div id="container"></div>
      </div>
    </template>
    
    <script setup>
    
    import { MapKey, MapSecretKey } from "../config/mapConfig";
    
    //设置安全密钥
    window._AMapSecurityConfig = {
      securityJsCode: `${MapSecretKey}`,
    };
    
    //高德API加载器 安装命令: npm i @amap/amap-jsapi-loader
    import AMapLoader from "@amap/amap-jsapi-loader";
    
    import { onBeforeMount, onMounted, ref } from "vue";
    
    onBeforeMount(() => {
      initMap
        .then((ok) => {
          //加载行政区查询插件
          initDistrictSearch();
          //绘制默认地区边界
          // searchAndBounds("河北省");
        })
        .catch((err) => {
          console.log(err);
        });
    });
    
    // 地图容器
    var map;
    
    //行政区查询容器
    var district;
    //行政区边界数据暂存
    var polygons = [];
    
    // 初始化地图函数
    const initMap = new Promise((resolve, reject) => {
      AMapLoader.load({
        key: `${MapKey}`, // 申请好的Web端开发者Key,首次调用 load 时必填
        version: "1.4.15", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15。 2.0地图加载慢,地图上下留有网格空白,本人小白找不到原因
        plugins: [],
      })
        .then((AMap) => {
          map = new AMap.Map("container", {
            viewMode: "3D", //是否为3D地图模式
            zoom: 7, //初始化地图级别
            center: [116.418261, 39.921984], //初始化地图中心点位置
            mapStyle: "amap://styles/1ab4919ee8d46968b49d9127e873d767",
          });
    
          map.setFeatures(["road", "bg"]);
    
          //获取Bounds四个点位置
          let southwest = getLnglatByDistAndAngle(
            652,
            [116.468664, 39.537057],
            227
          );
          let northeast = getLnglatByDistAndAngle(652, [116.468664, 39.537057], 43);
    		
    		//四个点控制图层位置与省界重合
          let bounds = new AMap.Bounds(
            [southwest[0], southwest[1]],
            [northeast[0], northeast[1]]
          );
    		
    		//设置区域控制,移出区域后自动返回到范围区域
          map.setLimitBounds(new AMap.Bounds(southwest, northeast));
    
          var imageLayer = new AMap.ImageLayer({
            //vue2版本使用require url: require("./bbg.png"),
            url: new URL("./bbg.jpg", import.meta.url).href,//vue3+vite使用这种方式获取图片
            bounds: bounds ,//图片图层
            zooms: [2, 20],
            // opacity: 0.5,
          });
          map.add(imageLayer);
    		
    		//打点的数据
          let cityData = [
            {
              title: "唐山市",
              position: [117.611242, 39.778112],
            },
            {
              title: "张家口市",
              position: [114.885895, 40.768931],
            },
            {
              title: "承德市",
              position: [116.798254, 41.198462],
            },
    
            {
              title: "秦皇岛市",
              position: [118.830725, 40.039356],
            },
            {
              title: "保定市",
              position: [114.480139, 39.039631],
            },
            {
              title: "廊坊市",
              position: [116.064916, 39.303664],
            },
    
            {
              title: "衡水市",
              position: [115.668987, 37.739367],
            },
            {
              title: "沧州市",
              position: [116.838715, 38.304676],
            },
            {
              title: "石家庄市",
              position: [114.514976, 38.042007],
            },
            {
              title: "邯郸市",
              position: [114.53915, 36.6258497],
            },
            {
              title: "邢台市",
              position: [114.765783, 37.548025],
            },
          ];
    	
    	//调用封装的打点方法
          createPoints(cityData, true);
    
          //操作成功
          resolve();
        })
        .catch((e) => {
          //操作失败
          reject(e);
        });
    });
    
    
    
    //传入需要打点的数组-arr,type判断是否带title
    function createPoints(arr, type) {
      let cityArr = [];
      if (type) {
        arr.map((city) => {
          let markerObj = city;
          var markerContent =
            '<div class="custom-content-marker">' + city.title + "</div>";
          markerObj.content = markerContent;
    
          var mark = new AMap.Marker(markerObj);
          cityArr.push(mark);
        });
      } else {
        arr.map((city) => {
          let markerObj = city;
          var markerContent = '<div class="custom-content-marker">' + "</div>";
          markerObj.content = markerContent;
    
          let mark = new AMap.Marker(markerObj);
          cityArr.push(mark);
        });
      }
    
      map.add(cityArr);
    }
    //计算点的位置
    function getLnglatByDistAndAngle(dist, lnglat, angle) {
      let dealDist = dist / Math.sin((45 * Math.PI) / 180);
      const currlng = lnglat[0];
      const currlat = lnglat[1];
      const lng =
        currlng +
        (dealDist * Math.sin((angle * Math.PI) / 180)) /
          (111 * Math.cos((currlat * Math.PI) / 180));
      const lat =
        currlat +
        (dealDist * Math.sin((angle * Math.PI) / 180)) /
          (130 * Math.cos((currlat * Math.PI) / 180));
      return [lng, lat];
    }
    
    //行政区查询插件加载
    function initDistrictSearch() {
      AMap.plugin(["AMap.DistrictSearch"], function () {
        //加载行政区划插件
        if (!district) {
          //实例化DistrictSearch
          let opts = {
            subdistrict: 0, //获取边界不需要返回下级行政区
            extensions: "all", //返回行政区边界坐标组等具体信息
            level: "district", //查询行政级别为 区
          };
          district = new AMap.DistrictSearch(opts);
        }
      });
    }
    
    //边界查询并绘制
    function searchAndBounds(dis) {
      district.search(dis, function (status, result) {
        // 获取边界信息
        let bounds = result.districtList[0].boundaries;
        map.remove(polygons); //清除上次结果
        polygons = [];
        if (bounds) {
          for (let i = 0, l = bounds.length; i < l; i++) {
            //生成行政区划polygon
            let polygon = new AMap.Polygon({
              map: map,
              strokeWeight: 1,
              path: bounds[i],
              fillOpacity: 0,
              fillColor: "red",
              strokeColor: "#031d44",
            });
            polygons.push(polygon);
          }
          // 地图自适应
          map.setFitView();
        }
      });
    }
    </script>
    
    <style scoped>
    .box {
      width: 60%;
      margin-left: 20%;
      height: 100%;
    }
    
    #container {
      width: 100%;
      height: 100%;
    }
    :deep(.custom-content-marker) {
      word-break: keep-all;
      color: #2ddcce;
      font-size: 16px;
      position: relative;
      padding-left: 25px;
      font-weight: 900;
    }
    :deep(.custom-content-marker::before) {
      content: ".";
      width: 6px;
      height: 6px;
      position: absolute;
      text-indent: -9999px;
      background: #fff;
      display: block;
      top: 3px;
      left: 0;
      border-radius: 10px;
      border: 6px solid #00deff;
      -webkit-box-shadow: 0px 0px 12px #fff;
      box-shadow: 0px 0px 12px #fff;
    }
    #controller {
      position: absolute;
      z-index: 99;
      top: 20px;
      left: 100px;
      background: white;
      list-style-type: none;
      width: 120px;
    }
    </style>
    
    
    案例中UI图片,背景图省界线图分开效果更好

    分开实现方式:

    • 容器区域单独设置背景图片
    • 高德地图个人中心自定义高德地图样式,使其陆地背景样式不透明度为0
    • 代码定义只显示一个省份,将省界线图与展示身份重叠

    这样拖动地图不会超出背景图范围

    github源代码:点击跳转到 gitHub 有用点个star吧~

    在这里插入图片描述

    展开全文
  • 现在做这个移动端的项目中有一个地图选址的功能,本来高德地图中有一个现成的选址组件,但是有两个问题,因为他是用iframe引用的,第一改不了样式,这点还勉强能接受;第二他的左上角有一个返回键,在搜索的时候可以...
  • 高德地图自定义地图样式

    千次阅读 2019-10-15 16:29:14
    高德地图开放平台官网的jsAPI中提供了自定义地图的方法: 其中官方提供了10个主题来给开发者们使用 但10个主题并不能满足所有场景,所以官方还提供了自定义地图样式的方法: (1)进入自定义页面,点击创建地图...

    在高德地图开放平台官网的jsAPI中提供了自定义地图的方法:

    1. 其中官方提供了10个主题来给开发者们使用
      在这里插入图片描述
    2. 但10个主题并不能满足所有场景,所以官方还提供了自定义地图样式的方法:

    (1)进入自定义页面,点击创建地图样式:
    在这里插入图片描述

    (2)选择一个与目标样式相近的基础模版然后点击「创建」按钮:

    在这里插入图片描述

    (3)在左边导航栏里选择需要改变样式的模块,比如:陆地,并打开取色板选择想要的颜色来更换掉

    在这里插入图片描述

    (4)样式修改完成之后,点击左上角「退出」键,随即进入自定义地图界面:

    在这里插入图片描述

    (5)点击想要使用的样式中的「发布」按钮,发布成功之后,点击「使用与分享」按钮
    在这里插入图片描述

    (6)可以复制上图中的样式ID来使用,也可以点击分享地图样式给其他账号,在项目中具体使用代码如下:

    这里在引入高德地图的时候必须要使用自定义样式所在的账号的key才可以!比如我在账号A下新建的地图样式,就需要使用A的key,不然不会生效

    //引入高德地图
        <script src="https://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=Map3D,AMap.DistrictLayer,AMap.Scale,AMap.ToolBar"></script>
    
    //使用样式:在amap的配置项找到mapStyle,
    mapStyle: "amap://styles/你的样式ID"//这里样式ID,我这里就是fdb98ba86eaa2e61e2b4c054ebe4989d
    
    

    到这里就结束了,搞定收工!

    展开全文
  • 支持航拍,三维,景区图通过将大图片切成地图瓦片,完全吻合覆盖到高德地图上,支持WGS-84或百度坐标系的切图方式。
  • 主要介绍了vue+高德地图实现地图搜索及点击定位操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 高德api离线化,支持uniapp,web,触屏操作 根据高德api JS文件进行离线化操作
  • 里面包含了elementui结合高德地图的定位已经位置标记相关的资料,里面的定位组件下载就可使用,包含组件和说明文档。
  • Android 高德地图自定义点聚合marker图片及Overlay点击选中功能的代码实现及布局文件
  • 放置Android工程下的... } 在高德地图中指定你写出文件的路径。 String path=Environment.getExternalStoragePublicDirectory("data").getPath()+"/style.data" //该方法在AMap类中提供 setCustomMapStylePath(path);
  • 话不多说,上代码 ... <script type="text/javascript"> window._AMapSecurityConfig = { securityJsCode: '你的安全密钥', ...-- 高德地图展示 --> <template> <div id="allmap
  • 主要介绍了vue项目使用高德地图的定位及关键字搜索功能的实例代码,也是小编踩了无数坑总结出来的经验,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Flutter 接入高德地图插件,并配置地图样式
  • 主要给大家介绍了关于Android基于高德地图完全自定义Marker的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 下载如有问题,可私信博主。下载前建议先查看博客内容,其地址为:https://blog.csdn.net/QQ98281642/article/details/118481878
  • 最近在做北京供水系统的时候需要用到地图展示水厂,但是需要做自定义样式,但是官方样式可以,自己的自定义样式不管咋都不行 解决 官方给出解决方法,附上官方连接:...
  • 高德地图开发自定义地图样式

    千次阅读 2020-01-10 16:46:58
    自定义样式 3、定义结束,点击发布 4、接下来点击使用自定义地图,会生成一串码 5、点击复制,在地图初始化调用这个就可以了 var map = new AMap.Map('container', { zoom: 4, mapStyle: 'amap://styl...
  • 主要介绍了在vue中高德地图引入和轨迹的绘制的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 注册账号并申请 Key 首先,注册开发者账号,成为高德开放平台开发者 登陆之后,在进入「应用管理」 页面「创建新应用」...为应用添加 Key 标题创建自定义地图 vue中在index.html中引入地图key ...使用自定义样式 ...
  • 原生 JavaScript 仿 有赞商户后台,介入高德地图,实现地图自定义区域矩形划分并绑定 ui 层,几乎每行代码都有注释,方便修改理解。 适用多个项目领域,如:外卖送货、共享单车区域划分、配送商品等。 纯前端...
  • mapboxwms天地图,高德地图,谷歌地图,使用最新mapbox,基类封装
  • 高德地图实现全国(省市区,支持穿透)数据分布图,支持世界国省市区的地图显示,支持上下级,多级钻透,自定义数据源,自定义鼠标tip html提示信息,样式,根据高德地图修改,世界(各国:暂时定为中国),全国,省市...
  • vue-amap中添加高德地图地图的自定义样式 var map = new AMap.Map("map-container", { resizeEnable: true, zoom: 10, //级别 // center: [113.663221, 34.7568711], //中心点坐标 viewMode: "2D", //使用3D视图...
  • //这个是自定义的marker样式,由于有3种状态,所以写了3种。 if (data.status == 1) { content = ` ${data.voltage}`; } else if (data.status == 2) { content = ` ${data.voltage}`; } else if (data.status == 3)...
  • 高德地图覆盖物完全解析 由于项目要求,对地图覆盖物需求点击,所以选择marker作为覆盖物主题 起初也为marker要满足设计复杂的图形而苦恼,直到发现sdk中的这个接口 BitmapDescriptor markerIconWoman = ...
  • 最近在使用高德地图自定义样式的时候,发现一个奇怪的问题:使用官网的样式可以生效,但使用自定义样式就死活不生效,如下所示 自定义地图 样式ID: 使用样式: 解决方案:如果后面接的是 样式id,必须加上...
  • 高德地图点聚合,聚合点点击事件,一切效果都需要您自己的key值,单点点击事件,点聚合点击事件后信息窗体每个点添加点击事件。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,137
精华内容 2,054
关键字:

高德地图样式