【高德地圖API】如何設定Marker的offset？

酸奶小妹發表於2016-11-22
地圖API

一些朋友在往地圖上新增標註的時候，往往會發現，圖片的尖尖角對不上具體的點。比如，我要在上海東方明珠上扎一個點。

首先，我使用取點工具http://lbs.amap.com/console/show/picker 拾取到東方明珠的經緯度，為121.499809,31.239666。

然後寫一個自定義圖片標註的程式碼，程式碼片段：

var marker = new AMap.Marker({ //新增自定義點標記
        map: map,
        position: [121.499809,31.239666], //基點位置
        offset: new AMap.Pixel(0, 0), //相對於基點的偏移位置
        draggable: true,  //是否可拖動
        content: '<img src="marker_3.png" />'   //自定義點標記覆蓋物內容
    });

 

為了方便檢視，我在標註圖外面加了一個圈，可以看到，圖片的左上角對準了基點位置。並不是圖片的尖尖角啊喂！！

 

所以，我們需要設定offset，也就是偏移，來讓標註的尖尖角對準東方明珠。圖片的尺寸是128*128，我們先把偏移設定成-128,-128，意思是往左走，往上走。程式碼如下：

    var marker2 = new AMap.Marker({ //新增自定義點標記
        map: map,
        position: [121.499809,31.239666], //基點位置
        offset: new AMap.Pixel(-128, -128), //相對於基點的偏移位置
        draggable: true,  //是否可拖動
        content: '<img src="marker_3.png" />'   //自定義點標記覆蓋物內容
    });

 

圖片完美地跑到了上面！但是太靠左了，應該往右移一半呢。

 

所以把偏移設定成-64，-128。完整程式碼如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>markerOffset</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=0250860ccb5953fa5d655e8acf40ebb7"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
    var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [121.499809,31.239666],//地圖中心點
        zoom: 18 //地圖顯示的縮放級別
    });    

    var marker2 = new AMap.Marker({ //新增自定義點標記
        map: map,
        position: [121.499809,31.239666], //基點位置
        offset: new AMap.Pixel(-64, -128), //相對於基點的偏移位置
        draggable: true,  //是否可拖動
        content: '<img src="marker_3.png" />'   //自定義點標記覆蓋物內容
    });
</script>
</body>
</html>

 

這樣子，標註的尖尖角就完美地對準了東方明珠。如下圖：

 

以上就是為什麼以及如何給Marker設定offset洛~ 

 

 

如果大家還有疑問，可以給我提工單：http://lbs.amap.com/dev/ticket#/tickets

48小時內回覆，還有機會免費得到教程詳解。謝謝！

 

相關文章