高德地图样式主题设置

Epiphany!

已于 2022-07-05 09:32:14 修改

阅读量2.7k

点赞数

文章标签：前端 vue.js javascript

于 2022-07-05 09:31:30 首次发布

本文链接：https://blog.csdn.net/Yadira9/article/details/125612794

版权

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

文章目录

前言
一、高德地图样式主题设置
二、在vue中使用

前言

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

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

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

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

二、在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')
    },