高德地圖JavaScript API開發研究

時間 2019-11-13

標籤地圖 javascript api 開發研究欄目 JavaScript 简体版

原文原文鏈接

高德地圖JavaScript API是一套用JavaScript 語言編寫的應用程序接口，能夠經過各類API接口向地圖添加內容，建立功能豐富、交互性強的地圖應用。高德地圖JavaScript API 提供了大量的實用工具和富有特點的插件功能，並提供了搜索和路線規劃等服務。javascript

一、首先css

二、而後html

三、最後就是看官方文檔開發java

高德地圖API使用介紹：http://lbs.amap.com/api/javascript-api/guide-2/map_show/jquery

直接上代碼：web

  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.htmlapi

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。