vue-amap中添加高德地图地图的自定义样式

lancnn

已于 2023-02-21 10:51:32 修改

阅读量3.1w

点赞数 7

分类专栏： vue 高德地图文章标签： vue 高德地图高德地图自定义地图高德地图路线规划

于 2019-08-20 13:53:40 首次发布

本文链接：https://blog.csdn.net/weixin_41767649/article/details/99838052

版权

vue 同时被 2 个专栏收录

27 篇文章 2 订阅

订阅专栏

高德地图

2 篇文章 0 订阅

订阅专栏

高德地图的自定义官方样式列表：

使用： amap://styles/+ 样式的名称
如：使用标准颜色
amap://styles/normal
依次类推
normal （标准）、dark（幻影黑）、light（月光银）、whitesmoke（远山黛）、fresh（草色青）、grey（雅士灰）、graffiti（涂鸦）、macaron（马卡龙）、blue（靛青蓝）、darkblue（极夜蓝）、wine（酱籽）

使用vue-amap 添加高德地图自定义样式

安装 vue-amap

npm install -S vue-amap

vue中：

<template>
<div class="demo-box">
  <div>
      <div class="demo">
        <el-amap vid="amapDemo"  :events="mapEvents"  />
       </div>
      <div>马卡龙</div>
  </div>
  <div>
      <div class="demo">
        <el-amap vid="amapGraffitiDemo" :events="graffitiMapEv"  />
       </div>
      <div>涂鸦</div>
  </div>
  <div>
      <div class="demo">
        <el-amap vid="amapBlueDemo" :events="darkblueMapEv"  />
       </div>
      <div>极夜蓝</div>
  </div>
  <div>
      <div class="demo">
        <el-amap vid="amapSelfDemo"  :events="selfMapEv"  class="self-map-demo"/>
       </div>
      <div>自定义</div>
  </div>
</div>
</template>
<script>
  export default {
      name: "",
      data() {
          return {
            mapEvents: {
              init(o) {o.setMapStyle('amap://styles/macaron');}
            },
            graffitiMapEv:{
              init(o) {o.setMapStyle('amap://styles/graffiti');}
            },
            darkblueMapEv:{
               init(o) { o.setMapStyle('amap://styles/darkblue');}
            },
            selfMapEv:{
              init(o) {o.setMapStyle("amap://styles/57994c871bb604a4c79184f5f65d8782");}
            }
        }
     }
 }
</script>
<style scoped>
.demo-box{
   display: flex;
   flex-wrap: wrap;
}
.demo-box >div{
  margin-right: 20px;
}
.demo{
  width: 500px;
  height: 300px;
  padding: 10px;
  border: 1px solid #ddd;
  box-sizing: border-box;
}
.self-map-demo {
      background: teal;
       background-image: url("https://img2.baidu.com/it/u=3063029439,2036275027&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800");
       background-position: center;
    }
</style>

main.js

import AMap from 'vue-amap';
Vue.use(AMap);
// 初始化vue-amap
AMap.initAMapApiLoader({
  // 高德的key
  key: '改成自己的key'
});

效果：
在这里插入图片描述

自定义高德地图的背景颜色，使用高德地图

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    html,body{
      margin: 0;
    }
    .map-wrapper {
      width: 100%;
      height: 100vh;
      /*background: teal;*/
       background-image: url("https://hbimg.huabanimg.com/29431c1ae57e34250406e642983cc586fd1723e61f1ca3-ILytYd_fw658/format/webp"); 
    }
    #container{
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
 <script src="https://webapi.amap.com/maps?v=1.4.15&key=97e17a5e76b498925b1b181dc9691168"></script>
 <div class="map-wrapper">
  <div id="container"></div>
 </div>
 <script>
   //初始化地图
   var map = new AMap.Map('container', {
     resizeEnable: true, //是否监控地图容器尺寸变化
     mapStyle: "amap://styles/57994c871bb604a4c79184f5f65d8782"
   });
  </script>
</body>
</html>

效果：

说明：
我在高德地图官网自定义了一个地图的地面为透明色，这时高德地图的背景色就是透明的了，然后在地图的父亲元素添加背景色就可以了。
高德自定义地图链接
有图片创建地图和创建地图样式两种方式，我选择的是创建地图样式，然后选择一种地图样式，点击创建，然后根据自己的需求，更改一些地图元素的颜色和透明度，最后保存发布，会生成样式id。

使用方法：amap://styles/样式ID

   //初始化地图时加载样式
   var map = new AMap.Map('container', {
     resizeEnable: true, //是否监控地图容器尺寸变化
     mapStyle: "amap://styles/57994c871bb604a4c79184f5f65d8782"
   });

使用setMapStyle设置样式：

 var map = new AMap.Map('container', {
      resizeEnable: true//是否监控地图容器尺寸变化
    });
 map.setMapStyle( "amap://styles/57994c871bb604a4c79184f5f65d8782");

添加高德原生的点图标和路线规划的插件：

在mapEvents中添加：

   mapEvents: {
      init(o) {
          let marker = new AMap.Marker({ //点图标
              position: [121.59996, 31.197646]
           });
          marker.setMap(o);
         o.plugin(["AMap.Walking "], function() {
              var driving = new AMap.Walking({
                map: o,
                showTraffic: false,//去掉实时路况
                autoFitView: true, 
                // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
                policy: AMap.DrivingPolicy.LEAST_TIME
              })
              o.addControl(driving);
         })
    }
}

更多关于路线规划的属性参考官网API：

路线规划

lancnn

关注

7
点赞
踩
63

收藏

觉得还不错? 一键收藏
打赏
20
评论
vue-amap中添加高德地图地图的自定义样式

vue-amap中添加高德地图地图的自定义样式高德地图的自定义样式列表：使用： amap://styles/+ 样式的名称如：使用标准颜色amap://styles/normal依次类推标准normal幻影黑dark月光银light远山黛whitesmoke草色青fresh雅士灰grey涂鸦graffiti马卡龙maca...
复制链接

扫一扫