高德地图 JS API2.0（入门级使用教程）

最新推荐文章于 2024-08-20 09:02:10 发布
最新推荐文章于 2024-08-20 09:02:10 发布
阅读量1.8k 收藏 36
点赞数 32
分类专栏： 高德地图 JS API2.0 文章标签： javascript 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73777400/article/details/141068690
版权

高德地图 JS API2.0 入门使用教程

准备工作

注册高德地图开发者账号

进入高德开放平台首页使用手机号注册，然后完成身份认证。

注册

创建应用

[应用管理] --> [创建新的应用]–>[填写应用名称以及应用类型] -->[添加]，然后获取到安全密钥和 key 即可。

过程如下图：

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

阅读参考文档

JS API 安全密钥使用：JS API 安全密钥使用-基础-进阶教程-地图 JS API 2.0 | 高德地图API (amap.com)

地图JSAPI 2.0 参考手册：参考手册-地图 JS API 2.0 | 高德地图API (amap.com)

JS API 2.0 使用概述概述-地图 JS API 2.0|高德地图API (amap.com)

高德地图图层分布

在这里插入图片描述

创建地图实例

首先展示地图

  • 准备好一个html网页的框架

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>高德地图JS API</title>
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

  • 加载 JS API

    <script type="text/javascript">
  window._AMapSecurityConfig = {
    securityJsCode: "「你申请的安全密钥」",
  };
</script>
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
  AMapLoader.load({
    key: "「你申请的应用key」", //申请好的Web端开发者key，调用 load 时必填
    version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
  })
    .then((AMap) => {
      //JS API 加载完成后获取AMap对象
    })
    .catch((e) => {
      console.error(e); //加载错误提示
    });
</script>

    或者使用明文加载（如下），但是这种方式不适合在生产模式中使用

    <script type="text/javascript">
    window._AMapSecurityConfig = {
    securityJsCode: "「你申请的安全密钥」",
};
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=「你申请的应用key」"></script>

  • 地图初始化

    • 如果使用JS API Loader加载，这个就写在.then((AMap)=>{})中
    • 这个写在另一个script文件中，同时要在前面两个 script文件加载之后，但是需要保证container容器已经挂载到 DOM 中。
    const map = new AMap.Map("container", {
  viewMode: '2D', //默认使用 2D 模式
  zoom: 11, //地图级别
  center: [116.397428, 39.90923], //地图中心点
});

  • 添加主题样式

    以下为初始时设置，也可以使用 map.setMapStyle('amap://styles/whitesmoke')来动态的设置地图样式。

    map = new AMap.Map("container", {
  mapStyle: "amap://styles/fresh", //设置地图的显示样式
});

  • 综合起来的效果

在这里插入图片描述

展示图层

JS API 支持官方图层、三方图层、数据图层等。

本文介绍如何在地图上添加官方图层：实时交通路况图层AMap.TileLayer.Traffic，以及对此图层的其他操作。

  • 创建图层并加载

    ​ Layers属性值是设置地图图层的数组，数组可以是图层中的一个或多个，即可以同时显示多个图层。

    // 创建图层
const layer = new AMap.createDefaultLayer({
  zooms: [3, 20], //可见级别
  visible: true, //是否可见
  opacity: 1, //透明度
  zIndex: 0, //叠加层级
});

// 加载图层
const map = new AMap.Map("container", {
  viewMode: "2D", //默认使用 2D 模式
  zoom: 11, //地图级别
  center: [116.397428, 39.90923], //地图中心点
  layers: [layer], //layer为创建的默认图层
});

// 这里加载的图层是默认的图层，即使不写也会默认显示

  • 加载交通图层

    // 创建交通图层
const traffic = new AMap.TileLayer.Traffic({
  autoRefresh: true, //是否自动刷新，默认为false
  interval: 180, //刷新间隔，默认180s
});
// 加载
map.add(traffic); //通过add方法添加图层

  • 显示或者隐藏图层

    traffic.show(); //显示路况图层
traffic.hide(); //隐藏路况图层

添加控件

在这里插入图片描述

  1. JS API 的控件可以以 插件的方式 引入的

推荐异步加载方式，在需要的地方引入。通过AMap.plugin方法按需引入控件，在plugin回调之后使用控件功能。

  • 添加控件

    //异步加载控件
AMap.plugin('AMap.ToolBar',function(){ 
  var toolbar = new AMap.ToolBar(); //缩放工具条实例化
  map.addControl(toolbar); //添加控件
});

  • 控件的显示和隐藏

    toolbar.show(); //缩放工具展示
toolbar.hide(); //缩放工具隐藏

  1. JS API 的控件也可以使用同步预加载的方式

    <script src="//webapi.amap.com/maps?v=2.0&key=申请的key值&&plugin=AMap.控件1,AMap.控件2,AMap.控件3,AMap.控件4"></script>

    引入之后然后以创建对象的形式进行创建：

    var controlBar = new AMap.ControlBar({
    visible: false,
    position: {
        top: '10px',
        right: '10px'	// 控件停靠位置 { top: 5; left: 5; right: 5; bottom: 5 } 或者 'LT': 左上角, 'RT': 右上角, 'LB': 左下角, 'RB': 右下角
    }
});
map.addControl(controlBar);

添加点标记

在这里插入图片描述

  • 自定义 Marker

    //点标记显示内容
const markerContent = `<div class="custom-content-marker">
<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">
<div class="close-btn" οnclick="clearMarker()">X</div>
</div>`

    ​ 自定义样式内容

    .custom-content-marker {
  position: relative;
  width: 25px;
  height: 34px;
}

.custom-content-marker img {
  width: 100%;
  height: 100%;
}

.custom-content-marker .close-btn {
  position: absolute;
  top: -6px;
  right: -8px;
  width: 15px;
  height: 15px;
  font-size: 12px;
  background: #ccc;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 15px;
  box-shadow: -1px 1px 1px rgba(10, 10, 10, .2);
}

.custom-content-marker .close-btn:hover{
  background: #666;
}

  • 创建 Marker 对象

    // 创建marker对象
const position = new AMap.LngLat(116.397428, 39.90923); //Marker 经纬度
const marker = new AMap.Marker({
  position: position,
  content: markerContent, //将 html 传给 content
  offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
});
// 添加marker
map.add(marker);

    注意：

    ​ offset: new AMap.Pixel(-13, -30)，之所以为(-13，-30)，因为需要让上图以 [center bottom] 的方式扎在对应的经纬度上，上图是宽26px，高34px(去掉下部阴影为30px)，因此需要对自定内容做个offset的偏移(-13，-30)。

  • 为 Marker 绑定事件

    function clearMarker() {
  map.remove(marker); //清除 marker
}
document.querySelector(".close-btn").onclick = clearMarker; //绑定点击事件

添加多边形

AMap.Polygon对象为用户提供在地图图面绘制多边形的能力。可以为多边形设置填充颜色fillColor、描边颜色strokeColor、轮廓线样式等属性。与之前的 Canvas、SVG路径的绘制方法一致。

  • 绘制路径

    const pathArr = [
  [
    [
      [121.7789, 31.3102],
      [121.7279, 31.3548],
      [121.5723, 31.4361],
      [121.5093, 31.4898],
      [121.5624, 31.4864],
      [121.5856, 31.4547],
      [121.7694, 31.3907],
      [121.796, 31.3456],
      [121.7789, 31.3102],
    ],
  ],
];
const polygon = new AMap.Polygon({
  path: pathArr, //多边形路径
  fillColor: "#ccebc5", //多边形填充颜色
  strokeOpacity: 1, //线条透明度
  fillOpacity: 0.5, //填充透明度
  strokeColor: "#2b8cbe", //线条颜色
  strokeWeight: 1, //线条宽度
  strokeStyle: "dashed", //线样式
  strokeDasharray: [5, 5], //轮廓的虚线和间隙的样式
});

// 添加到地图
map.add(polygon);

在这里插入图片描述

  • 为 Polygon 添加事件，提升交互效果

    //鼠标移入更改样式
polygon.on("mouseover", () => {
  polygon.setOptions({
    fillOpacity: 0.7, //多边形填充透明度
    fillColor: "#7bccc4",
  });
});
//鼠标移出恢复样式
polygon.on("mouseout", () => {
  polygon.setOptions({
    fillOpacity: 0.5,
    fillColor: "#ccebc5",
  });
});

  • 效果图

在这里插入图片描述

  • 使用到的方法
参数/方法说明类型参数值描述默认值
fillColor多边形填充颜色String使用16进制颜色代码赋值‘#00B2D5’
strokeWeight轮廓线宽度Number-2
strokeColor线条颜色String使用16进制颜色代码赋值‘#00D3FC’
fillOpacity多边形填充透明度，取值范围Number取值范围[0,1]，0表示完全透明，1表示不透明。0.5
strokeOpacity轮廓线透明度Number取值范围[0,1]，0表示完全透明，1表示不透明0.9
strokeStyle轮廓线样式String实线:“solid” 虚线:“dashed”“solid”
strokeDasharray勾勒形状轮廓的虚线和间隙的样式，在strokeStyle为dashed时有效，在 ie9+浏览器有效Array详见 参考手册-
setOptions()修改多边形属性的方法，如样式风格，包括组成多边形轮廓线的节点、轮廓线样式等。Function--

搜索地点

通过AMap.plugin方法按需引入插件，在plugin回调之后使用插件功能。

AMap.plugin(["AMap.PlaceSearch"], function () {
  const placeSearch = new AMap.PlaceSearch({
    pageSize: 5, //单页显示结果条数
    pageIndex: 1, //页码
    city: "010", //兴趣点城市
    citylimit: true, //是否强制限制在设置的城市内搜索
    map: map, //展现结果的地图实例
    panel: "my-panel", //参数值为你页面定义容器的 id 值<div id="my-panel"></div>，结果列表将在此容器中进行展示。
    autoFitView: true, //是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
  });
  placeSearch.search("北京大学"); //使用插件搜索关键字并查看结果
});

在这里插入图片描述

使用到的方法：

参数/方法说明类型参数值描述默认值
pageSize单页显示结果条数Number0 - 10020
pageIndex页码Number>=11
city兴趣点城市String城市名（中文或中文全拼）、citycode、adcode‘全国’
citylimit是否强制限制在设置的城市内搜索Booleantrue | falsefalse
map展现结果的地图实例。当指定此参数后，搜索结果的标注、线路等均会自动添加到此地图上AMap.Map--
panel结果列表的 HTML 容器id或容器元素，提供此参数后，结果列表将在此容器中进行展示。String |HTMLElement|Boolean属性值为Boolean类型时，可选值只可为false-
autoFitView用于控制在搜索结束后，是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围Booleantrue | false-
search()根据输入关键字提示匹配信息，支持中文、拼音Function-

驾车路线规划

驾车路线规划需要使用AMap.Driving插件。

JS API 的路线规划种类有：驾车AMap.Driving、公交AMap.Transfer、步行AMap.Walking、骑乘AMap.Riding和货车AMap.TruckDriving等。

在这里插入图片描述

  • 通过起始点的名称进行规划

    // 驾车导航
const points = [
    { keyword: '清华大学', city: '北京' }, //起始点坐标
    { keyword: '北京体育大学', city: '北京' } //终点坐标
]

//引入和创建驾车规划插件
AMap.plugin(["AMap.Driving"], function () {
  const driving = new AMap.Driving({
    map: map,	// 地图对象
    panel: "my-panel", //参数值为你页面定义容器的 id 值<div id="my-panel"></div>
  });
  //获取起终点规划线路
  driving.search(points, function (status, result) {
    if (status === "complete") {
      //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
      //查询成功时，result 即为对应的驾车导航信息
      console.log(result);
    } else {
      console.log("获取驾车数据失败：" + result);
    }
  });
});

  • 使用经纬度进行规划

    const startLngLat = [116.379028, 39.865042] //起始点坐标
const endLngLat = [116.427281, 39.903719] //终点坐标

//引入和创建驾车规划插件
AMap.plugin(["AMap.Driving"], function () {
  const driving = new AMap.Driving({
    map: map,	// 地图对象
    panel: "my-panel", //参数值为你页面定义容器的 id 值<div id="my-panel"></div>
  });
  //获取起终点规划线路
  driving.search(startLngLat, endLngLat, function (status, result) {
    if (status === "complete") {
      //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
      //查询成功时，result 即为对应的驾车导航信息
      console.log(result);
    } else {
      console.log("获取驾车数据失败：" + result);
    }
  });
});
懒羊羊大王呀
关注
专栏目录
uniapp使用高德JS API
YiYeZhiQiuDe_yzq的博客
12-19 5164
​ 1、申请key的时候勾选Web端（JS API） 2、如果要适配手机端，加载JS API时通过renderjs加载。 3、加载的API应当是2.0版本，低于2.0会有定位不准的情况。 4、renderjs在H5中视图层和逻辑层其实都是运行在同一个环境中所以会很顺利，但是在手机端逻辑层无法直接访问视图层的数据。可以通过监听逻辑层的属性改变来实现事件。 5、tenderjs用法示例。
js接入高德地图API（简单快速上手）
weixin_53621681的博客
02-17 5419
高德地图API(快速上手）
【高德地图】vue使用高德地图（js api）
m0_70950838的博客
07-16 2691
vue中使用高德JSapi，添加点标记以及其他覆盖物，高德JSapi的常用操作
Amap 开源项目教程
最新发布
gitblog_00614的博客
08-20 316
Amap 开源项目教程 amap高德地图-Qt地图插件项目地址:https://gitcode.com/gh_mirrors/am/amap 项目介绍 Amap 是一个基于地理位置服务的开源项目，旨在提供一个简单易用的API接口，帮助开发者快速集成地图和定位功能到他们的应用中。该项目支持多种编程语言，并且提供了丰富的功能，如地图显示、地点搜索、路径规划等。 项目快速启动 环境准备 在开始之前，请...
高德地图JS API调用实例
02-02
定位-搜索-周边检索-路径规划-导航.html——浏览器定位，搜索地点定位，定位点周边搜索，自定义信息窗体，步行路径规划 标记bjdemo.html——标记点，显示坐标 鼠标绘制点线面.html——地图上绘制多边形，右键编辑多边形
高德地图地图 JS API 2.0 基本使用
ioncannontic的博客
05-26 563
高德地图地图 JS API 2.0 基本使用
高德地图简单使用教程JS
a123123sdf的博客
04-02 884
注意：这个文档介绍的内容需要获取高德开发者key，才能使用（充钱购买高德服务）
高德地图API使用教程
ll_883963的博客
09-07 3034
【代码】高德地图API使用教程。
高德地图js api
mus-z的博客
01-29 406
参考： https://lbs.amap.com/demo-center/js-api 代码 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &...
鸿蒙NXET实战：高德地图定位SDK【获取Key+获取定位数据】（二）
m0_62167422的博客
03-22 2331
如：连续定位// 停止定位如需在后台定位，则要在应用切入后台前调用开启后台定位任务回到前台可以停止后台任务至此就可以看到定位相关信息。也可依据参考手册实现单次定位、最后位置等操作。最后呢，很多开发朋友不知道需要学习那些鸿蒙技术？鸿蒙开发岗位需要掌握那些核心技术点？为此鸿蒙的开发学习必须要系统性的进行。而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的。
最新Vue2.0+组件开源项目库集合
熊大小哥哥
10-11 757
UI组件element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 iview ★5801 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★5517 - Vue 2的移动UI元素 vue-material ★2790 - 通过Vue Material和Vue 2建立精美的app应用 muse-ui ★2...
高德地图JS代码、地图、GPS、JS代码、高德地图、手机地图、地图导航
11-03
高德地图JS代码、地图、GPS、JS代码、高德地图、手机地图、地图导航
记录下uniapp开发结合webview调用高德地图（路线规划，多路选择
m0_61331573的博客
04-07 1082
还有兄弟不知道网络安全面试可以提前刷题吗？费时一周整理的160+网络安全面试题，金九银十，做网络安全面试里的显眼包！王岚嵚工程师面试题（附答案），只能帮兄弟们到这儿了！如果你能答对70%，找一个安全工作，问题不大。对于有1-3年工作经验，想要跳槽的朋友来说，也是很好的温习资料！【完整版领取方式在文末！！
记录下uniapp开发结合webview调用高德地图（路线规划，多路选择(1)
m0_61331573的博客
04-07 1095
try {key: “你生成到的key”,})this.mapInstance = await new this.AMap.Map(“mapContainer”,{ //设置地图容器idviewMode:“3D”, //是否为3D地图模式zoom: 15, // 缩放级别pitch: 0, // 俯视角度。
高德地图js-api简单使用
zibuyu369的博客
08-09 2443
用原生js初始化一个地图容器并使用控件，添加点坐标
用js引入高德地图
chen97a97的博客
09-26 2183
2.引用高德3D版地图。
高德地图JS API 一些常见使用方法（急救包）
weixin_45511682的博客
04-22 971
本文档总结了高德地图JS API中的一些常见使用方法，包括初始化地图、添加标记等。这些方法可以帮助开发者快速实现地图相关的功能。
高德地图使用api2.0 不兼容怎么办
09-07
如果高德地图使用API2.0不兼容，我们可以考虑以下几种解决方案： 1.检查代码：检查我们自己编写的代码是否有错误或者不支持API2.0的部分。如果有，我们需要修改代码以适应新的API版本。 2.升级API版本：如果我们使用的是较旧的API版本，可以考虑升级到兼容API2.0的最新版本。高德地图官方会提供详细的文档和指导，以帮助我们进行升级。 3.找到替代方案：如果我们无法修改现有的代码或者升级API版本，可以考虑寻找替代的地图API。市场上存在许多其他的地图API供我们选择，我们可以评估这些API的功能和兼容性，并选择最适合我们需求的替代品。 4.联系技术支持：如果以上解决方案都无法解决问题，我们可以联系高德地图的技术支持团队，向他们咨询如何处理API2.0不兼容的情况。他们可能会提供一些特定的解决方案或者进行针对性的调整。 总之，遇到高德地图使用API2.0不兼容的情况，我们可以通过检查代码、升级API版本、寻找替代方案或者联系技术支持等方式来解决这个问题。选择合适的解决方案取决于具体情况和需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值