使用高德地图展示点位和信息窗体展示数据及播放视频-Toy模板网

这篇具有很好参考价值的文章主要介绍了使用高德地图展示点位和信息窗体展示数据及播放视频。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

使用高德地图做了一个在地图展示点位，并通过点击，显示直播的功能，这个任务是为了之后大屏做准备。

这是一个能展示多个点标记，并在点击的时候弹出信息窗体，并在信息窗体中播放视频，且展示相关信息以及操作事件。

一、使用到的高德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>