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

1、首先

2、然后

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

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

直接上代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <meta name="viewport" content="initial-scale=1.1,user-scalable=no">

         <title>锦福地图</title>

          <link rel="shortcut icon" type="image/x-icon" href="img/fav.png" />

         <link href="css/map.css" rel="stylesheet" type="text/css"/>

     </head>

     <body>

         <div id="map"></div>

         <div class="search">

             <input id="City" type="text" />

             <button id="Ok">搜索</button>

         </div>

         <div id="zoomIn" class="zoomIn">放大</div>

         <div id="zoomOut" class="zoomOut">缩小</div>

         <script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script>

         <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=430307684d2fa5fea91a9e6fe00c828d"></script>

         <script type="text/javascript">

             $(function(){

                 var map=new AMap.Map("map",{

                     level:12　　　　

                 });

                 //map.setCity("武汉市");        //设置地图要显示的城市

                 //map.getCenter();            //获取当前地图中心点地理坐标

                 //放大

                 $("#zoomIn").click(function () {

                     map.zoomIn();

                 });    

                 //缩小

                 $("#zoomOut").click(function () {

                     map.zoomOut();

                 });    

                 //搜索城市

                 $("#Ok").click(function () {

                     var city=$("#City").val();

                     map.setCity(city);

                 });

                 //地图比例尺

                 map.plugin(["AMap.Scale"],function(){

                     var scale = new AMap.Scale();

                     map.addControl(scale);

                 });

                 //加载鹰眼

                 map.plugin(["AMap.OverView"],function(){

                       var view = new AMap.OverView();

                       view.open();

                     map.addControl(view);

                 });

                 //地图类型切换

                 map.plugin(["AMap.MapType"],function(){

                     //地图类型切换

                     var type= new AMap.MapType({

                         defaultType:0 //使用2D地图

                     });

                     map.addControl(type);

                 });

                 //地图操作工具条

                 map.plugin(["AMap.ToolBar"],function(){

                     //加载工具条

                     var tool = new AMap.ToolBar();

                     map.addControl(tool);

                 });

                 map.plugin('AMap.Geolocation', function () {

                 geolocation = new AMap.Geolocation({

                     enableHighAccuracy: true,//是否使用高精度定位，默认:true

                     timeout: 10000,          //超过10秒后停止定位，默认：无穷大

                     maximumAge: 0,           //定位结果缓存0毫秒，默认：0

                     convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true

                     showButton: true,        //显示定位按钮，默认：true

                     buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角

                     buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)

                     showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true

                     showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true

                     panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true

                     zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false

                 });

                 map.addControl(geolocation);

                 AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息

                 AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息

                 });

                 //搜索附近餐厅

                 map.plugin(["AMap.PlaceSearch"],function(){

                     var pl = new AMap.PlaceSearch();

                     pl.searchNearBy('餐厅',map.getCenter(),3000);

                     AMap.event.addListener(pl,'complete',function(e){

                         console.log(e);

                     });

                 });

             });

         </script>

     </body>

 </html>

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

高德地图JavaScript API开发研究的更多相关文章

  1. 高德地图 JavaScript API 开发系列教程（二）

    上节简单介绍高德地图JavaScript API及网页中基本地图展示.有了地图后我们可以用来做什么?有人说离我最近的超市在哪里,我怎么去?别急,这些功能我们后面都会慢慢实现.今天为大家详细讲解如何在地 ...

  2. 高德地图 JavaScript API 开发系列教程（一）

    高德地图 API 提供包括 Web API 即 JavaScript API,Android API,定位API,IOS API,WP API,Win8 API等,本系列教程主要针对高德 JavaSc ...

  3. 高德地图Javascript API设置域名白名单

    在涉及到GPS地图相关应用的开发过程中,我们需要在高德开放平台注册相应的账号,并设置好相应应用来获取调用的Key值,该Key值直接放入到网站前端页面,针对任何人来说都可看到,因此我们防止他人盗用你的K ...

  4. web端高德地图javascript API的调用

    [转载https://www.cnblogs.com/zimuzimu/p/6202244.html]web端高德地图javascript API的调用 关于第三放地图的使用,腾讯.百度.高德 具体怎 ...

  5. 【原创】web端高德地图javascript API的调用

    关于第三放地图的使用,腾讯.百度.高德 具体怎么选择看你自己怎么选择了. 高德地图开放平台:http://lbs.amap.com/ 本次使用的是高德的javascript API http://lb ...

  6. 高德地图JS API 开发小结

    项目中有一块功能要用到高德地图,所以,想把编码小结一下. 首先是地图的初始化 var map = new AMap.Map("mapDiv", {                  ...

  7. 百度地图JavaScript API使用

    最近在完成优达学城前端开发(入门)课程的P4项目中,要求调用google地图进行交互,项目已提供部分js代码和html代码.但在申请google地图API密钥时由于网络等原因,打不开或者连接超时,所以 ...

  8. 高德地图 js api 使用

    使用高德地图js api 制作网页上的地图应用. 1.先申请一个 开发者用的 key . 2. 在页面中引入高德提供的地图js  <script src="http://webapi. ...

  9. 在谷歌地图上绘制行政区域轮廓【结合高德地图的API】

    实现思路: 1.利用高德地图行政区域API获得坐标列表 2.将坐标列表绘制在谷歌地图上[因为高德地图和国内的谷歌地图都是采用GCJ02坐标系,所有误差很小,可以不进行坐标误差转换] 注意点: 1.用百 ...

随机推荐

  1. C++异常：no matching function for call to "Matrix(Matrix&)"

    C++异常:no matching function for call to "Matrix(Matrix&)" 我定义了一个类叫Matrix,其中构造函数explicit ...

  2. java初始化深度剖析

    当用一个类来创建对象的时候,JVM会帮我们执行下面的6个步骤. 1.在磁盘上找到对应内的class文件: 2.加载class文件到内存,初始化所有静态域(成员变量和方法): 3.如果使用new cla ...

  3. 由后序遍历结果构造二叉查找树 && 二叉查找树链表化

    二叉查找树通俗说就是左孩子比父亲小,右孩子比父亲大.构造这么一个树,树嘛,递归即可. 例如一棵树后序遍历是这样(下图的树):2 9 8 16 15 10 25 38 45 42 30 20.最后的20 ...

  4. C puzzles详解【46-50题】

    第四十六题 What does the following macro do? #define ROUNDUP(x,n) ((x+n-1)&(~(n-1))) 题目讲解: 参考:http:// ...

  5. 【转】Linux模式设计5-位图操作

    通过位图提供的两种状态可以在非常节约内存的情况下表示开关变量,并且同类这类变量可以紧凑而高效的统一进行处理.有很多内核子系统都需要位图的支持,但是不同的情况又需要不同的位图个数,比如SMP系统上的CP ...

  6. POJ C程序设计进阶 编程题＃2：四大湖

    编程题#2:四大湖 来源: POJ(Coursera声明:在POJ上完成的习题将不会计入Coursera的最后成绩.) 注意: 总时间限制: 1000ms 内存限制: 65536kB 描述 我国有4大 ...

  7. linux禁止tty终端登陆

    修改文件/etc/pam.d/system-auth #%PAM-1.0# This file is auto-generated.# User changes will be destroyed t ...

  8. iOS网络通讯——监测网络状态：Reachability(可达性)

    1.iOS平台是按照一直有网络连接的思路来设计的,开发者利用这一特点创造了很多优秀的第三方应用.大多数的iOS应用都需要联网,甚至有些应用严重依赖网络,没有网络就无法正常工作. 2.在你的应用尝试通过 ...

  9. Silverlight IIs发布问题

    1.在IIS上部署系统没有问题,在vs中链接oracle中出错(数据连接不成功,请检查该数据库是否已启动尝试加载oracle客户端时引发BadImageFormatException.如果在安装32位 ...

  10. c语言入门教程 / c语言入门经典书籍

    用C语言开始编写代码初级:C语言入门必备(以下两本书任选一本即可) C语言是作为从事实际编程工作的程序员的一种工具而出现的,本阶段的学习最主要的目的就是尽快掌握如何用c语言编写程序的技能.对c语言的数 ...