Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >百度高德地图JS-API学习手记:地图基本设置与省市区数据加载

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

原创
作者头像
周陆军博客
发布于 2023-04-09 13:43:18
发布于 2023-04-09 13:43:18
98400
代码可运行
举报
文章被收录于专栏:前端博客前端博客
运行总次数:0
代码可运行

无论是百度还是高德地图开发,还是高德地图开发。官方的给的案例启示很多,copy再修改下,就完成了

https://lbs.amap.com/api/javascript-api/summary http://lbsyun.baidu.com/index.php?title=jspopular3.0

这个大致看一下,我想。有点GIS基础都能完成地图开发。

个人认为百度的文档更友好些,起码排版让人感觉舒服很多。

高德地图 主要在参考手册里面找各类服务,然后应用到实际项目

在react和vue中,我们通过动态插入script 元素,onload 加载代码。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/**
 * 异步加载JS
 * @param scriptSrc {string} js url地址
 * @return {Promise}
 */
export default function loadMapScript (scriptSrc) {
  return new Promise((resolve) => {
    let mapScript = document.createElement('script')
    mapScript.src = scriptSrc
    document.body.appendChild(mapScript)
    mapScript.onload = resolve
  })
}

别人写好的参考,git上面有这个:https://github.com/iDerekLi/amap-js

行政区域查询:https://lbs.amap.com/api/javascript-api/guide/services/district-search 获取的是普通JSON数据

行政区域浏览:https://lbs.amap.com/api/javascript-api/reference-amap-ui/geo/district-explorer 能够获取的GeoJSON 数据

高德提供了全国区域 

省市区json数据查询 https://webapi.amap.com/ui/1.0/ui/geo/DistrictExplorer/assets/d_v1/country_tree.json

省市查询 https://webapi.amap.com/ui/1.0/ui/geo/DistrictExplorer/assets/d_v1/area_tree.json

在功能上,个人觉得百度地图根强。特别是mapV。而且百度地图文档方面也跟美观。

手动绘制区域 生成 GeoJSON 数据的 工具:http://geojson.io/#map=10/26.8719/112.4437

自己动手做的话,推荐阅读《百度高德地图行政区域边界GeoJSON数据获取并绘制行政区域

转载本站文章《百度高德地图JS-API学习手记:地图基本设置与省市区数据加载》, 请注明出处:https://www.zhoulujun.cn/html/GIS/WebGIS/2710.html

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
百度高德地图行政区域边界GeoJSON数据获取并绘制行政区域
highcharts 是提供地图数据包的:https://www.highcharts.com/docs/maps/map-collection
周陆军博客
2023/04/09
4.6K0
WGS84,GCJ02,BD09,火星坐标,大地坐标等解析说明与转换
最近好多人问我,坐标系转换真的太难了!GCJ02,BD09,火星坐标,大地坐标,啊啊啊,快要疯了!
陈南GISer
2022/04/04
7.2K0
WGS84,GCJ02,BD09,火星坐标,大地坐标等解析说明与转换
全国省市区县乡镇街道行政区划数据
markbob专栏
2023/07/18
1K0
高德地图开放平台 原
平台地址:http://lbs.amap.com/api/javascript-api/example/amap-ui-districtcluster/custom-cluster-marker
晓歌
2018/08/15
8.1K0
高德地图开放平台
                                                                            原
WebGIS学习资源推荐(包含学习路线、软件和数据资源推荐)
很多人对于WebGIS不是很熟悉,尤其是刚接触WebGIS的开发人员来说,感觉这东西漫无边际,不知道如何下手,所以本篇文章就结合自己的开发和学习经验,给大家推荐一下学习路线和相关的学习资源。
X北辰北
2022/03/15
6K0
WebGIS学习资源推荐(包含学习路线、软件和数据资源推荐)
基于高德地图开发 Web 应用
前段时间换了工作,从以前的 996 变成了现在的 965,周末有了一些空闲时间,于是就想着写一些文章和大家分享一下。思考了很久,最终确定了主题为前端高德地图的教程。
拿我格子衫来
2022/01/24
5K2
基于高德地图开发 Web 应用
高德地图JS--批量规划步行路线 优化
调取高德地图JS API 进行步行路线规划 多个起点到达一个重点,根据搜素结果画路线,进行绘图,并为线路添加点击事件 效果如下: 代码如下: <!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=
拿我格子衫来
2022/01/24
1.8K2
高德地图JS--批量规划步行路线 优化
GIS坐标系:WGS84,GCJ02,BD09,火星坐标,大地坐标等解析说与转换
在我朝,地理坐标转换有:WGS84转GCJ02、GCJ02转BD009、BD09转GCJ02。
周陆军博客
2023/05/14
2.9K0
如何将高德地图JS API嵌入到HTML网页内
先去https://lbs.amap.com/注册一下,直接用淘宝/QQ等OpenID既可实现注册。 没有要求实名制,填写姓名的时候,填写英文名。
繁华是客
2023/03/03
5.5K0
免费快速下载省市区县行政区的Shp数据
摘要:一般非专业的GIS应用通常会用到省市等行政区区划边界空间数据做分析,本文简单介绍了如何在互联网上下载省,市,区县的shp格式空间边界数据,并介绍了一个好用的在线数据转换工具,并且开源。
Twcat_tree
2023/10/16
2.1K0
免费快速下载省市区县行政区的Shp数据
2022年7月5日最新全国行政区划数据
我认为地理信息也就是GIS本来也就是为了服务人类而诞生的,所以我一直赞同开源的理念,也喜欢分享一些数据来帮助初学者更好的进行学习
陈南GISer
2022/09/27
1.9K0
2022年7月5日最新全国行政区划数据
项目实战---行政优先级分析
在现有地点中解析其地点优先级,最小到区县,当前区县可指定作业优先级,当绑定优先级数据后的数据应在选择时优先展示。
疯狂的KK
2022/11/11
2950
C# 高德地图WebApi对接示例
地理/逆地理编码-API文档-开发指南-Web服务 API | 高德地图API (amap.com)
GoodTime
2023/10/31
6000
C# 高德地图WebApi对接示例
高德地图实现多点标注功能
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/143467.html原文链接:https://javaforall.cn
全栈程序员站长
2022/08/26
7120
Python 爬虫+百度API
网络爬虫:又被称为网页蜘蛛,网络机器人,是一种按照一定规则自动抓取网上信息的程序或脚本。
用户6184845
2019/11/01
1.8K0
Python 爬虫+百度API
高德地图API获取兰州所有小区的POI
前言: 我们使用高德开放平台高德开放平台上的WebAPI服务,获取POI数据,严格说来不算爬虫,就是调数据接口获取数据而已。
Baige
2022/03/22
4.1K1
高德地图API获取兰州所有小区的POI
Vue中使用高德地图POI搜索
 用到的2个插件  "AMap.Autocomplete", "AMap.PlaceSearch",
tianyawhl
2020/06/28
2.7K1
vue 集成高德地图进行批量标注和信息窗体展示
高德地图进行地理位置的标注和信息窗体展示是我们很常用的一个功能,其实高德api里面已经清楚的说明怎么用了,但是自己总结一下记录在自己的笔记里,也是有些许好处的。高德api 样列展示地址是:https://lbs.amap.com/api/javascript-api/example/infowindow/add-infowindows-to-multiple-markers,以及点击窗体监听事件https://lbs.amap.com/api/amap-ui/demos/amap-ui-simpleinfowindow/events,两个样列基本就实现了我们的功能,可以点击参考。
全栈程序员站长
2022/08/31
1.7K0
js 调用百度地图,并且定位用户地址,显示省市区街,经纬度
网上的一些百度地图例子,基本上没有连套的 定位 例子。下面我分享一套我自己弄的,废话不多说,看代码,里面有注释! 1 <!DOCTYPE html> 2 <html> 3 <head>
林冠宏-指尖下的幽灵
2018/01/02
4K1
高德地图调用
3、大家创建一个springboot工程,根据自己需要导入一些坐标,我的坐标如下:
java后端指南
2021/05/13
2K0
高德地图调用
推荐阅读
相关推荐
百度高德地图行政区域边界GeoJSON数据获取并绘制行政区域
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验