html5高德定位api 高德地图js api教程

转载

字节墨海星 2023-07-24 22:34:49

文章标签 html5高德定位api javascript api npm 高德地图 文章分类 HTML5 移动开发

高德地图api文档：https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare

安装

安装推荐使用 JSAPI Loader 进行加载，使用npm安装，引入包的大小非常小。

按 NPM 方式使用 Loader

安装：

npm i @amap/amap-jsapi-loader --save
// 官方文档中加了-dev字段，加了-dev字段就只能在本地的时候使用，部署到服务器后将不引入包

使用：

import AMapLoader from '@amap/amap-jsapi-loader';

AMapLoader.load({
    "key": "您申请的key值",   // 申请好的Web端开发者Key，首次调用 load 时必填
    "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    "plugins": []  //插件列表
}).then((AMap)=>{
    map = new AMap.Map('container');
}).catch(e => {
    console.log(e);
})

注册账号并申请Key

使用高德地图api需要注册高德地图账号并在开发者中心申请key。

注册好账号后登录 https://console.amap.com/dev/key/app 或进入控制台申请key。

首先进入右上角的[应用]，在左侧菜单栏选择[应用管理] => [我的应用]，并根据说明创建新应用，应用创建完成后在相应的应用后面点击添加来获取我们的key。

html5高德定位api 高德地图js api教程_html5高德定位api

我们可以选择Web服务，如果需要其他平台的使用，可以根据需要进行更换，下方可使用服务会列出这个key可以使用的服务。

html5高德定位api 高德地图js api教程_html5高德定位api_02

提交成功后就可以得到key了：

html5高德定位api 高德地图js api教程_高德地图_03

把key直接复制到我们引入高德地图的 AMapLoader.load() 方法中的key就可以了。

基础地图组件使用

可以在load()的then()方法中配置我们的组件：

<div id="container" style="width: 100%; height: 300px;"></div>

// 创建地图方法
createMap() {
  AMapLoader.load({
      "key": "您申请的key值",   // 申请好的Web端开发者Key，首次调用 load 时必填
      "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      "plugins": []  //插件列表
  }).then((AMap)=>{
      let amap = new AMap.Map('container',{ // container为容器的id
          zoom: 15, //初始化地图层级
          center: [112.5266, 27.91507] //初始化地图中心点
      });
  }).catch(e => {
      console.log(e);
  })
}

页面中的效果是这样的：

html5高德定位api 高德地图js api教程_npm_04

可以在高德地图API文档中查看其它地图参数，根据需要进行添加。

其它组件使用

其它的组件可以根据官方文档进行参考，具体的一些组件在教程菜单内：

html5高德定位api 高德地图js api教程_高德地图_05

绝大多数的组件都是通过 map.add(component) 进行实现的，下面就以点标记组件为例详细说明。

点标记组件使用

点标记通过new一个 AMap.Marker 然后加入到我们的map中，具体代码：

// 创建地图方法
createMap() {
  AMapLoader.load({
      "key": "您申请的key值",   // 申请好的Web端开发者Key，首次调用 load 时必填
      "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      "plugins": []  //插件列表
  }).then((AMap)=>{
      let amap = new AMap.Map('container',{ // container为容器的id
          zoom: 15, //初始化地图层级
          center: [112.5266, 27.91507] //初始化地图中心点
      });
      // 标记
      let marker = new AMap.Marker({
        position: [112.5266, 27.91507] // 基点位置
      });
      // 地图添加标记
      amap.add(marker);
  }).catch(e => {
      console.log(e);
  })
}

页面中就会显示我们加的点标记了：

html5高德定位api 高德地图js api教程_npm_06