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

時間 2019-11-17

標籤高德地圖API 如何設置 marker offset 简体版

原文原文鏈接

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

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

而後寫一個自定義圖片標註的代碼，代碼片斷：html

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" />'   //自定義點標記覆蓋物內容
    });

爲了方便查看，我在標註圖外面加了一個圈，能夠看到，圖片的左上角對準了基點位置。並非圖片的尖尖角啊喂！！java

因此，咱們須要設置offset，也就是偏移，來讓標註的尖尖角對準東方明珠。圖片的尺寸是128*128，咱們先把偏移設置成-128,-128，意思是往左走，往上走。代碼以下：web

    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" />'   //自定義點標記覆蓋物內容
    });

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

因此把偏移設置成-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>