高德地圖網頁端js API

時間  2019-11-17
標籤 地圖 網頁 api 欄目 HTML 简体版
原文   原文鏈接

註冊帳號並申請Key

1. 首先，註冊開發者帳號，成爲高德開放平臺開發者 https://lbs.amap.com/api/javascript-api/guide/abc/preparejavascript

2. 登錄以後，在進入「應用管理」 頁面「建立新應用」css

3. 爲應用添加 Key，「服務平臺」一項請選擇「 Web 端 ( JSAPI ) 」html

準備頁面

1. 在頁面添加 JS API 的入口腳本標籤，並將其中「您申請的key值」替換爲您剛剛申請的 key；前端

HTML 
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申請的key值"></script>

2. 添加div標籤做爲地圖容器，同時爲該div指定id屬性；java

HTML 
<div id="container"></div>

3. 爲地圖容器指定高度、寬度；web

CSS 
#container {width:300px; height: 180px; }

4. 進行移動端開發時，請在head內添加viewport設置，以達到最佳的繪製性能；chrome

HTML 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

5. 在完成如上準備工做以後即可以開始進行開發工做了，查看快速入門。api

異步加載 JS API

上一節說明的是最基本的同步加載 JS API 的方式，若是您須要異步加載，好比經過appendChild，或者經過require等異步方式來加載，這時須要您須要先準備一個全局的回調函數做爲 JS API 異步加載的回調函數，並將其函數名做爲callback參數添加在 JS API 的引用地址後面，此時要注意，回調函數應該在腳本請求發出以前進行聲明。異步加載方式只有在回調以後，才能開始調用JSAPI的相關接口。好比數組

JavaScript 
<script>
		window.onLoad = function(){
		 var map = new AMap.Map('container'); 
		} 
		var url = 'https://webapi.amap.com/maps?v=1.4.15&key=64856519773d3e62866f4f1b502841fc&callback=onLoad'; 
		var jsapi = doc.createElement('script'); jsapi.charset = 'utf-8'; 
		jsapi.src = url; document.head.appendChild(jsapi);
	</script>

　　

按照「準備」篇完成頁面準備工做以後就能夠真正開始地圖的開發工做了。前端框架

HELLO，AMAP！

簡單建立一個地圖只須要一行代碼，構造參數中的container爲準備階段添加的地圖容器的id：

JavaScript 
var map = new AMap.Map('container');

建立的同時能夠給地圖設置中心點、級別、顯示模式、自定義樣式等屬性：

JavaScript 
var map = new AMap.Map('container', { zoom:11,//級別 center: [116.397428, 39.90923],//中心點座標 viewMode:'3D'//使用3D視圖 });

圖層

默認狀況下，地圖只顯示標準底圖，如須要疊加別的圖層，能夠經過map.add方法添加圖層：

JavaScript

var map = new AMap.Map('container', { resizeEnable: true, center: [116.397428, 39.90923], zoom: 13 });

//實時路況圖層
var trafficLayer = new AMap.TileLayer.Traffic({ zIndex: 10 }); map.add(trafficLayer);//添加圖層到地圖

也能夠在地圖初始化的時候經過layers屬性爲地圖設置多個圖層：
layers
    var map = new AMap.Map('container', {
        center: [116.397428, 39.90923],
        layers: [//使用多個圖層
            new AMap.TileLayer.Satellite(),
            new AMap.TileLayer.RoadNet()
        ],
        zooms: [4,18],//設置地圖級別範圍
        zoom: 13
    });

　　地圖 JS API 提供了標準、衛星、路網、路況、建築等多個官方圖層，同時也提供了加載第三方WMS、WMTS、XYZ等標準圖層的接口，也提供了把通常的圖片、Canvas、視頻、熱力等做爲圖層的能力，

點標記與矢量圖形

JS API 提供了在地圖之上繪製覆蓋物的能力，好比點標記 Marker、文本標記 Text、圓點標記 CircleMarker。

添加點標記的方法很是簡單，好比添加一個默認樣式的Marker：

   var marker = new AMap.Marker({
        position:[116.39, 39.9]//位置
    })
    map.add(marker);//添加到地圖

　　移除的方法以下：map.remove(marker)

也提供了繪製圓Circle、折線 Polyline、多邊形 Polygon、橢圓 Ellipse、矩形 Rectangle、貝瑟爾曲線 BesizerCurve等矢量圖形的能力，好比添加折線：
var lineArr = [
        [116.368904, 39.913423],
        [116.382122, 39.901176],
        [116.387271, 39.912501],
        [116.398258, 39.904600]
    ];
    var polyline = new AMap.Polyline({
        path: lineArr,          //設置線覆蓋物路徑
        strokeColor: "#3366FF", //線顏色
        strokeWeight: 5,        //線寬
        strokeStyle: "solid",   //線樣式
    });
    map.add(polyline);

　　

事件功能與信息窗體

JS API 提供的Map、點標記、矢量圖形的實例均支持事件，鼠標或者觸摸操做均會觸發相應的事件。咱們經過給點標記綁定click事件來簡單瞭解事件系統和信息窗體的基本使用：

var infoWindow = new AMap.InfoWindow({ //建立信息窗體
        isCustom: true,  //使用自定義窗體
        content:'<div>信息窗體</div>', //信息窗體的內容能夠是任意html片斷
        offset: new AMap.Pixel(16, -45)
    });
    var onMarkerClick  =  function(e) {
        infoWindow.open(map, e.target.getPosition());//打開信息窗體
        //e.target就是被點擊的Marker
    } 
    var marker = new AMap.Marker({
         position: [116.481181, 39.989792]
    })
    map.add(marker);
    marker.on('click',onMarkerClick);//綁定click事件

　　

JS API 的加載

JS API 支持多種加載方式，能夠順序加載也能夠異步加載，同時也能夠做爲通常腳本資源被 RequireJS 等前端框架加載。

順序同步加載

 
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申請的key值"></script>
<script type="text/javascript">
    var map = new AMap.Map('container', {
       center:[117.000923,36.675807],
       zoom:11
    });
</script>

　　

異步加載

異步加載指的是爲 JS API 指定加載的回調函數，在 JS API 的主體資源加載完畢以後，將自動調用該回調函數。回調函數應該聲明在 JS API 入口文件引用以前，異步加載能夠減小對其餘腳本執行的阻塞，HTTPS 下咱們也建議使用異步方式：

<script type="text/javascript">
    window.init = function(){
        var map = new AMap.Map('container', {
           center:[117.000923,36.675807],
           zoom:11
        });
    }
</script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申請的key值&callback=init"></script>

　　或者

window.onLoad  = function(){
    var map = new AMap.Map('container');
}
var url = 'https://webapi.amap.com/maps?v=1.4.15&key=您申請的key值&callback=onLoad';
var jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;
document.head.appendChild(jsapi);

　　

使用 RequireJS 等加載

在使用 RequireJS 等前端框架時，JS API 應該被看成通常腳本資源，並使用上述異步方式進行加載，好比

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style type="text/css">
      body,html,#container{
        width: 100%;
        height: 100%;
        margin: 0px
      }
    </style>
    <title>經過RequireJS加載</title>
  </head>
  <body>
   <div id="container" tabindex="0"></div>
   <script src="https://webapi.amap.com/js/require.js" data-main="./require-init"></script>
  </body>
</html>

　　require-init.js

require.config({
  paths: {　　　　　　
    "amap": "https://webapi.amap.com/maps?v=1.4.15&key=&callback=onAMapLoaded"　　　　
  }　　
});
window.onAMapLoaded = function() {
  require(['initAMap'], function(mapIniter) {
    mapIniter.init();
  })
}
require(['amap'])

　　nitAMap.js

define(function() {　　　　
  var init = function() {　　　　　　
    var amap = new AMap.Map('container');
  };　　　　
  return {　　　　　　
    init: init
  };　　
});

　　

插件的使用

JS API 提供了衆多的插件功能，這些功能不會主動隨着 JSAPI 主體資源下發，須要引入以後才能使用這些插件的功能。這些功能包括：

  • 服務類，如：POI搜索 PlaceSearch、輸入提示 AutoComplete、路線規劃 Driving/Walker/Transfer/Riding/Truck、地理編碼 Geocoder、公交線路 LineSearch、公交站點 StationSearch、天氣查詢 Weather等；
  • 地圖控件，如：縮放工具條 ToolBar、比例尺 Scale、定位按鈕 Geolocation等；
  • 矢量圖形編輯工具，如折線/多邊形編輯器 PolyEditor、圓形編輯器 CircleEditor等；
  • 工具類，如鼠標繪製工具 MouseTool、測距工具 RangingTool等。

 

插件的使用流程

 

  1. 引入插件，支持按需異步加載和同步加載，可同時引入多個插件，
  2. 建立插件實例，非特殊狀況需避免重複建立多個實例，複用同一個實例便可；
  3. 調用實例的方法，使用相關功能。

插件的引入

異步加載多個插件

 AMap.plugin(['AMap.ToolBar','AMap.Driving'],function(){//異步同時加載多個插件
      var toolbar = new AMap.ToolBar();
      map.addControl(toolbar);
      var driving = new AMap.Driving();//駕車路線規劃
      driving.search(/*參數*/)
  });

　　

插件列表

類名

類功能說明

AMap.ElasticMarker

靈活點標記，能夠隨着地圖級別改變樣式和大小的 Marker

AMap.ToolBar

工具條，控制地圖的縮放、平移等

AMap.Scale

比例尺，顯示當前地圖中心的比例尺

AMap.OverView

鷹眼，顯示縮略圖

AMap.MapType

圖層切換，用於幾個經常使用圖層切換顯示

AMap.Geolocation

定位，提供了獲取用戶當前準確位置、所在城市的方法

AMap.AdvancedInfoWindow

高級信息窗體，整合了周邊搜索、路線規劃功能

AMap.Autocomplete

輸入提示，提供了根據關鍵字得到提示信息的功能

AMap.PlaceSearch

地點搜索服務，提供了關鍵字搜索、周邊搜索、範圍內搜索等功能

AMap.PlaceSearchLayer

搜索結果圖層類，將搜索結果做爲圖層展現

AMap.DistrictSearch

行政區查詢服務，提供了根據名稱關鍵字、citycode、adcode 來查詢行政區信息的功能

AMap.LineSearch

公交路線服務，提供公交路線相關信息查詢服務

AMap.StationSearch

公交站點查詢服務，提供途經公交線路、站點位置等信息

AMap.Driving

駕車路線規劃服務，提供按照起、終點進行駕車路線的功能

AMap.TruckDriving

貨車路線規劃

AMap.Transfer

公交路線規劃服務，提供按照起、終點進行公交路線的功能

AMap.Walking

步行路線規劃服務，提供按照起、終點進行步行路線的功能

AMap.Riding

騎行路線規劃服務，提供按照起、終點進行騎行路線的功能

AMap.DragRoute

拖拽導航插件，可拖拽起終點、途經點從新進行路線規劃

AMap.ArrivalRange

公交到達圈，根據起點座標，時長計算公交出行是否可達及可達範圍

AMap.Geocoder

地理編碼與逆地理編碼服務，提供地址與座標間的相互轉換

AMap.CitySearch

城市獲取服務，獲取用戶所在城市信息或根據給定IP參數查詢城市信息

AMap.IndoorMap

室內地圖，用於在地圖中顯示室內地圖

AMap.MouseTool

鼠標工具插件

AMap.CircleEditor

圓編輯插件

AMap.PolyEditor

折線、多邊形編輯插件

AMap.MarkerClusterer

點聚合插件

AMap.RangingTool

測距插件，能夠用距離或面積測量

AMap.CloudDataLayer

雲圖圖層，用於展現雲圖信息

AMap.CloudDataSearch

雲圖搜索服務，根據關鍵字搜索雲圖點信息

AMap.Weather

天氣預報插件，用於獲取將來的天氣信息

AMap.RoadInfoSearch

道路信息查詢，已中止數據更新，反饋信息僅供參考

AMap.Hotspot

熱點插件，地圖熱點已默認開啓，不用手動添加，由Map的 isHotspot 屬性替代

AMap.Heatmap

熱力圖插件

 

 

使用 JS API 開發以前有幾個基礎類型須要瞭解一下，包括：

  1. 經緯度 AMap.LngLat
  2. 像素點 AMap.Pixel
  3. 像素尺寸 AMap.Size
  4. 經緯度矩形邊界 AMap.Bounds
  5. 經緯度路徑邊界 AMap.ArrayBounds

經緯度 AMap.LngLat

格式

經緯度的有效範圍爲經度-180度到+180度，緯度大約-85度到+85度。

JS API 支持的經緯度的寫法有兩種，使用時經度在前，緯度在後，推薦使用標準寫法：

var position = new AMap.LngLat(116, 39);//標準寫法

  var position = [116, 39]; //簡寫

  var map = new AMap.Center('conatiner',{
     center:position
  })

　　使用經緯度類型能夠進行一些簡單的位置計算，好比點與點、點與線的距離，根據距離差計算另外一個經緯度等

　　

var lnglat1 = new AMap.LngLat(116, 39);
var lnglat2 = new AMap.LngLat(117, 39);
var distance = lnglat1.distance(lnglat2);//計算lnglat1到lnglat2之間的實際距離(m)

var lnglat3 = lnglat1.offset(100,50)//lnglat1向東100m，向北50m的位置的經緯度

　　

特別說明：

高德地圖採用 GCJ-02 座標系，即火星座標系。與 GPS 座標系，即 WGS-84 座標系存在必定的偏移量，若是您採集到的座標數據爲GPS座標，能夠先經過AMap.ConvertFrom進行座標偏移後進行製圖或者使用，纔可以和高德的底圖徹底匹配。

像素點 AMap.Pixel

像素點由x和y兩個份量組成，一般用來描述地圖的容器座標、地理像素座標 (平面像素座標)、點標記和信息窗體的的錨點等。使用方式以下：

 var offset  = new AMap.Pixel(-16,-30);
  var marker = new AMap.Marker({
      offset:offset,
      icon:'xxx.png',
  });
  map.add(marker);

　　

像素尺寸 AMap.Size

像素尺寸由width和height兩個份量構成，一般用來描述具備必定大小的對象，好比地圖的尺寸，圖標的尺寸等

 var mapSize = map.getSize();//獲取地圖大小，返回的是地圖容器的像素大小
  var width = mapSize.width;
  var height = mapSize.height;

  var marker = new AMap.Marker({
	position: [116.405467, 39.907761],
        icon: new AMap.Icon({            
            size: new AMap.Size(40, 50),  //圖標的大小
            image: "https://webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png",
            imageOffset: new AMap.Pixel(0, -60)
        })        
  });
  map.add(marker)

　　

經緯度矩形邊界 AMap.Bounds

經緯度矩形邊界爲一個矩形的經緯度範圍，用西南角和東北角的兩個經緯度來描述，這兩個經緯度分別表明邊界的最小值和最大值。矩形經緯度邊界一般用來描述：地圖的當前邊界、覆蓋物的外包矩形邊界、圖片圖層的覆蓋範圍等。好比構造一個新的Bounds對象來調成地圖的邊界範圍：

  var southWest = new AMap.LngLat(110,20);
  var northEast = new AMap.LngLat(120,30);
  var bounds = new AMap.Bounds(southWest, northEast);
  map.setBounds(bounds);

　　

經緯度路徑邊界 AMap.ArrayBounds

3D視圖下，因爲地圖的傾斜和旋轉，因爲地圖邊界已經不在是矩形邊界，咱們提供了ArrayBounds來描述地圖當前視口的邊界範圍，它使用一組經緯度路徑來表述一個閉合的區域邊界。ArrayBounds提供了contains方法可用來判斷經緯度點是否在其內部。

 var map = new AMap.Map('container',{
      zoom:17,
      viewMode:'3D'
  })
  var arrayBounds = map.getBounds();
  var path = arrayBounds.bounds//經緯度的路徑
  var isPointInBounds =  arrayBounds.contains(new AMap.LngLat(116, 39))//判斷點是否在邊界內

　　

地圖狀態

地圖狀態包括地圖中心點、縮放級別等內容。本章爲您介紹設置 / 獲取地圖狀態的經常使用方法，包括

  1. 設置 / 獲取地圖中心點和縮放級別的方法
  2. 根據覆蓋物範圍調整視野
  3. 經常使用方法列表

設置 / 獲取地圖中心點和級別 

// 傳入經緯度，設置地圖中心點
var position = new AMap.LngLat(116, 39);  // 標準寫法
// 簡寫 var position = [116, 39]; 
map.setCenter(position); 
// 獲取地圖中心點
var currentCenter = map.getCenter(); 
// 設置地圖級別，級別爲數字。 // PC上，參數zoom可設範圍：[3,18]； // 移動端：參數zoom可設範圍：[3,19] map.setZoom(13); 

// 獲取地圖級別 var currentZoom = map.getZoom(); 
map.setZoomAndCenter(14, [116.205467, 39.907761]);

　　

根據覆蓋物範圍調整視野

地圖上覆蓋物較多的狀況下，若是須要保證全部覆蓋物都在視野範圍內， 須要將地圖調整到合適的縮放等級和中心點，咱們能夠調用setFitView()

方法，以實現該效果。

// 建立一條折線覆蓋物
var path = [
    new AMap.LngLat("116.368904","39.913423"),
    new AMap.LngLat("116.382122","39.901176"),
    new AMap.LngLat("116.387271","39.912501"),
    new AMap.LngLat("116.398258","39.904600")
];
var polyline = new AMap.Polyline({
    path: path,  
    borderWeight: 2, // 線條寬度，默認爲 1
    strokeColor: 'red', // 線條顏色
    lineJoin: 'round' // 折線拐點鏈接處樣式
});
map.add(polyline);

// 建立兩個點標記
var marker1 = new AMap.Marker({
    position: new AMap.LngLat(117.39, 39.9),   // 經緯度對象，如 new AMap.LngLat(116.39, 39.9); 也能夠是經緯度構成的一維數組[116.39, 39.9]
    title: '北京'
});
var marker2 = new AMap.Marker({
    position: new AMap.LngLat(118.39, 39.9),   // 經緯度對象，如 new AMap.LngLat(116.39, 39.9); 也能夠是經緯度構成的一維數組[116.39, 39.9]
    title: '北京'
});
map.add(marker1);
map.add(marker2);

// 自動適配到合適視野範圍
// 無參數，默認包括全部覆蓋物的狀況
map.setFitView();
// 傳入覆蓋物數組，僅包括polyline和marker1的狀況
map.setFitView([polyline,marker1]);

　　

經常使用方法列表

下表所列爲經常使用設置 / 獲取地圖狀態方法，更多詳情請查看Map類的所有方法

 

方法

說明

getZoom( ) 

獲取當前地圖縮放級別，在PC上，默認取值範圍爲[3,18]；在移動設備上，默認取值範圍爲[3-19]。3D地圖會返回浮點數，2D視圖爲整數。

示例

setZoom(level:Number)

設置地圖顯示的縮放級別，在PC上，參數zoom可設範圍：[3,18]；在移動端：參數zoom可設範圍：[3,19]。3D地圖下，可將zoom設置爲浮點數。

示例

getCenter( )

獲取地圖中心點經緯度座標值。

setCenter(position: LngLat)

設置地圖顯示的中心點。

示例

setZoomAndCenter(zoomLevel:Number,center:LngLat)

地圖縮放至指定級別並以指定點爲地圖顯示中心點。

示例

getBounds( )

獲取當前地圖視圖範圍。3D地圖下返回類型爲AMap.ArrayBounds，2D地圖下仍返回AMap.Bounds 。

setBounds(bound:Bounds)

指定當前地圖顯示範圍，參數bounds爲指定的範圍。

示例

getCity(callback:function(result))

獲取地圖中心點所在區域，回調函數返回對象屬性分別對應爲{省，市，區/縣}。

示例

setCity(city:String，callback:Functon)

按照行政區名稱或adcode來設置地圖顯示的中心點。行政區名稱支持中國、省、市、區/縣名稱，如遇重名的狀況，會按城市編碼表順序返回第一個。adcode請在城市編碼表中查詢。建議不要同時使用center/setCenter()和setCity()，如一塊兒使用程序將以setCity()做爲最後結果。

示例

panTo(positon:LngLat)

地圖中心點平移至指定點位置。

示例

setStatus(status:Object)

設置當前地圖顯示狀態，包括是否可鼠標拖拽移動地圖、地圖是否可縮放、地圖是否可旋轉（rotateEnable）、是否可雙擊放大地圖、是否能夠經過鍵盤控制地圖旋轉（keyboardEnable）等。  

示例

 

覆蓋物/圖層管理

添加 / 獲取 / 移除覆蓋物

添加覆蓋物

覆蓋物有多種類型，包括點標記、矢量圖形、信息窗體等，都可以使用add方法添加。

// 構造點標記
var marker = new AMap.Marker({
    icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
    position: [116.405467, 39.907761]
});
// 構造矢量圓形
var circle = new AMap.Circle({
    center: new AMap.LngLat("116.403322", "39.920255"), // 圓心位置
    radius: 1000,  //半徑
    strokeColor: "#F33",  //線顏色
    strokeOpacity: 1,  //線透明度
    strokeWeight: 3,  //線粗細度
    fillColor: "#ee2200",  //填充顏色
    fillOpacity: 0.35 //填充透明度
});

// 將以上覆蓋物添加到地圖上
// 單獨將點標記添加到地圖上
map.add(marker);
// add方法能夠傳入一個覆蓋物數組，將點標記和矢量圓同時添加到地圖上
map.add([marker,circle]);

　　

獲取覆蓋物

可使用getAllOverlays(type)方法獲取已經添加的覆蓋物。其中type參數類型包括marker、circle、polyline、polygon，缺省是返回以上全部類型全部覆蓋物。

// 獲取已經添加的覆蓋物
map.getAllOverlays();

// 獲取已經添加的marker
map.getAllOverlays('marker');

移除覆蓋物

// 使用remove方法移除覆蓋物，參數能夠爲單個覆蓋物對象，也能夠是一個包括多個覆蓋物的數組
// 單獨移除點標記
map.remove(marker);
// 同時移除點標記和矢量圓形
map.remove([marker,circle]);

// 使用clearMap方法刪除全部覆蓋物
map.clearMap();

　　

地圖的交互與事件

地圖事件

地圖事件是對 Map 底圖操做後觸發的事件，事件回調中返回 MapsEvent對象。該對象包含觸發的對象目標、觸發所在經緯度等信息。

map.on('click', function(ev) {
  // 觸發事件的對象
  var target = ev.target;
  // 觸發事件的地理座標，AMap.LngLat 類型
  var lnglat = ev.lnglat;
  // 觸發事件的像素座標，AMap.Pixel 類型
  var pixel = ev.pixel;
  // 觸發事件類型
  var type = ev.type;
});

　　

點標記

點標記 Marker

// 建立一個 Marker 實例：
var marker = new AMap.Marker({
    position: new AMap.LngLat(116.39, 39.9),   // 經緯度對象，也能夠是經緯度構成的一維數組[116.39, 39.9]
    title: '北京'
});

// 將建立的點標記添加到已有的地圖實例：
map.add(marker);

// 移除已建立的 marker
map.remove(marker);

　　也能夠一次添加多個點標記到地圖實例（其它覆蓋物都可使用此方式）：

// 多個點實例組成的數組
var markerList = [marker1, marker2, marker3];

map.add(markerList);

　　

自定義圖標標記

如須要自定義點標記內容，能夠在建立 Marker 實例的時候，設置 icon 參數來實現。具體可經過如下兩種方式：

1. 爲建立的 Marker 指定自定義圖標 URL ：

var marker = new AMap.Marker({
    position: new AMap.LngLat(116.39,39.9),
    offset: new AMap.Pixel(-10, -10),
    icon: '//vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 圖標 URL
    title: '北京'
});

map.add(marker);

　　2. 爲建立的 Marker 指定 Icon 實例。此種方式能夠設置圖標大小，偏移等屬性，比單純設置 URL 更加靈活。建立方式以下

// 建立 AMap.Icon 實例：
var icon = new AMap.Icon({
    size: new AMap.Size(40, 50),    // 圖標尺寸
    image: '//webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png',  // Icon的圖像
    imageOffset: new AMap.Pixel(0, -60),  // 圖像相對展現區域的偏移量，適於雪碧圖等
    imageSize: new AMap.Size(40, 50)   // 根據所設置的大小拉伸或壓縮圖片
});

// 將 Icon 實例添加到 marker 上:
var marker = new AMap.Marker({
    position: new AMap.LngLat(116.405467, 39.907761),
    offset: new AMap.Pixel(-10, -10),
    icon: icon, // 添加 Icon 實例
    title: '北京',
    zoom: 13
});

map.add(marker);

　　或者向已建立好的 Marker 添加 Icon：

marker.setIcon(icon);

三. 自定義內容標記

對於更加複雜的 marker 展現，咱們可使用 Marker類 的 content 屬性。content 屬性取值爲用戶自定義的 DOM 節點或者 DOM 節點的 HTML 片斷。content 屬性比 icon 屬性更加靈活，設置了 content 之後會覆蓋 icon 屬性。具體實例以下：

var content = '<div class="marker-route marker-marker-bus-from"></div>';

var marker = new AMap.Marker({
    content: content,  // 自定義點標記覆蓋物內容
    position:  [116.397428, 39.90923], // 基點位置
    offset: new AMap.Pixel(-17, -42) // 相對於基點的偏移位置
});

map.add(marker);

　　

四. 自定義點標記的錨點位置

若是用戶自定義點標記內容，不管是自定義 Icon 仍是 自定義內容，都須要爲定義的圖片從新設置錨點位置。設置方法以下：

1.設置 anchor （自 v1.4.13 新增屬性）

經過 anchor 能夠方便的設置錨點方位。anchor 可選值有  'top-left'、'top-center'、'top-right'、'middle-left'、'center'、'middle-right'、'bottom-left'、'bottom-center'、'bottom-right' ， 分別表明了點標記錨點的不一樣方位。

var marker = new AMap.Marker({
    icon: '//a.amap.com/jsapi_demos/static/demo-center/marker/marker-bottom-left.png', // 自定義點標記
    position: [116.418481,39.90833], // 基點位置
    offset: new AMap.Pixel(0,0), // 設置點標記偏移量
    anchor:'bottom-left', // 設置錨點方位
});
map.add(marker);

　　

圓形標記 CircleMarker

構造一個圓形覆蓋物，v1.4.3版本新增類。可直接知足建立圓形標註的須要。

AMap.CircleMarker 類與下一章介紹到的 AMap.Circle 類均爲在地圖上繪製圓形覆蓋物的方法。這兩類的根本不一樣在於 AMap.Circle 爲矢量圖形類，隨地圖的縮放會改變大小；而 AMap.CircleMarker 類則不會隨圖面縮放而改變。

文本標記 Text

純文本標記，v1.4.2版本新增類。文本標記的展現內容爲純文本。繼承自 Marker 類，具備 Marker 的大部分屬性、方法和事件。

點標記事件

點標記支持 click, mouseover 等多種事件。點標記事件的添加和移除和支持的全部事件類型，

 清除全部的覆蓋物map.clearMap();

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程