zoukankan      html  css  js  c++  java
  • Google地图轨迹与标注窗口

    Google地图创建轨迹查询与点击Marker显示弹出层,方法与百度地图差不多
    <!DOCTYPE html>
    <html>
    
    <head runat="server">
        <title>google地图轨迹</title>
        <style type="text/css">
            #map_canvas {
                width: auto;
                height: 600px;
                border: 1px solid gray;
            }
            #user1 {
                top: 50px;
            }
            
            #user2 {
                top: 200px;
            }
            
            .user-list {
                right: 25px;
                position: fixed;
                border: 1px solid #c0c0c0;
                width: 180px;
                height: 110px;
                background: #fff;
                border-radius: 10px;
                filter: alpha(Opacity=80);
                -moz-opacity: 0.8;
                opacity: 0.8;
            }
            
            .user-list ul {
                list-style-type: none;
                padding-left: 10px;
            }
            
            .user-list ul li {
                padding-bottom: 10px;
            }
        </style>
    </head>
    
    <body onload="initialize()">
        <form id="form1" runat="server">
            <div id="map_canvas"></div>
        </form>
        <div id="user1" class="user-list">
            <ul>
                <li>姓名:张三</li>
                <li>职务:3</li>
                <li>电话:123456</li>
            </ul>
        </div>
        <div id="user2" class="user-list">
            <ul>
                <li>姓名:李四</li>
                <li>职务:3</li>
                <li>电话:123456</li>
            </ul>
        </div>
        <script src="http://maps.google.com/maps/api/js?key=您的密匙&v=3.1&sensor=true" type="text/javascript"></script>
    
        <script type="text/javascript">
            function initialize() {
                var myOptions = {
                    zoom: 15,
                    center: new google.maps.LatLng(39.964556, 116.274834),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                
                // Google地图轨迹坐标集   纬度,经度  或使用ajax后台读取
                var trackPoints = [
                    new google.maps.LatLng(39.964556, 116.274834),
                    new google.maps.LatLng(39.956662, 116.275735),
                    new google.maps.LatLng(39.957221, 116.284447),
                    new google.maps.LatLng(39.95834, 116.29406),
                    new google.maps.LatLng(39.959326, 116.29951),
                    new google.maps.LatLng(39.960083, 116.303029),
                    new google.maps.LatLng(39.96209, 116.307793)
                ];
    
                var trackPath = new google.maps.Polyline({
                    path: trackPoints,
                    strokeColor: "#FF0000", // 线条颜色
                    strokeOpacity: 1.0,     // 线条透明度
                    strokeWeight: 2         // 线条粗细
                });
    
                
                for (var i = 0; i < trackPoints.length; i++) {
                    //放置锚点  地图标记Marker
                    var marker = new google.maps.Marker({
                        position: trackPoints[i],
                        map: map,
                    });
                    //创建标注窗口
                    showinfomessage(marker, map);       
                }
                trackPath.setMap(map);
            }
    
            function showinfomessage(marker, map) {
                var infoWindow = new google.maps.InfoWindow({
                    content: "姓名:张三</br>职务:3<br />电话:123456"               // 创建信息窗口对象 
                }); 
                google.maps.event.addListener(marker,"click", function () {
                    infoWindow.open(map,marker);                                    // 打开信息窗口 
                });
            }
        </script>
    
    </body>
    
    </html>
    View Code

    效果展示:

  • 相关阅读:
    [转] 一文读懂 HTTP/2 特性
    设置VS2019 支持C++17标准
    switch case 字符串表达式支持
    在Fabric实现类似Uniswap的去中心化交易所
    数据上链的原则与方式
    2.4g无线私有协议透传方案特色梳理
    无线数字麦克风解决方案小结
    高保真的音频编解码器模块及方案解析
    基于wifi的音频采集及处理解决方案小结
    基于智能降噪的助听器解决方案解析
  • 原文地址:https://www.cnblogs.com/ttxbc/p/6604850.html
Copyright © 2011-2022 走看看