高德地图JavaScript API开发研究

简介: 原文:高德地图JavaScript API开发研究 高德地图JavaScript API是一套用JavaScript 语言编写的应用程序接口,可以通过各种API接口向地图添加内容,创建功能丰富、交互性强的地图应用。

原文:高德地图JavaScript API开发研究

高德地图JavaScript API是一套用JavaScript 语言编写的应用程序接口,可以通过各种API接口向地图添加内容,创建功能丰富、交互性强的地图应用。高德地图JavaScript API 提供了大量的实用工具和富有特色的插件功能,并提供了搜索和路线规划等服务。

1、首先

2、然后

3、最后就是看官方文档开发

高德地图API使用介绍:http://lbs.amap.com/api/javascript-api/guide-2/map_show/

 

直接上代码:

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8" />
  5         <meta name="viewport" content="initial-scale=1.1,user-scalable=no">        
  6         <title>锦福地图</title>        
  7          <link rel="shortcut icon" type="image/x-icon" href="img/fav.png" />
  8         <link href="css/map.css" rel="stylesheet" type="text/css"/>
  9     </head>
 10     <body>
 11         <div id="map"></div>
 12         <div class="search">
 13             <input id="City" type="text" />
 14             <button id="Ok">搜索</button>
 15         </div>
 16         <div id="zoomIn" class="zoomIn">放大</div>
 17         <div id="zoomOut" class="zoomOut">缩小</div>
 18         <script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script>        
 19         <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=430307684d2fa5fea91a9e6fe00c828d"></script>
 20         <script type="text/javascript">
 21             $(function(){
 22                 var map=new AMap.Map("map",{
 23                     level:12    
 24                 });
 25                 
 26                 //map.setCity("武汉市");        //设置地图要显示的城市
 27                                 
 28                 //map.getCenter();            //获取当前地图中心点地理坐标
 29                 
 30                 //放大
 31                 $("#zoomIn").click(function () {
 32                     map.zoomIn();
 33                 });    
 34                 
 35                 //缩小
 36                 $("#zoomOut").click(function () {
 37                     map.zoomOut();
 38                 });    
 39                 
 40                 //搜索城市
 41                 $("#Ok").click(function () {
 42                     var city=$("#City").val();
 43                     map.setCity(city);
 44                 });
 45                 
 46                 //地图比例尺
 47                 map.plugin(["AMap.Scale"],function(){
 48                     var scale = new AMap.Scale();
 49                     map.addControl(scale);  
 50                 });
 51                 
 52                 //加载鹰眼
 53                 map.plugin(["AMap.OverView"],function(){
 54                       var view = new AMap.OverView();
 55                       view.open();
 56                     map.addControl(view);
 57                 });
 58                 
 59                 //地图类型切换
 60                 map.plugin(["AMap.MapType"],function(){
 61                     //地图类型切换
 62                     var type= new AMap.MapType({
 63                         defaultType:0 //使用2D地图
 64                     });
 65                     map.addControl(type);
 66                 });
 67                 
 68                 //地图操作工具条
 69                 map.plugin(["AMap.ToolBar"],function(){
 70                     //加载工具条
 71                     var tool = new AMap.ToolBar();
 72                     map.addControl(tool);   
 73                 });
 74                 
 75                 map.plugin('AMap.Geolocation', function () {
 76                 geolocation = new AMap.Geolocation({
 77                     enableHighAccuracy: true,//是否使用高精度定位,默认:true
 78                     timeout: 10000,          //超过10秒后停止定位,默认:无穷大
 79                     maximumAge: 0,           //定位结果缓存0毫秒,默认:0
 80                     convert: true,           //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
 81                     showButton: true,        //显示定位按钮,默认:true
 82                     buttonPosition: 'LB',    //定位按钮停靠位置,默认:'LB',左下角
 83                     buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
 84                     showMarker: true,        //定位成功后在定位到的位置显示点标记,默认:true
 85                     showCircle: true,        //定位成功后用圆圈表示定位精度范围,默认:true
 86                     panToLocation: true,     //定位成功后将定位到的位置作为地图中心点,默认:true
 87                     zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
 88                 });
 89                 map.addControl(geolocation);
 90                 AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
 91                 AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
 92                 });
 93                 
 94                 //搜索附近餐厅
 95                 map.plugin(["AMap.PlaceSearch"],function(){ 96                     
 97                     var pl = new AMap.PlaceSearch();
 98                     pl.searchNearBy('餐厅',map.getCenter(),3000);
 99                     
100                     AMap.event.addListener(pl,'complete',function(e){
101                         console.log(e);
102                     });
104                 });
105                 
106             });
107             
108         </script>
109     </body>
110 </html>

 

线上发布版演示:http://2.luofu.sinaapp.com/MyMap/index.html

 

目录
打赏
0
0
0
0
217
分享
相关文章
Apipost 与 Apifox 深度对比:谁是 API 开发的最佳拍档?
在 API 开发中,Apipost 与 Apifox 是两款流行的国产工具。本文通过实际项目的对比发现,Apipost 在 AI 功能方面表现突出,如 AI 自动生成文档、测试用例、脚本等,显著提升开发效率。基础功能上,Apipost 也更全面,支持离线使用、OpenAPI 格式导出、多种协议及数据库字典导入,界面简洁易用,综合性能优于 Apifox。
53 5
从混乱到清晰:API开发追踪工具实用技巧与工具配置完整拆解
API开发追踪工具是提升团队协作效率、实现接口全流程管理的关键。它整合任务看板、文档同步、版本控制与多角色协作,助力前后端及第三方高效对接。本文详解其核心功能、选型建议与落地实践,助你打造透明、规范的API协作体系。
亚马逊SP-API开发实战:商品数据获取与操作
本文介绍了亚马逊SP-API接入流程,包括开发者注册、OAuth2.0认证示例及核心商品接口的使用。涵盖商品信息查询、批量查询、限流规则与错误处理,并提供最佳实践建议,如使用AWS Lambda与SQS实现高效数据同步。
亚马逊SP-API开发实战:商品数据获取与操作
1688商品API全链路开发实践
本文介绍了对接1688开放平台的核心要点,涵盖OAuth2.0认证流程、商品列表接口调用技巧、高并发优化策略及异常处理清单。内容包含获取access_token示例、隐藏参数解析、数据清洗方案与缓存设计,并强调合规调用注意事项。
1688商品API全链路开发实践
2025 API 开发管理工具 Apipost 与 Apifox 全维度对比
本文深入对比了 Apipost 与 Apifox 两款 API 开发管理工具在设计、调试、文档管理、Mock 服务、离线支持、AI 能力及 CI/CD 集成等方面的优劣,全面评估其适用场景,为研发测试团队提供选型参考。
142 5
Apipost 与 Apifox 深度对比:2025全方位解析助力 API 开发的利器
本文对比了Apipost与Apifox两款API开发与管理工具在功能、使用场景及用户评价等方面的差异。Apipost在API设计、调试、文档管理、Mock服务、离线支持及AI能力方面表现更优,尤其适合大型企业级项目和高效率需求的团队。而Apifox则适用于小型项目或对功能要求较低的团队。综合来看,Apipost在多方面具备明显优势,是高效、高质量API开发的理想选择。
123 24
电商数据API开发实战经验分享(实操)
本文分享了一位电商开发者在API实战中的经验总结,涵盖签名生成、数据解析、缓存策略及测试方案,附完整代码示例,助你避开开发“深坑”。
Apipost vs Apifox:AI 能力决定 API 开发管理工具的真正价值
2025年,AI技术深度融入企业运营,提升生产力与竞争力。在API开发工具领域,Apipost与Apifox在AI能力上有显著差异。Apipost实现AI全流程覆盖,从文档生成、测试、开发辅助到协作优化,大幅提升效率并降低维护成本;而Apifox主要聚焦文档优化,功能较基础。在团队协作、安全合规、企业适配等方面,Apipost亦表现更优,尤其适合追求高效、安全与全流程自动化的团队。
66 1
Uniapp开发鸿蒙应用教程之选项式api和组合式api
本文介绍了在Uniapp开发鸿蒙应用时,如何通过选项式API和组合式API进行数据操作。以修改年龄值为例,对比展示了两种API的代码结构与区别,并重点演示了组合式API中更简洁、灵活的写法,帮助开发者理解并掌握现代Vue开发模式。#鸿蒙三方框架 #Uniapp
基于 Spring Boot 框架开发 REST API 接口实践指南
本文详解基于Spring Boot 3.x构建REST API的完整开发流程,涵盖环境搭建、领域建模、响应式编程、安全控制、容器化部署及性能优化等关键环节,助力开发者打造高效稳定的后端服务。
139 1
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问