草庐IT

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

九月萩 2024-07-04 原文

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

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

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

高德信息窗spanclasstoken前端html5

有关使用高德地图展示点位和信息窗体展示数据及播放视频的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  4. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

  5. ruby - 在 Ruby 中使用匿名模块 - 2

    假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外，还有什么方法可以访问C和m中的其他内容？我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)？如何在使用完匿名模块后将其删除，使其定义的常量不再存在？ 最佳答案 三个答案:是的，使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于

  6. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我

  7. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  8. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  9. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  10. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

随机推荐