一、使用到的高德API介绍：

（一）、申请高德地图key

首先就是申请高德地图的key。

<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=xxxxxxxxxxxxxxx"></script>

在html文件中，需要先准备一个“容器”，即添加

标签，然后给它一个id属性，方便后面定位地图容器进行操作。

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

（二）、创建地图

创建的同时可以给地图设置中心点、级别、显示模式、自定义样式等属性，这里我使用的分别是：缩放级别、是否监控地图容器尺寸变化，默认值为false、地图中心点坐标值。

var map = new AMap.Map("container", {
    zoom: 8,
    resizeEnable: true,
    center: [116.397428, 39.90923],//中心点坐标
});

接着就是图层，默认是标准底图，但也可以添加其他图层，可以通过map.add方法添加图层：

这里使用的是卫星地图，通过放置在右上角的切换按钮，点击切换标准地图或者卫星地图。

var satelliteLayer = new AMap.TileLayer.Satellite();    // 卫星图

通过点击事件切换地图：

// 切换地图类型
$("#map_footer_div div").click(function (e) {
    e.preventDefault();
    // 如果为true，是标准图，赋值地图类型状态为false，通过map.remove()方法去除卫星图。
    if (mapFlag) {
        mapFlag = false;
        map.remove(satelliteLayer);
    } else {
        mapFlag = true;
        // 如果mapflag为false，说明 是卫星图
        map.add(satelliteLayer);
    }
})

官方地图 JS API 提供了标准、卫星、路网、路况、建筑等多个图层，还有其他更加高级的图层。尝试了几个图层，还是很有意思的。

（三）、点标记

官方提供了在地图之上绘制覆盖物的能力，比如点标记 Marker、文本标记 Text、圆点标记 CircleMarker。

使用起来还是很简单的，添加一个默认样式的点标记。

var marker = new AMap.Marker({
    position:[116.39, 39.9]//位置
})
map.add(marker);//添加到地图
map.remove(marker); // 移除的方法

（四）、事件功能和信息窗体

JS API 提供的Map、点标记、矢量图形的实例均支持事件，鼠标或者触摸操作均会触发相应的事件。我们通过给点标记绑定click事件来简单了解事件系统和信息窗体的基本使用：

var infoWindow = new AMap.InfoWindow({ //创建信息窗体
    isCustom: true,  //使用自定义窗体
    content:'<div>信息窗体</div>', //信息窗体的内容可以是任意html片段
    offset: new AMap.Pixel(16, -45)
});
var onMarkerClick  =  function(e) {
    infoWindow.open(map, e.target.getPosition());//打开信息窗体
    //e.target就是被点击的Marker
} 
var marker = new AMap.Marker({
    position: [116.481181, 39.989792]
})
map.add(marker);
marker.on('click',onMarkerClick);//绑定click事件

二、综合

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset=utf-8>
    <meta name="viewport" id="viewport"
        content="width=device-width,height=device-height,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="format-detection" content="telephone=no, email=no" />
    <script type='text/javascript' src="/gisapi/getscript"></script>
    <title></title>
    <style>
        ul li {
            list-style: none;
        }
        #map_footer {
            position: fixed;
            bottom: 0;
            right: 0;
        }
    </style>

<body>
    <div class="map_box" id="container"></div>

    <!-- 底部切换 地图类型 -->
    <footer id="map_footer">
        <div style="display:flex;justify-content: center;align-items: center;" id="map_footer_div">
            <div>
                <!-- 普通地图 -->
                <img id="map_nowx" style="display: inline-block; height:60px;" src="../images/map_nowx_active.png" alt=""></div>
            <div>
                <!-- 卫星地图 -->
                <img id="map_havewx" style="display: inline-block; height:60px;" src="../images/map_havewx.png" alt="">
            </div>
        </div>
    </footer>


    <script src="../script/jquery-1.12.2.min.js"></script>
    <script src="../script/flv.min.js"></script>
    <script src="../script/doT.min.js"></script>
    <script type="text/javascript" src="xxx"></script>

    <!-- 使用：前端渲染引擎doT.js -->
    <script id="dynamicDetailTemplate" type="text/x-dot-template">
        <div style="border-radius: 15px;width:375px;">
            <div id="monitorDiv">
                <!-- 直播视频 -->
                <video controls width="100%" height="210px" autoplay muted id="VideoObj" href="{{=it.url}}"></video>
            </div>
            
            <ul class="map_ul_right">
                ...    <!-- 底部信息 -->
            </ul>
        </div>
    </script>


    <script>
        var videoUrl;
        var mapFlag = true;     //为true则显示正常地图，false为卫星地图    
        var monitorList = [];   // 地图信息
        // 使用高德地图
        var infoWindow = new AMap.InfoWindow({
            offset: new AMap.Pixel(0, -30),
            anchor: 'bottom-center',
        });//信息窗口
        // 高德地图的open事件
        infoWindow.on('open', showVideo);
        var satelliteLayer = new AMap.TileLayer.Satellite();    // 卫星图
        var map = new AMap.Map("container", {
            resizeEnable: true,
            center: [119.47, 32.84],//中心点坐标
            zoom: 8
        });


        $(document).ready(function () {
            getMonitorList();
        });
        // 请求 点位数据的 接口
        function getMonitorList() {
            $.get("xxx",
                function (res) {
                    console.log('地图信息', res);

                    monitorList = res.resultTable;
                    for (var j = 0; j < monitorList.length; j++) {
                        var marker = new AMap.Marker({
                            position: [monitorList[j].lon, monitorList[j].lat],
                            mapId: monitorList[j].f_698,//	标识
                            map: map,
                            icon: new AMap.Icon({
                                image: '../images/xxx.png',   // 本地自定义图标位置
                                size: new AMap.Size(25, 25),  //图标大小  
                                imageSize: new AMap.Size(25, 25)
                            }),
                        });
                        // 给所有的点标注添加点击事件
                        AMap.event.addListener(marker, 'click', markerClick);
                    }
                }
            );
        }

        // 点击图标 触发事件
        function markerClick(e) {
            var windowInfo = {
                monitorId: e.target.De.monitorId,  //标识
            }

            // 请求 直播地址接口
            ajax.syncPost("xxx", { bindid: e.target.De.monitorId },
                function (ret) {
                    // 如果请求成功，说明有直播地址
                    if (ret.s) {
                        videoUrl = ret.o.flvUrl;

                        var dynamicDetailTemplate = $("#dynamicDetailTemplate").text();
                        var dynamicDetail = doT.template(dynamicDetailTemplate);

                        // 设置窗口内容和定位
                        infoWindow.setContent(dynamicDetail(windowInfo));
                        // 传入经纬度，信息窗体才会进行跟随
                        infoWindow.open(map, [e.target.De.position.lng, e.target.De.position.lat]);
                    }
                }
            );
        }

        // 定时器：不加定时器会导致视频的id找不到
        function showVideo() {
            setTimeout(function () {
                playFlv(videoUrl, '#VideoObj');
            }, 1000);
        };

        // 视频播放
        function playFlv(url, id) {
            if (flvjs.isSupported()) {
                this.flvPlayer = flvjs.createPlayer({
                    type: "flv",
                    url,
                });
                this.flvPlayer.attachMediaElement(document.querySelector("#VideoObj"));
                this.flvPlayer.load();
            }
        };

        // 点击其他地方，关闭信息窗体
        map.on('click', function () {
            infoWindow.close();
        });

        // 切换地图类型
        $("#map_footer_div div").click(function (e) {
            e.preventDefault();
            var map_id = $(this).find("img").attr("id");

            if (map_id == "map_nowx") {
                mapFlag = true;
                if (mapFlag) {
                    $("#map_nowx").attr("src", "../images/map_nowx_active.png");
                    $("#map_havewx").attr("src", "../images/map_havewx.png");
                    map.remove(satelliteLayer);
                }
            } else if (map_id == "map_havewx") {
                mapFlag = false;
                // 如果mapflat为false，说明 是卫星图
                if (!mapFlag) {
                    $("#map_havewx").attr("src", "../images/map_havewx_active.png");
                    $("#map_nowx").attr("src", "../images/map_nowx.png");
                    map.add(satelliteLayer);
                }
            }
        })
    </script>
</body>

</html>