# 一、注册账号 >-**高德开放网址:**[https://lbs.amap.com/dev/id/choose](https://lbs.amap.com/dev/id/choose) ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ddaeb095f1844c98858263c6e4c69d51~tplv-k3u1fbpfcp-zoom-1.image) # 二、创建应用 >账号主体可能有不同的应用项目,比如你想开发DD出行、C操、大Z点评等,每个项目里面又分小程序、`APP`、`PC`端等等不同的使用场景，每个场景都有一个`key`,这个`key`有点像ID、密码之类的，用来访问地图时可以知道哪个应用、接口访问了这个地图。 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8ac0a686c5d848e299032af725e0a25c~tplv-k3u1fbpfcp-zoom-1.image) ## 创建应用 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/df0714aaab054e259adfbc5d746a1ad7~tplv-k3u1fbpfcp-zoom-1.image) ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ad843eb43ac04ba1b23a4d3b8cfc8bfa~tplv-k3u1fbpfcp-zoom-1.image) ## 添加key > - 创建成功后账号主体跟项目都有了,`key`还没有,点击添加创建`key`,用于访问的时候提供身份认证.`key`的名称最好跟应用场景有关,方便后期管理 > ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aadc7302d477469db85d3c279a5d7a28~tplv-k3u1fbpfcp-zoom-1.image) **申请完毕后** ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a371b967a8174f028e3251e6aebe3e42~tplv-k3u1fbpfcp-zoom-1.image) # 三、创建高德地图 > - 在首页可以看到有多种开发支持平台,点击进去可以看到不同应用场景的`API`文档 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/96ef81b97f5744f69628c2c77c9465ef~tplv-k3u1fbpfcp-zoom-1.image) >- 可以在`script`引入,`vue`中可以进行异步加载`JS`,在`mounted`加载完毕以后进行异步加载, >- 这里示范`vue`,`key`是刚刚申请的值 >- **注意:1.window在ssr/nuxt只有在mounted加载以后才出现,所以不能写在created** >- **2.doc需要补全document** ```javascript ``` ## 最后只要在页面添加一句代码 >- 构造参数中的`container`为准备阶段添加的地图容器的id： ```javascript ``` > - 如上已经实现了,只是因为没有宽高所以没有显示,给上宽高就可以了 ```javascript ``` ## 效果 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/73a3097f885e40babeecc97c99fd03ea~tplv-k3u1fbpfcp-zoom-1.image) # 四、简单配置 >- 创建的同时可以给地图设置中心点、级别、显示模式、自定义样式等属性： >- **在container后面添加一个对象** > - `zoom`:缩放级别 > - `center`:指定数组以经纬度的方式设中心点,默认是当前位置 > - `viewMode`:3D视图 ```javascript var map = new AMap.Map("container", { zoom: 20, //级别 center: [113.3245904, 23.1066805], //中心点坐标 viewMode: "3D", //使用3D视图 }); ``` # 五、点标记 >- 官方文档中有很多标记的类型,这里示范点标记 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e95320fd25e4d23a79ad7fb41515623~tplv-k3u1fbpfcp-zoom-1.image) > - 在回调函数里面创建`Marker`实例,添加经纬度和标题,可以分别注释看效果,如果是一起出现部分会发生互斥 ```javascript // 创建一个 Marker 实例： var marker = new AMap.Marker({ //position: new AMap.LngLat(116.39, 39.9), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9] position: [113.3245904, 23.1066805], // 地理位置经纬度 title: "广州塔", // 鼠标移上去时显示的内容 offset: new AMap.Pixel(-100, -100), // 偏移量 // 可以指定图标图片地址 icon: "//vdata.amap.com/icons/b18/1/2.png", // 添加 Icon 图标 URL // 可以自定义标记点显示的内容,允许插入html字符串 content: "

广州塔Content

", }); // 将创建的点标记添加到已有的地图实例： map.add(marker); ``` ## 效果 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d606d9743c6e41b8b7f089977c5cef74~tplv-k3u1fbpfcp-zoom-1.image) # 六、插件的使用 >- 高德中有很多功能,但不是每个都自带而是需要我们自己引入.这里示例一个导航条 >- 插件依旧写在回调函数内,通过`AMap.plugin`方法按需引入插件，第一个参数是插件名,第二个是在`plugin`回调之后使用插件功能。 ```javascript // 插件的添加,第一个参数为插件名,第二个为回调函数 AMap.plugin("AMap.ToolBar", function () { //异步加载插件 var toolbar = new AMap.ToolBar(); map.addControl(toolbar); }); ``` ## 效果 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e1ca14858a140218022a60549e4867e~tplv-k3u1fbpfcp-zoom-1.image) # 七、完整代码参考 ```javascript . ```