當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
高德地图JavaScript API开发研究
生活随笔
收集整理的這篇文章主要介紹了
高德地图JavaScript API开发研究
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
高德地圖JavaScript API開發研究
原文:高德地圖JavaScript API開發研究
高德地圖JavaScript API是一套用JavaScript 語言編寫的應用程序接口，可以通過各種API接口向地圖添加內容，創建功能豐富、交互性強的地圖應用。高德地圖JavaScript API 提供了大量的實用工具和富有特色的插件功能，并提供了搜索和路線規劃等服務。
1、首先
2、然后
3、最后就是看官方文檔開發
高德地圖API使用介紹：http://lbs.amap.com/api/javascript-api/guide-2/map_show/
?
直接上代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="initial-scale=1.1,user-scalable=no"> 6 <title>錦福地圖</title> 7 <link rel="shortcut icon" type="image/x-icon" href="img/fav.png" /> 8 <link href="css/map.css" rel="stylesheet" type="text/css"/> 9 </head> 10 <body> 11 <div id="map"></div> 12 <div class="search"> 13 <input id="City" type="text" /> 14 <button id="Ok">搜索</button> 15 </div> 16 <div id="zoomIn" class="zoomIn">放大</div> 17 <div id="zoomOut" class="zoomOut">縮小</div> 18 <script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script> 19 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=430307684d2fa5fea91a9e6fe00c828d"></script> 20 <script type="text/javascript"> 21 $(function(){ 22 var map=new AMap.Map("map",{ 23 level:12 24 }); 25 26 //map.setCity("武漢市"); //設置地圖要顯示的城市 27 28 //map.getCenter(); //獲取當前地圖中心點地理坐標 29 30 //放大 31 $("#zoomIn").click(function () { 32 map.zoomIn(); 33 }); 34 35 //縮小 36 $("#zoomOut").click(function () { 37 map.zoomOut(); 38 }); 39 40 //搜索城市 41 $("#Ok").click(function () { 42 var city=$("#City").val(); 43 map.setCity(city); 44 }); 45 46 //地圖比例尺 47 map.plugin(["AMap.Scale"],function(){ 48 var scale = new AMap.Scale(); 49 map.addControl(scale); 50 }); 51 52 //加載鷹眼 53 map.plugin(["AMap.OverView"],function(){ 54 var view = new AMap.OverView(); 55 view.open(); 56 map.addControl(view); 57 }); 58 59 //地圖類型切換 60 map.plugin(["AMap.MapType"],function(){ 61 //地圖類型切換 62 var type= new AMap.MapType({ 63 defaultType:0 //使用2D地圖 64 }); 65 map.addControl(type); 66 }); 67 68 //地圖操作工具條 69 map.plugin(["AMap.ToolBar"],function(){ 70 //加載工具條 71 var tool = new AMap.ToolBar(); 72 map.addControl(tool); 73 }); 74 75 map.plugin('AMap.Geolocation', function () { 76 geolocation = new AMap.Geolocation({ 77 enableHighAccuracy: true,//是否使用高精度定位，默認:true 78 timeout: 10000, //超過10秒后停止定位，默認：無窮大 79 maximumAge: 0, //定位結果緩存0毫秒，默認：0 80 convert: true, //自動偏移坐標，偏移后的坐標為高德坐標，默認：true 81 showButton: true, //顯示定位按鈕，默認：true 82 buttonPosition: 'LB', //定位按鈕停靠位置，默認：'LB'，左下角 83 buttonOffset: new AMap.Pixel(10, 20),//定位按鈕與設置的停靠位置的偏移量，默認：Pixel(10, 20) 84 showMarker: true, //定位成功后在定位到的位置顯示點標記，默認：true 85 showCircle: true, //定位成功后用圓圈表示定位精度范圍，默認：true 86 panToLocation: true, //定位成功后將定位到的位置作為地圖中心點，默認：true 87 zoomToAccuracy:true //定位成功后調整地圖視野范圍使定位位置及精度范圍視野內可見，默認：false 88 }); 89 map.addControl(geolocation); 90 AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息 91 AMap.event.addListener(geolocation, 'error', onError); //返回定位出錯信息 92 }); 93 94 //搜索附近餐廳 95 map.plugin(["AMap.PlaceSearch"],function(){ 96 97 var pl = new AMap.PlaceSearch(); 98 pl.searchNearBy('餐廳',map.getCenter(),3000); 99 100 AMap.event.addListener(pl,'complete',function(e){ 101 console.log(e); 102 }); 104 }); 105 106 }); 107 108 </script> 109 </body> 110 </html>?
線上發布版演示：http://2.luofu.sinaapp.com/MyMap/index.html
?
posted on 2015-04-19 10:06 NET未來之路 閱讀(...) 評論(...) 編輯 收藏轉載于:https://www.cnblogs.com/lonelyxmas/p/4438685.html
總結
以上是生活随笔為你收集整理的高德地图JavaScript API开发研究的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 3天假期后需连上6天班 端午节出行预定开
- 下一篇： JS基础--条件判断(3)