高德地图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. sql语句小练习一

    create database aaa go use aaa go create table student(    sno varchar(3), sname varchar(4) not null ...

  2. 做权限树时 使用EasyUI中Tree

    符合EasyUI中Tree的Json格式,我们先看一下,格式是如何的 [{ "id":1, "text":"My Documents", & ...

  3. 【Framework】HTTP运行期与页面执行模型

    HTTP运行期 HTTP运行期处理客户端应用程序(例如Web浏览器)进入的一个Web请求,通过处理它的应用程序的适当组件路由请求,然后产生响应并发回提出请求的客户端应用程序. 进入的HTTP Web请 ...

  4. HBase简介（很好的梳理资料）

    http://www.tuicool.com/articles/iieIz2 一.   简介 history  started by chad walters and jim 2006.11 G re ...

  5. Unieap3.5-前台js判断表单必录

    //用户信息字段检查 var custFrm=unieap.byId('custFrm'); var isValid=custFrm.validate(true); if(!isValid){ ret ...

  6. Linux ssh exit，启动的后台进程不会停止

    一般情况下,想要通过终端长时间运行任务,需要使用nohup 或者 screen,如果不使用会怎么样呢?来测试一下   描述: 场景1:ssh登录机器,通过添加(&),启动任务到后台,通过exi ...

  7. 在Entity Framework 中执行T-sql语句

    从Entity Framework  4开始在ObjectContext对象上提供了2个方法可以直接执行SQL语句:ExecuteStoreQuery<T> 和 ExecuteStoreC ...

  8. memcache 简单入门应用

    1.memcache 简介和安装: 下载:下载文件,解压到某个地方. 2.数据存储格式 键值对,一个key对应一个值,一个值在内存中占用一个或多个4k大小的块. 3.php使用memcache的方式 ...

  9. 基于.NET的WebService的实现和WCF的实现

    1.新建一个MVC web项目. 2.点击项目,[右键]→[添加]→[新建项] 3.点击[Web]→[Web服务] 4.恭喜,Web Service已经新建成功,里面的方法就可以参考着根据自己的需要进 ...

  10. 在EF的code frist下写稳健的权限管理系统：界面设计（四）

    基本都是采用pure设计(中文官网:http://purecss.org,英文官网:http://purecss.io).pure只是一个简单强大的cssUI库,支持响应式设计,适合自己设计或者给美工 ...