Question

我曾尝试创建一个带有标记的地图，该标记用于标记位置并与其他地图标记连接。我如何设置地图的初始位置，它仅显示一个标记，当我们单击该标记时，它将放大并显示其他标记的详细信息，并将每个标记与蓝色虚线相连？感谢您的帮助

<!DOCTYPE html>
    <html>
        <head>
            <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
            <meta charset="utf-8">
            <title>Complex Polylines</title>
            <style>
            #map {
                height: 100%;
              }
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            </style>
        </head>
        <body>
            <div id="map"></div>
            <script>
                var poly;
                var map,i;

                function initMap() {
                    map = new google.maps.Map(document.getElementById('map'), {
                    zoom:3,
                    center: {lat: 1.3521, lng: 103.8198}
                });

                var marker10 = new google.maps.Marker({
                    position:  {lat: 1.336970, lng: 103.893822},
                    map: map,
                });

                var marker11 = new google.maps.Marker({
                    position:  {lat: 1.337287, lng: 103.893268},
                    map: map,
                });

                var marker5 = new google.maps.Marker({
                    position:  {lat: 1.295231, lng: 103.789842},
                    map: map,
                });

                map.addListener('center_changed', function() {
                    window.setTimeout(function() {
                        map.panTo(marker5.getPosition());
                    }, 300000);
                });

                marker5.addListener('click', function() {
                    map.setZoom(13);
                    map.setCenter(marker5.getPosition());
                });

                var equinix = new google.maps.LatLng(1.295231,103.789842);
                var global = new google.maps.LatLng(1.336970,103.893822);
                var racks = new google.maps.LatLng(1.337287,103.893268);

                var infowindow = new google.maps.InfoWindow({
                    content: "Global Switch"
                });
                infowindow.open(map,marker10);

                var infowindow = new google.maps.InfoWindow({
                    content: "Racks Central"
                });
                infowindow.open(map,marker11);

                var infowindow = new google.maps.InfoWindow({
                    content: "Equinix SG1"
                });
                infowindow.open(map,marker5);

                var lineSymbol = {
                    path: 'M 0,-1 0,1',
                    strokeOpacity: 1,
                    scale: 2
                };

                var flightPath = new google.maps.Polyline({
                    path: [equinix, global, racks],
                    geodesic: true,
                    strokeColor: '#0000FF',
                    strokeOpacity: 0,
                    icons: [{
                        icon: lineSymbol,
                        offset: '0',
                        repeat: '20px'
                    }],
                });
                flightPath.setMap(map);
                map.addListener('click', addLatLng);
            }
        </script>
        <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCf3JEwJFRtCVyKX2sAZC0PkBNK6PNY64w&callback=initMap">
        </script>
    </body>
</html>

显示/隐藏地图标记取决于放大/缩小级别

0 个答案: