首页 > 其他分享 >百度高德地图JS-API学习手记:地图基本设置与省市区数据加载

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

时间:2023-04-09 21:57:31浏览次数:78  
标签:api 地图 JS API amap https com 高德

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

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

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

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

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

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

/**
 * 异步加载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

标签:api,地图,JS,API,amap,https,com,高德
From: https://www.cnblogs.com/zhoulujun/p/17301170.html

相关文章

  • 百度高德地图行政区域边界GeoJSON数据获取并绘制行政区域
    highcharts是提供地图数据包的:https://www.highcharts.com/docs/maps/map-collectionechart矢量地图或者地图绘制矢量图层,GeoJSON哪里提供呢?dataV提供数据下载,http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.75386074913891&zoom=4.5这些数据也是从高......
  • axios写了前端,如何从后台获取到List列表数据(涉及到JSON)
    问题描述我将前端写完之后,一直没有理解axios后台的写法,导致进度一直拖慢,这里我就来叙述一下我后来是怎么写出后台代码的吧,或者说,这样的后台代码是怎么写出来的!问题解决经过友友的点拨,这里就需要将我们的list数据转换成json数据;然后将转换好的json数据传到axios写出来的html页......
  • ReactJS到React-Native,架构原理概述
    React是一个纯JS的UI库,只能干HTML/CSS/JS提供的Web服务(新的H5API不一定支持), React-Native厉害在于它能打通JS和NativeCode,让JS能够调用丰富的原生接口,充分发挥硬件的能力,实现非常复杂的效果,同时能保证效率和跨平台性。在一定程度上,ReactNative和NodeJS有异曲同工之妙......
  • Ubuntu安装nodejs以及版本管理器n
    这里源仓库的地址1.找个版本并执行脚本这里以v18为例curl-fsSLhttps://deb.nodesource.com/setup_18.x|sudo-Ebash-&&\sudoapt-getinstall-ynodejs2.安装nsudonpmi-gn3.使用n安装nodejs各个版本sudoninstallv12sudoninstallv18sudoninstalll......
  • 调用百度云api实现人脸库注册代码展示
    #encoding:utf-8importbase64importrequestsdefgetToken():ak='B7E2OqVuDAyDs7OsuGPuKa4y'sk='idObOz6jqA2GdU49L2VG4VPVhgmiidvD'host=f'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&cli......
  • 调用百度云api人脸库搜索代码及结果展示
    #encoding:utf-8importbase64importrequestsdefgetToken():ak='B7E2OqVuDAyDs7OsuGPuKa4y'sk='idObOz6jqA2GdU49L2VG4VPVhgmiidvD'host=f'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&cli......
  • 第136篇:Three.js基础入门动画API:setInterval 与 requestAnimationFrame的区别
    好家伙,书接上文 functionanimate(){//请求-动画-框架requestAnimationFrame(animate);//改变正方体在场景中的位置,让正方体动起来cube.rotation.x+=0.01;cube.rotation.y+=0.01;renderer.render(......
  • js开发规范
    ####################### 1.缩进[强制] 使用4个空格做为一个缩进层级,不允许使用2个空格或tab字符。[强制] switch中缩进2个空格[强制] 要求分号前面不可以有空格,后面可以有空格[强制] 要求语句块之前保留一个空格[强制] 关键字和类似关键字前后保留一个空格[......
  • JS引擎(1):JS引擎擂台赛,JavaScript引擎的特征比较及术语科普
    上篇介绍过JavaScript引擎的历史,《JS引擎(0):起底各种JavaScript引擎群雄争霸之路》一些流行的JavaScript引擎SpiderMonkey ,BrendanEich在Netscape创建,由C/C++语言开发,可适配ECMA-262Edition5及其之后的标准版本Rhino,由NorrisBoyd(归属Netscape)创建,则是一个Ja......
  • JS引擎(2):Java平台上JavaScript引擎—Rhino/Nashorn概述
    可以后端开发的javascript引擎有ChromeV8基于C++java的Rhino引擎(JDK6被植入),Java8被替换为NashornRhino和Nashorn都是用Java实现的JavaScript引擎。它们自身都是普通的Java程序,运行在JVM上Rhino简介Rhino[ˈraɪnəʊ]是一种使用Java语言编写的JavaScript的......