js 高德地图api如何调用使用

1. 如何调用高德地图 API（JavaScript）

准备工作：在高德开放平台注册，获取 Key 和安全密钥。

基本代码：

<div id="container" style="width: 100%; height: 500px;"></div>
<script>
  window._AMapSecurityConfig = { securityJsCode: "你的安全密钥" };
</script>
<script src="https://webapi.amap.com/loader.js"></script>
<script>
  AMapLoader.load({ key: "你的 Key", version: "2.0" })
    .then((AMap) => {
      const map = new AMap.Map("container", {
        zoom: 11,
        center: [116.397428, 39.90923], // 北京天安门
      });
      const marker = new AMap.Marker({
        position: [116.397428, 39.90923],
        title: "天安门",
      });
      map.add(marker);
    })
    .catch((e) => console.error(e));
</script>

要点：配置密钥，加载 API，初始化地图，添加标记。

2. 在 React 18 中标记多个地址

组件代码：

import React, { useEffect, useRef } from "react";

const locations = [
  { name: "天安门", lng: 116.397428, lat: 39.90923 },
  { name: "故宫", lng: 116.397987, lat: 39.916345 },
];

const MapComponent = () => {
  const mapRef = useRef(null);
  const mapInstance = useRef(null);

  useEffect(() => {
    window._AMapSecurityConfig = { securityJsCode: "你的安全密钥" };
    const script = document.createElement("script");
    script.src = "https://webapi.amap.com/loader.js";
    document.body.appendChild(script);

    script.onload = () => {
      AMapLoader.load({ key: "你的 Key", version: "2.0" })
        .then((AMap) => {
          mapInstance.current = new AMap.Map(mapRef.current, {
            zoom: 12,
            center: [116.397428, 39.90923],
          });
          locations.forEach((loc) => {
            const marker = new AMap.Marker({
              position: [loc.lng, loc.lat],
              title: loc.name,
            });
            mapInstance.current.add(marker);
          });
          mapInstance.current.setFitView();
        })
        .catch((e) => console.error(e));
    };

    return () => {
      if (mapInstance.current) mapInstance.current.destroy();
    };
  }, []);

  return <div ref={mapRef} style={{ width: "100%", height: "500px" }} />;
};

export default MapComponent;

要点：用 useEffect 加载地图，遍历地址数组添加标记，自动调整视野。

3. 高德地图常用 API 及案例代码

地图初始化

AMap.Map：

const map = new AMap.Map("container", {
  zoom: 12,
  center: [116.397428, 39.90923],
});

覆盖物

AMap.Marker：

const marker = new AMap.Marker({
  position: [116.397428, 39.90923],
  title: "天安门",
});
map.add(marker);

AMap.InfoWindow：

const infoWindow = new AMap.InfoWindow({
  content: "<h3>天安门</h3>",
  position: [116.397428, 39.90923],
});
infoWindow.open(map);

搜索（需插件 "AMap.PlaceSearch"）

AMap.PlaceSearch：

const placeSearch = new AMap.PlaceSearch({ city: "北京" });
placeSearch.search("故宫", (status, result) => {
  if (status === "complete") console.log(result.poiList.pois);
});

路径规划（需插件 "AMap.Driving"）

AMap.Driving：

const driving = new AMap.Driving({ map: map });
driving.search(
  [116.397428, 39.90923],
  [116.417493, 39.914266],
  (status, result) => {
    if (status === "complete") console.log(result.routes);
  }
);

控件（需插件 "AMap.Scale"）

AMap.Scale：
```
map.addControl(new AMap.Scale());
```

地理编码（需插件 "AMap.Geocoder"）

AMap.Geocoder：

const geocoder = new AMap.Geocoder();
geocoder.getLocation("北京市天安门", (status, result) => {
  if (status === "complete") console.log(result.geocodes[0].location);
});

综合总结

调用方式：通过 <script> 加载 API，配置 Key 和安全密钥，使用 AMapLoader.load() 初始化。
React 集成：结合 useEffect 和 useRef 管理地图生命周期，适合动态标记场景。
常用 API：包括地图显示（AMap.Map）、标记（AMap.Marker）、搜索（AMap.PlaceSearch）、导航（AMap.Driving）等，需根据功能加载对应插件。
注意事项：确保 Key 有效，容器有样式，插件提前声明。

以上代码可直接运行（替换 Key 和密钥后），适用于基础地图展示和扩展功能开发。如需更复杂案例，我可以进一步协助！

常用api

高德地图 JavaScript API（特别是 2.0 版本）提供了丰富的功能，适用于 Web 端开发。下面我将介绍一些常用的 API，涵盖基础功能、标注、搜索、路径规划等常见场景，并附上简要说明和使用示例。这些 API 可以直接在你的 React 项目中结合前面提到的代码使用。

1. 地图初始化相关 API

AMap.Map
用于创建地图实例，是所有功能的基础。
- 参数：
  - container：地图容器的 DOM ID。
  - zoom：缩放级别（1-20）。
  - center：中心点坐标 [经度, 纬度]。
- 示例：
```
const map = new AMap.Map("container", {
  zoom: 12,
  center: [116.397428, 39.90923], // 北京天安门
});
```
map.setFitView()
自动调整地图视野，使所有标记点或覆盖物可见。
- 示例：
```
map.setFitView(); // 调整视野以显示所有标记
```

2. 覆盖物相关 API

AMap.Marker
在地图上添加标记点，常用于标注位置。
- 参数：
  - position：经纬度 [lng, lat]。
  - title：悬停提示文本。
  - icon：自定义图标 URL。
- 示例：
```
const marker = new AMap.Marker({
  position: [116.397428, 39.90923],
  title: "天安门",
});
map.add(marker);
```

AMap.InfoWindow
添加信息窗，显示详细信息。

参数：
- content：信息窗内容（支持 HTML）。
- position：信息窗位置。

示例：

const infoWindow = new AMap.InfoWindow({
  content: "<h3>天安门</h3><p>北京市中心</p>",
  position: [116.397428, 39.90923],
});
infoWindow.open(map);

AMap.Polyline
绘制折线，例如路径或区域边界。

示例：

const polyline = new AMap.Polyline({
  path: [
    [116.39, 39.91],
    [116.40, 39.90],
  ],
  strokeColor: "#3366FF",
  strokeWeight: 5,
});
map.add(polyline);

AMap.Polygon
绘制多边形，用于区域标注。

示例：

const polygon = new AMap.Polygon({
  path: [
    [116.39, 39.91],
    [116.40, 39.91],
    [116.40, 39.90],
  ],
  fillColor: "#FFAA00",
  strokeColor: "#FF0000",
});
map.add(polygon);

3. 搜索相关 API（需加载插件）

AMap.PlaceSearch
地点搜索，支持关键字和周边搜索。

插件："AMap.PlaceSearch"

示例：

const placeSearch = new AMap.PlaceSearch({
  city: "北京", // 限定搜索城市
  pageSize: 10,
});
placeSearch.search("故宫", (status, result) => {
  if (status === "complete") {
    console.log("搜索结果：", result.poiList.pois);
  }
});

AMap.AutoComplete
输入提示，实时提供搜索建议。

插件："AMap.AutoComplete"

示例：

const autoComplete = new AMap.AutoComplete({
  city: "北京",
});
autoComplete.search("天安", (status, result) => {
  if (status === "complete") {
    console.log("提示结果：", result.tips);
  }
});

4. 路径规划相关 API（需加载插件）

AMap.Driving
驾车路径规划。

插件："AMap.Driving"

示例：

const driving = new AMap.Driving({
  map: map, // 直接在地图上绘制路径
  policy: AMap.DrivingPolicy.LEAST_TIME, // 最短时间策略
});
driving.search(
  [116.397428, 39.90923], // 起点：天安门
  [116.417493, 39.914266], // 终点：王府井
  (status, result) => {
    if (status === "complete") {
      console.log("驾车路线：", result.routes);
    }
  }
);

AMap.Walking
步行路径规划。

插件："AMap.Walking"

示例：

const walking = new AMap.Walking({ map: map });
walking.search(
  [116.397428, 39.90923],
  [116.417493, 39.914266],
  (status, result) => {
    if (status === "complete") {
      console.log("步行路线：", result.routes);
    }
  }
);

5. 控件相关 API

AMap.Scale
添加比例尺控件。
- 插件："AMap.Scale"
- 示例：
```
map.addControl(new AMap.Scale());
```
AMap.ToolBar
添加缩放和平移工具栏。
- 插件："AMap.ToolBar"
- 示例：
```
map.addControl(new AMap.ToolBar());
```
AMap.HawkEye
添加鹰眼（小地图）控件。
- 插件："AMap.HawkEye"
- 示例：
```
map.addControl(new AMap.HawkEye({ opened: true }));
```

6. 事件监听相关 API

marker.on
为标记点添加事件监听（如点击、鼠标悬停）。
- 示例：
```
marker.on("click", () => {
  alert("你点击了标记！");
});
```

map.on
为地图添加事件监听（如拖动、缩放）。

示例：

map.on("dragend", () => {
  console.log("地图拖动结束，新中心：", map.getCenter());
});

7. 地理编码与逆地理编码

AMap.Geocoder
将地址转为经纬度（地理编码）或经纬度转为地址（逆地理编码）。

插件："AMap.Geocoder"

示例（地理编码）：

const geocoder = new AMap.Geocoder();
geocoder.getLocation("北京市天安门", (status, result) => {
  if (status === "complete") {
    console.log("经纬度：", result.geocodes[0].location);
  }
});

示例（逆地理编码）：

geocoder.getAddress([116.397428, 39.90923], (status, result) => {
  if (status === "complete") {
    console.log("地址：", result.regeocode.formattedAddress);
  }
});

常用插件汇总

以下是一些常用的插件，需要在 AMapLoader.load() 的 plugins 参数中声明：

"AMap.PlaceSearch"：地点搜索
"AMap.AutoComplete"：输入提示
"AMap.Driving"：驾车导航
"AMap.Walking"：步行导航
"AMap.Geocoder"：地理编码
"AMap.Scale"、"AMap.ToolBar"、"AMap.HawkEye"：控件

加载示例：

AMapLoader.load({
  key: "你的 Key",
  plugins: ["AMap.PlaceSearch", "AMap.Geocoder"],
});

总结

高德地图 API 的核心功能围绕地图显示、覆盖物、搜索和路径规划展开。常用的 API 如 AMap.Map、AMap.Marker、AMap.PlaceSearch 和 AMap.Driving 能满足大多数需求。如果你在 React 项目中需要实现特定功能（比如搜索并标记、动态路径规划），可以基于这些 API 扩展组件逻辑。

posted on 2025-02-25 21:44 joken1310 阅读(50) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· react router 常用的hooks

· 前端应用中使用 AES-GCM 加密算法

· 高德地图 JS API for Javascript 入门

· 高德地图API

· Vue项目接入高德地图

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· .NET10 - 预览版1新功能体验（一）

joken-前端工程师

最新随笔

我的标签

阅读排行榜

评论排行榜

最新评论