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

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

使用: 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:

路线规划

  • 7
    点赞
  • 63
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 20
    评论
在使用高德地图API和Vue3实现自定义弹窗样式时,可以参考以下步骤: 1. 首先,初始化地图弹窗实例,并设置isCustom为true,表示使用自定义窗体。可以使用AMap.InfoWindow类来创建地图弹窗实例,并设置偏移量等属性。\[1\] 2. 在处理地图标记物点击事件时,可以通过获取点击的标记物对象,设置动画效果,并获取相应的内容。可以使用AMap.InfoWindow的setContent方法设置弹窗内容,然后使用open方法打开弹窗。\[1\] 3. 可以参考高德地图官方提供的demo样式,该demo展示了自定义弹窗的样式。可以在官方demo查看代码和样式,以便参考和使用。\[2\] 4. 高德地图官网还提供了自定义弹窗内容的例子,使用了Dom操作的方式来实现。可以使用Vue的全局APIVue.extend方法来创建一个Vue子类构造器,然后通过实例化该构造器来创建一个Vue对象,类似于Dom的DocumentFragment接口。这样可以使用Vue的方式来实现自定义弹窗的Dom操作。\[3\] 综上所述,你可以使用高德地图API和Vue3来实现自定义弹窗样式。可以参考高德地图官方提供的demo和文档,根据自己的需求进行相应的代码编写和样式设计。 #### 引用[.reference_title] - *1* *3* [高德地图自定义弹窗内容](https://blog.csdn.net/fredricen/article/details/106172766)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [VUE 高德自定义弹窗样式不生效?(AMap.InfoWindow弹窗样式问题)](https://blog.csdn.net/weixin_39921970/article/details/120744647)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 20
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lancnn

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值