高德地圖API 簡單使用

2016-04-19 14:09:00

主要是功能是在地圖上添加标記點、在标記點添加相應的内容、單擊檢視内容、輕按兩下直接進入相應的項目系統。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <script src="http://webapi.amap.com/maps?v=1.3&key=您的密匙"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
    <div id="container"></div>

<script type="text/javascript">
    //初始化地圖對象，加載地圖
    var map = new AMap.Map("container", {resizeEnable: true});
    var lnglats = [
        [116.368904, 39.923423],
        [116.382122, 39.921176],
        [116.387271, 39.922501],
        [116.398258, 39.914600]
    ];
    var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });


    for (var i = 0, marker; i < lnglats.length; i++) {
        var marker = new AMap.Marker({
            position: lnglats[i],
            map: map
        });
        marker.content = '橋梁第' + (i + 1) + '座';
        marker.on('click', markerClick);
        marker.on('dblclick', markerClickDouble);
        //  marker.emit('click', {target: marker});
    }
    function markerClick(e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());

      
    }

    function markerClickDouble(e) {
        alert(e.target.getPosition());
    }
    map.setFitView();
</script>
</body>
</html>

運作效果