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