高德地图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. Android内存泄漏分析

    周末去上海参加了安卓巴士组织的技术论坛,去了才发现自己基础很渣..... 其中提到了android的内存泄漏的问题,回来马上度娘(虽说度娘很渣),整理如下: 一.单例造成的内存泄漏 因为单例的静态特性 ...

  2. 做好SEO需要掌握的20个基础知识

    作为一个网站优化者,有一些基础seo知识点是大家必须要掌握的,网站排名的好快,和这些基础的SEO优化知识有没做好,有没做到位,有着直接的关系!今天,伟伟SEO就把我前面讲的SEO优化基础知识做个总结, ...

  3. 1Android系统移植与驱动开发概述

    1.Android系统架构分为四层,从下至上依次为Linux内核层,C/C++代码库.Android SDK API.应用程序,要熟悉每一层的内容以及功能: 2.Android移植分为应用移植和系统移 ...

  4. [原]hdu2602 Bone Collector (01背包）

    本文出自:http://blog.csdn.net/svitter 题意:典型到不能再典型的01背包.给了我一遍AC的快感. //=================================== ...

  5. 使用css实现全兼容tooltip提示框

    在上一篇文章中,使用css实现了一个全兼容的三角形图标,这个三角型图标可以使用于多种场景,比如下拉图标.多级菜单等,这篇文章我们使用这个图标通过纯css来实现一个我们常见的tooltip提示框. 最终 ...

  6. 两分钟让你明白什么是ERP

    把专业的问题通俗化——    ERP(Enterprise Resource Planning)企业资源计划系统,是指建立在信息技术基础上,以系统化的管理思想,为企业决策层及员工提供决策运行手段的管理 ...

  7. PHP preg_replace() 正则替换所有符合条件的字符串示例

    PHP preg_replace() 正则替换,与Javascript 正则替换不同,PHP preg_replace() 默认就是替换所有符号匹配条件的元素.  需要用程序处理的数据并不总是预先以数 ...

  8. Ueditor图片缩放的设置

    最近在用Ueditor,功能绝逼强大,不过也有遗憾的地方,上传图片的时候自动缩放的小了,想要图片按宽度整体等比缩放,找了好久,研究了下,终于找到解决方法了. 先改前台的的dialogs/image/i ...

  9. 【深入比较ThreadLocal模式与synchronized关键字】

    [深入比较ThreadLocal模式与synchronized关键字]ThreadLocal模式与synchronized关键字都是用于处理多线程并发访问变量的问题.只是两者处理问题的角度和思路不同. ...

  10. 旋转转盘选择Menu--第三方开源--CircleMenu

    CircleMenu在github上的项目主页是:https://github.com/zhangphil/Android-CircleMenu CircleMenu用法简单,JAVA代码: pack ...