web端与移动端高德地图接入及实例化

最新推荐文章于 2025-03-09 17:15:32 发布

仰望星空的代码

最新推荐文章于 2025-03-09 17:15:32 发布

阅读量1.7k

点赞数 1

分类专栏：各类地图接入使用实战文章标签： vue 地图高德地图

交流qun：1061950566

本文链接：https://blog.csdn.net/wangzl1163/article/details/112617893

版权

本文详细介绍了在Vue.js项目中如何接入高德地图，包括注册开发者账号获取Key，设置开发环境，以及地图组件的功能实现，如异步加载地图、定位当前位置、获取地图中心点经纬度、加载地图插件、事件绑定和点聚合等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、准备

文中实现的地图加载组件采用的地图版本为v1.4.15。该版本是目前高德地图v1.x版本的最新版本。

1、获取唯一标识Key

进行高德地图接入首先需要注册高德地图开发者账号并申请Key。

（1）注册开发者账号。

注册地址：https://lbs.amap.com/dev/id/choose。

（2）创建应用。

注册完成后登录并进入“应用管理”页面。在此页面点击“创建新应用”来创建自己的应用。

（3）为应用添加Key。

选择“服务平台”项，再选择“Web端（JSAPI）”，则可以为应用添加Key。

2、准备开发环境

本文前端页面搭建采用的Vue.js框架，如果想运行文中的代码请自行搭建好以Vue.js框架为基础的开发环境；采用其他技术栈的开发者可以手动移植代码到其他技术栈页面。

3、高德地图加载方式

在开始封装高德地图加载组件之前，先来看一下高德地图的加载方式有哪几种。通过高德地图JS API官方文档可以知道高德地图加载方式有三种：顺序同步加载、异步加载、使用 RequireJS 等加载，各种加载示例如下。文中封装组件采用的是异步加载方式。

（1）顺序同步加载。

顺序同步加载方式下，地图初始化的代码要放在 JS API 的脚本标签之后。

<script src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key值"></script>
<script type="text/javascript">
    var map = new AMap.Map('container', {
       center:[117.000923,36.675807],
       zoom:11
    });
</script>

（2）异步加载。

异步加载指的是为 JS API 指定加载的回调函数，在 JS API 的主体资源加载完毕之后，将自动调用该回调函数。回调函数应该声明在 JS API 入口文件引用之前，异步加载可以减少对其他脚本执行的阻塞，HTTPS 下也建议使用异步方式。

// 方式一
<script type="text/javascript">
    window.init = function(){
        var map = new AMap.Map('container', {
           center:[117.000923,36.675807],
           zoom:11
        });
    }
</script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key值&callback=init"></script>



// 方式二
window.onLoad  = function(){
    var map = new AMap.Map('container');
}
var url = 'https://webapi.amap.com/maps?v=1.4.15&key=你申请的key值&callback=onLoad';
var jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;
document.head.appendChild(jsapi);

（3）使用 RequireJS 等加载。

在使用 RequireJS 等前端框架时，JS API 应该被当作一般脚本资源，并使用上述异步方式进行加载。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style type="text/css">
      body,html,#container{
        width: 100%;
        height: 100%;
        margin: 0px
      }
    </style>
    <title>通过RequireJS加载</titl