完成L7 高德图地图底图使用文档

[lzxue]

AntV Open Source Contribution Plan（可选）

• 我同意将这个 Issue 参与 OSCP 计划

Issue 类型

中级任务

任务介绍

新增 gaode.zh.md 文档，单独描述高德地图如何使用，重点描述 高度图 Token使用方式

参照这个文档写 https://github.com/antvis/L7/edit/master/packages/site/docs/api/map/map.zh.md，当前文档是把 Map/GaodeMAP、Mapbox 写在一个文档，现在要支持更多底图所以每个地图单独写文档
在map 目录下面会有 gaodemap.zh.md mapxboxmap.zh.md

参考说明

#1112

[github-actions]

你要找的是不是 (You may look for issues):

1. 74% 完成 腾讯地图底图使用文档  #1989

[aaa1729511481]

aaa1729511481 认领

[5758703]

tigerspringboot2020 认领

[5758703]

5758703 认领

[lzxue]

认领的同学，可以先 Fork L7 项目，然后克隆到本地跑起来

[lzxue]

5758703 认领

高德的暂时也被认领，可以考虑一下，百度和腾讯的问题基本差不多

[aaa1729511481]

一、首先注册高德地图开发者，https://console.amap.com/dev/index
1、在应用管理中添加一个新的应用（记住Key和安全密钥）
二、在项目中找到index.html中引用高德地图
1、在script标签中 引入src="https://webapi.amap.com/loader.js"
2、创建另一个script标签，里面写入
window._AMapSecurityConfig = {
securityJsCode: '第一步里的安全密钥',
}
三、在所需页面引用高德地图实例
1、在所需页面创建一个id为gaodeMap的容器
2、在script标签中引用import { load } from "@amap/amap-jsapi-loader";
3、创建初始化函数，创建高德地图的地图实例，创建地图实例时MapInstance 使用高德地图的实例
以下为简单例子
let AMap = await load({
key: "自己注册的key",
version: "2.0",
plugins: [
"AMap.DistrictSearch",
"AMap.DistrictLayer",
"AMap.TileLayer",
"AMap.Polygon",
"AMap.GeoJSON",
"AMap.Weather",
],
})
let gaodeMap = new AMap.Map('mapBox', {
center: [103.82112953, 30.12207207],//中心点
zoom: 6,
pitch: "30",
viewMode: "2D",
layers: [
new AMap.TileLayer.Satellite() // 卫星图层
]
})

scene.value = new Scene({
    id: 'gaodeMap',  //必须跟页面上的id一致
    logoVisible: false,  //是否显示LOGO
    map: new GaodeMap({
        mapInstance: gaodeMap,  //地图实例使用我们刚刚创建的高德地图的实例
        ......
    })
})

[lzxue]

一、首先注册高德地图开发者，https://console.amap.com/dev/index 1、在应用管理中添加一个新的应用（记住Key和安全密钥） 二、在项目中找到index.html中引用高德地图 1、在script标签中 引入src="https://webapi.amap.com/loader.js" 2、创建另一个script标签，里面写入 window._AMapSecurityConfig = { securityJsCode: '第一步里的安全密钥', } 三、在所需页面引用高德地图实例 1、在所需页面创建一个id为gaodeMap的容器 2、在script标签中引用import { load } from "@amap/amap-jsapi-loader"; 3、创建初始化函数，创建高德地图的地图实例，创建地图实例时MapInstance 使用高德地图的实例 以下为简单例子 let AMap = await load({ key: "自己注册的key", version: "2.0", plugins: [ "AMap.DistrictSearch", "AMap.DistrictLayer", "AMap.TileLayer", "AMap.Polygon", "AMap.GeoJSON", "AMap.Weather", ], }) let gaodeMap = new AMap.Map('mapBox', { center: [103.82112953, 30.12207207],//中心点 zoom: 6, pitch: "30", viewMode: "2D", layers: [ new AMap.TileLayer.Satellite() // 卫星图层 ] })

scene.value = new Scene({
    id: 'gaodeMap',  //必须跟页面上的id一致
    logoVisible: false,  //是否显示LOGO
    map: new GaodeMap({
        mapInstance: gaodeMap,  //地图实例使用我们刚刚创建的高德地图的实例
        ......
    })
})

参照这个文档写 https://github.com/antvis/L7/edit/master/packages/site/docs/api/map/map.zh.md，当前文档是把 Map/GaodeMAP、Mapbox 写在一个文档，现在要支持更多底图所以每个地图单独写文档
在map 目录下面会有 gaodemap.zh.md mapxboxmap.zh.md