高德地图第一篇

如果使用高德地图的API，首先需要引入高德地图的API

1、页面引入高德地图API

 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=59cc615a40d6b98b7f3756a0f6f8721d"></script>

2、页面上需要有个容器进行承载

<div id="container" class="container abs">
                    
</div>

3、然后就可以在JS中声明并进行调用了

// 地图对象
var map = null;
// 地图上的所有自定义点
var markers = [];


var icon1 = new AMap.Icon({
    size: new AMap.Size(52, 56),
    image: "/Assest/tour/images/icon1.png",
    imageOffset: new AMap.Pixel(0, 0)
});

var icon2 = new AMap.Icon({
    size: new AMap.Size(40, 50),
    image: "/Assest/tour/images/icon2.png",
    imageOffset: new AMap.Pixel(0, 0)
});
$(function () {
    // 初始化地图对象        
    map = new AMap.Map('container', {
        resizeEnable: true,
        dragEnable: true, //是否可以拖动
        view: new AMap.View2D({
            zoom: 20
        })
    });

}

4、marker的使用

// 标记点
        var marker = new AMap.Marker({
            map: map,
            content: i == 0 ? '<div class="icon1"><div class="text">' + (i + 1) + '</div></div>' : '<div class="icon2"><div class="text">' + (i + 1) + '</div></div>',
            position: [pointinfo[i].lon, pointinfo[i].lat],
            offset: { x: -20, y: -20 }  //偏移量
        });

// 信息窗口
        marker.infoWindow = new AMap.InfoWindow({
            content: '<div class="tit">' + pointDescName + '</div><div class="generalInfo" 
onclick="openOrJump(\'' + pointinfo[i].lon + '\',\'' + pointinfo[i].lat + '\',\'' + pointDescName + '\')"><img src=\'' + navigationIcon + '\' alt=\"\"></div>',
            offset: { x: -18, y: -10 }
        });
        marker.id = pointinfo[i].id;


AMap.event.addListener(marker, 'click', function (e) {
     e.target.infoWindow.open(map, e.target.getPosition());
      map.setFitView();
});


marker.setContent('<div class="icon1"><div class="text">' + (1) + '</div></div>');
            marker.infoWindow.open(map, marker.getPosition());
            map.setFitView();

5、在地图上画轨迹图

function showTrack(track) {
    var path = [];
    var arr = track.split("|");
    for (var i = 0; i < arr.length / 2; i++) {
        path.push([arr[i * 2], arr[i * 2 + 1]]);
    }

    var polyline = new AMap.Polyline({
        path: path,
        strokeColor: "#3366FF",
        strokeOpacity: 0.5,//线透明度
        strokeWeight: 4,//线宽
        strokeStyle: "solid",//线样式
        isOutline: true,
        outlineColor: "#3366FF"
    });
    polyline.setMap(map);
    map.setFitView();
}

 6、给地图注册事件

   //点击地图空白地方，清除所有的弹出窗体 
　　AMap.event.addListener(map, 'click', function (e) {
        map.clearInfoWindow();
    });

 7、marker在地图上进行移动

    AMap.event.addDomListener(document.getElementById('start'), 'click', function() {
        marker.moveAlong(lineArr, 500);
    }, false);
    AMap.event.addDomListener(document.getElementById('stop'), 'click', function() {
        marker.stopMove();
    }, false);

marker移动完后可以自动停止移动消失

//开始回放
function startPlay() {
    AMap.event.addListenerOnce(markerCar, "movealong", function (e) {
        stopPlay();
    });
    $("#play").hide();
    $("#control").show();
    markerCar.show();
    if (wholeDistance == 0)
        wholeDistance = getDistance();
    var displayTime = getDisplayTime();

    var displaySpeed = wholeDistance / displayTime;
    markerCar.moveAlong(paths, displaySpeed);
}
//停止回放
function stopPlay()
{
    $("#play").show();
    $("#control").hide();
    markerCar.hide();
    markerCar.stopMove();
}

8、计算高德地图上两个点之间的距离

var lnglat = new AMap.LngLat(116.368904, 39.923423);
    AMap.event.addDomListener(document.getElementById('calc'), 'click', function() {
        alert('两点间距离为：' + lnglat.distance([116.387271, 39.922501]) + '米');
    });

9、将高德地图访问显示成图片的形式

http://restapi.amap.com/v3/staticmap?zoom=10&size=500*500&markers=mid,0xFF0000,A:116.37359,39.92437;116.47359,39.92437&paths=10,0x0000ff,1,,:116.31604,39.96491;116.320816,39.966606;116.321785,39.966827;116.32361,39.966957&key=59cc615a40d6b98b7f3756a0f6f8721d

可以参考高德地图文档

http://lbs.amap.com/api/webservice/reference/staticmaps/#t4