高德地图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. java异常处理的两种方法

    一种是try-catch-finally,监视代码段,如果有异常就捕获. 另一种是此处不处理,声明在方法后面,抛给上级.(不处理也是一种处理)

  2. 使用SurfaceView播放RGB原始视频-2016.01.22

    1 程序代码 使用Android中的SurfaceView播放RGB视频数据,SufaceView播放代码如下: package com.zhoulee.surfaceviewdemo; import ...

  3. HTML常见元素集锦

    在讲解本次课程前:我们先来看下什么是浏览器: 所谓浏览器就是可以解释和执行HTML代码的工具.还有一个概念我们需要搞清楚,浏览器!=IE,IE只是浏览器当中的一种.除了IE还有N多浏览器,google ...

  4. 使用/proc实现内核与用户空间通信

    1. 前言   Linux内核空间与用户空间的通信可通过"/proc"目录的文件读写来实现,如果只是控制内核中的参数而不是传输较多数据的话,用“/proc”是很合适的.另外一种内核 ...

  5. 前端开发之-------------合理利用CSS的权重----------------

    什么是CSS的权重?对于前端工程师来说,这是一个很基础的问题,如果前端工程师没有深刻理解这个概念,则很难写出高质量的CSS代码. 那么到底什么是CSS的权重呢?我们又怎么来进行判定CSS的权重呢? 讨 ...

  6. POJ C程序设计进阶 编程题＃3：运算符判定

    编程题#3:运算符判定 来源: POJ (Coursera声明:在POJ上完成的习题将不会计入Coursera的最后成绩.) 注意: 总时间限制: 1000ms 内存限制: 65536kB 描述 两个 ...

  7. 最简洁粗暴版的虚拟用户配置FTP

    最简洁粗暴版的虚拟用户配置FTP yum安装FTP: yum install vsftpd pam* db4* -y 设置为系统服务:chkconfig –level 35 vsftpd on 2.v ...

  8. encodeURIComponent编码后java后台的解码

    解决方法一: JavaScript: window.self.location="searchbytext.action?searchtext="+encodeURICompone ...

  9. centos6.7下编译安装lnmp

    很多步骤不说明了,请参照本人的centos6.7下编译安装lamp,这次的架构是nginx+php-fpm一台服务器,mysql一台服务器 (1)首先编译安装nginx: 操作命令: yum -y g ...

  10. 代码分享：php对二维数组进行排序

    发布:net/PHP编程  编辑:thebaby   2013-06-28 13:12:54  [大 中 小] 转自:http://www.jbxue.com/article/9991.html本文介 ...