高德地图第一篇

Posted 2020-07-31 ck168

如果使用高德地图的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();
}