百度高德地图JS-API学习手记:地图基本设置与省市区数据加载

百度和高德地图JS-API在地图基本设置与省市区数据加载方面，均提供了丰富的功能与文档支持，开发者可根据需求选择合适的工具进行开发，百度地图在可视化（如MapV）和文档美观性上表现更优，而高德地图在数据查询与GeoJSON支持方面功能完善。

1. 初始化地图

   百度地图：通过BMap类创建地图实例，需指定容器ID、中心点坐标及缩放级别。

   高德地图：使用AMap.Map类初始化地图，参数包括容器ID、中心点（经纬度数组）和缩放级别。

   共同点：均需在HTML中预留<div id="container"></div>作为地图容器，并通过动态加载JS脚本引入API库。

2. 动态加载JS脚本

   示例代码（高德地图）：

   function loadMapScript(scriptSrc) { return new Promise((resolve) => { const script = document.createElement('script'); script.src = scriptSrc; document.body.appendChild(script); script.onload = resolve; });}// 调用示例loadMapScript('
   https://webapi.amap.com/maps?v=2.0&key=
   您的key').then(() => { const map = new AMap.Map('container', { zoom: 10, center: [116.397428, 39.90923] // 北京坐标 });});

   百度地图：替换脚本URL为

   https://api.map.baidu.com/api?v=3.0&ak=
   您的key即可。

3. UI与文档体验

   百度地图：文档排版更清晰，适合快速上手；提供MapV等高级可视化库。

   高德地图：功能集中在参考手册中，需通过分类查找服务（如行政区查询、地理编码等）。

1. 高德地图数据查询

   行政区查询：通过AMap.DistrictSearch服务获取普通JSON数据，支持关键词搜索或按层级（省/市/区）查询。

   const district = new AMap.DistrictSearch({ level: 'city', // 查询级别 extensions: 'all' // 返回边界信息});district.search('北京市', (status, result) => { if (status === 'complete') { console.log(result.districtList[0].boundaries); // 边界坐标数组 }});

   GeoJSON数据：使用DistrictExplorer组件获取结构化数据，适用于复杂绘制需求。

   全国区域数据URL：

   https://webapi.amap.com/ui/1.0/ui/geo/DistrictExplorer/assets/d_v1/country_tree.json

   省市数据URL：

   https://webapi.amap.com/ui/1.0/ui/geo/DistrictExplorer/assets/d_v1/area_tree.json

2. 百度地图数据加载

   行政区划服务：通过BMap.LocalCity获取城市信息，或使用第三方工具（如mapv）解析GeoJSON。

   手动绘制工具：推荐使用

   geojson.io
   在线生成GeoJSON数据，再通过API绘制到地图上。

3. 数据对比与选择

   高德优势：

   提供预生成的省市区JSON/GeoJSON数据，无需额外请求API。

   DistrictExplorer支持层级化数据浏览，适合交互式应用。

   百度优势：

   MapV库支持大数据可视化，如热力图、飞线图等。

   文档结构更直观，示例代码丰富。

1. 框架集成（React/Vue）

   通过动态加载脚本（如loadMapScript函数）避免阻塞渲染。

   在组件生命周期中初始化地图（如React的useEffect或Vue的mounted钩子）。

2. 性能优化

   缓存行政区数据，减少重复请求。

   使用WebWorker处理大规模GeoJSON数据的解析。

3. 学习资源

   高德地图：参考

   行政区查询文档
   和
   GitHub示例项目
   。

   百度地图：阅读

   JS API文档
   及《百度高德地图行政区域边界GeoJSON数据获取并绘制行政区域》教程。

• 选择依据：

  若需快速开发且重视文档体验，优先选择百度地图；

  若项目涉及复杂行政区查询或GeoJSON操作，高德地图更合适。

• 通用流程：初始化地图 → 加载脚本 → 请求行政区数据 → 解析并绘制边界。
• 扩展方向：结合Leaflet或OpenLayers等开源库实现更灵活的功能定制。