高德地图JS API制作专题图

最新推荐文章于 2023-11-23 17:12:08 发布
最新推荐文章于 2023-11-23 17:12:08 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： WEBGIS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_41310868/article/details/113026369
版权
本文介绍了如何利用高德地图JS API制作专题图，参照了官方示例，包括简易行政区图+标注和行政区拾取+修改样式的实现。通过代码展示详细步骤，并对高德地图在制作网页专题图的优势和存在的问题进行了总结。
摘要由CSDN通过智能技术生成

最近看了一份人民大学的报告，《中国城市政商关系排行榜2020》，https://new.qq.com/omn/20201230/20201230A0F3MY00.html。

 

讲的是中国各个城市的政商关系健康指数，决定拿这份报告中的数据，来做一份html的专题图。

 

效果如下：

 

一、官方示例

1.简易行政区图+标注

https://lbs.amap.com/api/javascript-api/example/district/district-labels

2.行政区拾取+修改样式

https://lbs.amap.com/api/javascript-api/example/district/district-pick

 

二、代码

全部代码如下：


                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  才华横溢吴道简
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
高德地图根据经纬度生成位置定位图片（发送位置）

				
			

			

				

					itlsq的博客
				

				

					01-02
					
					1万+
					
				

			

		

		

			
				
需求：在即时通讯工具中能够发送位置
解决：正好高德地图提供了这么个接口，根据经纬度去请求一个url,就会生成一个图片，直接引入到img标签的src里即可

            静态地图
            产品介绍静态地图服务通过返回一张地图图片响应HTTP请求，使用户能够将高德地图以图片形式嵌入自己的网页中。用户可以指定请求的地图位置、图片大小、以及在地图上添加覆盖物，如标签、标注、折线...

			
		

	



                

              
                



	

		

			

				
					
android 地图切片,img作为切片-自有数据图层-示例中心-JS API 示例 | 高德地图API

				
			

			

				

					weixin_33823399的博客
				

				

					05-26
					
					301
					
				

			

		

		

			
				
TileLayer.Flexiblehtml,body,#container {margin: 0;padding: 0;width: 100%;height: 100%;}var map = new AMap.Map('container', {resizeEnable: true,zoom: 14,zooms: [3, 20],expandZoomRange: true});//该demo可模...

			
		

	



                


  
              

                


	

		

			

				
					
高德地图生成自定义地图

				
			

			

				

					bamboozjy的博客
				

				

					05-11
					
					3469
					
				

			

		

		

			
				
登录高德地图后台,进入https://lbs.amap.com/dev/mapstyle/index

创建地图,设置完成颜色后点击发布,会生成一个地图的styleid









创建地图时使用该styleid即可


    var map = new AMap.Map('container',{
          mapStyle: 'amap://styles/0ea14f4a93e142789c4958ef488c3d05', //设置地图的显示样式
          center:[.

			
		

	





	

		

			

				
					
H5数据可视化(高德地图绘制行政区)

				
			

			

				

					逆袭的菜鸟X
				

				

					03-29
					
					2561
					
				

			

		

		

			
				
1、高德地图可视化项目搭建
参考我的上篇文章完成基本搭建：H5数据可视化(高德地图构建项目)
2、使用高德行政区查询
该部分主要参照官方教程即可，其中使用行政区划查询服务前要先引入该插件，具体的引入方式请参考教程：插件的使用。
下面列出我的代码实例，官方文档教程点这里
 AMap.plugin('AMap.DistrictSearch', function() {
                ...

			
		

	



		

			
		



	

		

			

				
					
前端高德地图导出图片功能

					
最新发布

				
			

			

				

					weixin_44177413的博客
				

				

					11-23
					
					514
					
				

			

		

		

			
				
【代码】前端高德地图导出图片功能。

			
		

	





	

		

			

				
					
高德地图常用API.zip

				
			

			

				

					07-15
				

			

		

		

			
				
 高德地图API的使用通常涉及到JavaScript、Android或iOS等平台的编程。开发者需要注册高德地图开发者账号，获取API密钥，然后在代码中引用相应的SDK，并按照文档指导进行调用和集成。  7. **地图交互事件**：  API还...

			
		

	





	

		

			

				
					
ArcGIS API for JavaScript4.10加载高德地图

				
			

			

				

					01-16
				

			

		

		

			
				
在本文中，我们将深入探讨如何使用ArcGIS API for JavaScript 4.10版本来加载高德地图，并结合高德地图的影像数据，实现自定义的GaodeMapLayer模块。ArcGIS API for JavaScript是一个强大的Web GIS开发工具，它允许...

			
		

	





	

		

			

				
					
高德地图JavaScriptAPI部分功能

				
			

			

				

					05-04
				

			

		

		

			
				
包含了高德地图JavaScriptAPI中的一些功能，主要是，定位，获取坐标，POI搜索，WGS与GCJ02坐标转换几个部分。仅供参考。

			
		

	





	

		

			

				
					
高德地图ArcGIS API js.zip

				
			

			

				

					08-01
				

			

		

		

			
				
这指的是高德地图与Esri公司的ArcGIS平台相结合的JavaScript版本3（JS3）API。Esri的ArcGIS是一种全面的GIS解决方案，它提供了地图创建、数据分析、地理处理等功能。而高德地图是中国知名的在线地图服务商，提供精确...

			
		

	





	

		

			

				
					
python高德地图路径规划api代码

				
			

			

				

					05-14
				

			

		

		

			
				
高德地图路径规划api的批量获取代码

			
		

	





	

		

			

				
					
vue使用高德地图的行政区域浏览

				
			

			

				

					hjh15827475896的博客
				

				

					03-03
					
					3750
					
				

			

		

		

			
				
工作用遇到这样的需求，要求在地图上把每个行政区画上不同的色块， 并且添加一个标注文本来说明，也就是实现下图这种的效果  ：  这是金华市下的各级县市的 区域划分

上面的效果， 高德可以有两种方式来实理
一  绘制行政区划边界   高德地图api

二 UI组件-行政区划浏览  UI组件库-行政区划浏览参考文档

我们这里来说明一下， 第二种方法的使用
方法如下

引入 UI 组件库

这里还是说一下 vue 中的 AMap   和  AMapUI 的引入吧，（不用 npm 下载 Amap 的 包）
在vu

			
		

	





	

		

			

				
					
高德地图 Web JS API示例学习笔记（6）——图层（图层通用接口、高德官方图层、简易行政区图）

				
			

			

				

					hequhecong10857的博客
				

				

					12-23
					
					2987
					
				

			

		

		

			
				
图层通用接口
图层添加与移除
操作图层进行添加 setMap(map)、移除 setMap(null) 操作。
var satellite = new AMap.TileLayer.Satellite({
        map: map,
    });

    //绑定按钮事件
    function addLayer() {
        satellite.setMap(map);
...

			
		

	





	

		

			

				
					
高德地图-----国家和省级地图切换

				
			

			

				

					qq_40881695的博客
				

				

					11-17
					
					2342
					
				

			

		

		

			
				
高德地图---国家和省级地图切换

			
		

	





	

		

			

				
					
js 高德地图api模拟一个静态|地图图片

				
			

			

				

					weixin_45121510的博客
				

				

					12-03
					
					771
					
				

			

		

		

			
				
<!-- 地图区域 -->
<div  class="map-box" >
	<div id="container"></div>
</div>

//实现简单的通过经纬度定位位置，以及点标记的地图
		// 加载地图
		loadMap() {
			const that = this
			this.$nextTick(()=>{
				// 创造Map类实例时，可通过传入地图初始化参数来设置地图的初始状态。
				let confi

			
		

	





	

		

			

				
					
大屏地图背景透明效果，高德地图怎么才能只渲染局部地图，有全部代码详细。

				
			

			

				

					tangxiaobao2016的博客
				

				

					02-23
					
					6685
					
				

			

		

		

			
				
效果图


描述：这里我只显示中国地图，地图的背景是透明色，这样就可以根据的你的父级元素背景，或者图片显示。
1.https://lbs.amap.com/


退出之后，发布，选择使用与分享

2.接下来代码。我先说几个关键点，然后贴全部代码


代码



    
    
    
    Document
    


<div id="container"></div>
<script src="https://webapi.amap.com/maps?v=1.4.

			
		

	





	

		

			

				
					
抓取高德地图位置信息及预览图片，生成excel文件小白教程

				
			

			

				

					weixin_45782580的博客
				

				

					03-19
					
					4499
					
				

			

		

		

			
				
本人也属于小白初学者，代码是多经尝试成功的，所以教程也很小白，有不对的地方请指正，方法比较粗暴，不喜勿喷，谢谢。
抓取步骤
@[TOC]1.申请高德地图API
@[TOC]2.新建excel文件
@[TOC]3.获取网页源代码
@[TOC]4.分析代码，找到需要抓取的内容位置特点，抓取内容
@[TOC]5.将抓取到的内容插入到文件中，并保存excel
@[TOC]6.抓取代码中的图片，并保存
@[...

			
		

	





	

		

			

				
					
把通过高德静态地图API获取的地图图片,拼接成一张大地图图片

				
			

			

				

					new_little_pig的博客
				

				

					06-26
					
					9255
					
				

			

		

		

			
				
默认采用:zoom=17&amp;size=1024*1024&amp;scale=2高德地图api参数.获取的是2048*2048大小的图片,修改参数之后需要调整图片截取和拼接的偏移量程序中部分代码来自:用java 对图片的截图、拼接、合成处理、添加文字简单爬虫Java已知问题:     1.效率慢  2.有内存溢出风险,拼接大面积的地图会出现  3.不同维度拼接时可能会出现地图没有拼接上的问题...

			
		

	





	

		

			

				
					
高德地图 jsapi 标记多个（marker）点，添加自定义属性，获取自定义属性

				
			

			

				

					qq_40079749的博客
				

				

					05-01
					
					7114
					
				

			

		

		

			
				
高德地图 jsapi 标记多个（marker）点，添加自定义属性，获取自定义属性
var map = new AMap.Map("container", {
        zoom: 5, //级别
        pitch: 65,
        rotation: 45,
        center: [116.397428, 39.90923], //中心点坐标
        //...

			
		

	





	

		

			

				
					
Vue+高德地图API的使用(插件的使用)

				
			

			

				

					qq_59863007的博客
				

				

					07-24
					
					2552
					
				

			

		

		

			
				
Vue 在高德在线地图引入插件

			
		

	





	

		

			

				
					
nuxt  高德地图JS API插件

				
			

			

				

					05-25
				

			

		

		

			
				
Nuxt.js 是一个基于 Vue.js 的服务端渲染应用框架，而高德地图 JS API 是高德地图提供的一套用于在网页中显示地图、搜索地点、路线规划等功能的 JavaScript API。为了在 Nuxt.js 应用中方便的使用高德地图 JS API，...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值