高德地图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. 【Nginx 3】FTP远程文件下载

    导读:在做项目的过程中,当用户发起申诉时,要上传一个申诉材料.然后后台运营人员在处理申诉时,可能会需要下载申诉材料,进行参考.本篇博客呢,就介绍一下文件的下载! 一.代码实现 <span sty ...

  2. Java语法细节（2）

    1.逻辑运算符 &和&&,|和||的区别 &&:和&的结果是一样的,但运算过程有区别 &&:只要左边结果为假,就不再执行右边的,结果为假 ...

  3. PDM文件编辑

    需要把Oracle中的表,导出到已有的PDM文件中. 1.Oracle导出表脚本 1) 2) 3) 2.PowerDesigner导入脚本 1) 2) 3) 4)

  4. Java druid

    1.ConnectionFactory (添加引用:druid-1.0.1.jar) package nankang.test; import java.sql.Connection; import ...

  5. typedef 及其与struct的结合使用

    //相当于为现有类型创建一个别名,或称类型别名. //整形等 typedef int size; //字符数组 ]; ];//=> typedef ]; Line text, secondlin ...

  6. Java Base64 加密解密

    使用JDK的类 BASE64Decoder  BASE64Encoder package test; import sun.misc.BASE64Decoder; import sun.misc.BA ...

  7. 第 2章 数组和 ArrayLists

    数组是最通用的数据结构,它出现在几乎所有的编程语言里.在 C#语言中使用数组包括创建 System.Array 类型的数组对象,以及创建针对所有数组的抽象的基类型.Array 类提供了一套方法,这些方 ...

  8. 改变tabbar的高度做法

    UITabBarController *tabBarController =[[UITabBarController alloc] init]; CGRect frame = self.window. ...

  9. [leetcode]_Reverse Integer

    经历了三道树的题后,完全崩溃中,急需一道非树图的题来挽救信心. 题目:反转数字.input : 123 , output : 321. 思路:直接,没什么好说的. 自己代码:很龊,有大量的冗余信息,还 ...

  10. 前端培训教程 jquery半透明设置

    function setOpacity(eles){ $(eles).each(function(){ if($.browser.msie){ $(this).clone().empty().inse ...