高德地图API 简单使用

 主要是功能是 在地图上添加标记点、在标记点添加相应的内容、单击查看内容、双击直接进入相应的项目系统。

<!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>

运行效果

posted @ 2016-04-19 14:19  在 水 一 方  阅读(4618)  评论(0)  编辑  收藏  举报