高德地图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
216
分享
相关文章
告别重复繁琐!Apipost参数描述库让API开发效率飙升!
在API开发中,重复录入参数占用了42%的时间,不仅效率低下还易出错。Apipost推出的参数描述库解决了这一痛点,通过智能记忆功能实现参数自动填充,如版本号、分页控制、用户信息等常用字段,大幅减少手动输入。支持Key-Value与Raw-Json格式导入,一键提取响应结果至文档,将创建20参数接口文档时间从18分钟缩短至2分钟。相比Postman需手动搜索变量,Apipost的参数复用响应速度仅0.3秒,且支持跨项目共享与实时纠错,真正实现“一次定义,终身受益”。
深入研究:京东店铺所有商品API详解
本文介绍了一款强大的工具——京东店铺所有商品API,它可以帮助用户批量获取指定京东店铺的商品详细信息。通过传入店铺ID,API可返回包括商品名称、价格、库存、销量等在内的多维度数据,响应格式为JSON。文章还提供了Python调用示例,利用`requests`库完成签名生成与数据请求,助力商家管理店铺、开发者构建应用及数据分析人员挖掘商业价值,极大提升电商运营效率。
79 16
深入研究:1688商品评论API详解
本文介绍如何通过第三方数据服务平台获取1688商品评论数据。由于1688官方未提供通用评论API,商家和研究人员可借助第三方接口分析消费者反馈、优化产品与服务。使用时需注册账号获取API Key,并通过必要参数(如商品ID、页码等)调用接口,返回JSON格式的评论数据。文中提供了Python示例代码,利用`requests`库发送请求,帮助用户快速上手,注意根据实际平台调整API地址和参数。
55 12
深入研究:Shopee 商品详情 API 接口详解
Shopee 商品详情 API 是针对东南亚及中国台湾地区电商开发者的强大工具,可获取商品的详细信息(如价格、库存、描述等),支持竞品分析与市场调研。通过 HTTP GET/POST 请求,传入商品 ID 等参数,返回 JSON 格式的商品数据,包括基本信息、销售数据、商家信息等。以下是 Python 示例代码,展示如何使用 requests 库调用该接口并处理响应数据。注意实际应用需遵循 Shopee 认证要求。
API 接口开发与合理利用:构建高效、安全、可维护的数字桥梁
本文全面解析API接口的设计、优化与安全维护。API作为系统间交互的标准化契约,核心价值在于解耦系统、提升复用性和构建开放生态。设计时需遵循六大原则:明确输入输出、关注单一职责、实现自我表达、确保功能无重叠、保障幂等性及合理版本化。性能优化从批量处理、异步调用、并行执行等方面入手,同时结合缓存、池化技术和SQL优化提升效率。安全性涵盖加密传输、加签验签、Token认证、防重放攻击及限流熔断等十大要点。最后,通过文档自动生成、日志体系和版本管理确保接口可持续迭代。优秀的API应以契约优先、演进思维和防御心态为核心,成为系统的数字资产,支持内外部高效协作与生态建设。
深入研究:京东图片搜索商品API详解
京东图片搜索商品API简介:在电商快速发展的背景下,用户需求日益多样化。为提升购物体验,京东推出图片搜索商品API,通过上传商品图片(如实物图或宣传图),利用图像识别技术匹配京东商品库,返回相似商品的信息(如名称、价格、销量等)。该API采用HTTP POST请求方式,支持JPEG、PNG等常见图片格式,并可设置分类范围和结果数量限制等可选参数,助力开发者实现更精准的商品搜索,优化用户体验,同时为数据分析与个性化推荐提供支持。本文详细介绍了其功能、使用方法及Python请求示例。
|
18天前
|
深入研究:1688 商品详情 API 详解
1688商品详情API助力电商数据分析与决策!通过该接口,开发者可基于商品ID快速获取1688平台上商品的标题、价格、规格、图片等多维信息。企业能优化商品策略,提升竞争力。使用前需注册开发者账号、创建应用并申请权限,调用时传入必要参数(如app_key和商品ID),返回JSON/XML格式数据,涵盖商品基本信息、描述、图片及商家资料等内容。
深入研究:1688商品跨境属性API接口详解
本文介绍了如何通过 1688 商品跨境属性 API 获取商品的跨境相关数据,助力企业开展电商业务。文章分为三部分:引言阐述了接口的重要性及应用场景;接口概述详细说明了调用步骤,包括参数准备、签名生成、请求发送和响应处理;Python 请求示例提供了一个完整的代码实现,帮助开发者快速上手。示例代码涵盖了请求参数配置、签名生成逻辑以及使用 requests 库发送请求的过程,为实际应用提供了参考。
59 13
深入研究:京东商品评论API详解
京东商品评论API助力电商数据分析与优化。通过该接口,开发者可获取商品评论内容、时间、评分等详细信息,以及好评率、差评率等统计数据。适用于用户体验分析、市场调研等场景。使用前需注册开发者账号、申请权限,并正确配置参数(如app_key、商品ID等)。返回数据为JSON格式,便于解析与应用。
98 10
2025年API开发必备:10款优秀Postman替代工具大盘点
API测试在现代开发中至关重要,Postman虽为首选,但市场上涌现出许多优秀替代工具。本文精选2025年10款好评如潮的API测试工具:Apifox、Insomnia、Hoppscotch、Paw、Talend API Tester、HTTPie、ARC、Swagger UI、SoapUI和Thunder Client。这些工具各具特色,满足不同需求,如团队协作、开源易用、自动化测试等。无论是简洁轻量还是功能全面,总有一款适合你的团队,助力效率提升。
AI助理

你好,我是AI助理

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