Question

我试图让每个标记在点击时指向网址。标记在地图上按顺序丢弃，并在短暂的弹跳动画后立即结算。但是，点击每个标记会返回＆＃34;找不到网页＆＃34;？我不明白为什么会这样，因为每个网址都保存在mapUrl数组变量中。如果使用了一个明确的网址，它就会起作用，即

window.location.href =＆＃39; www.amazon.com＆＃39;;

但我有多个标记，所以我需要脚本来读取存储在mapUrl数组中的url。建议这样做：

google.maps.event.addListener（marker，＆＃39; click＆＃39;，function（）{ document.getElementById（＆＃39; goToLocation＆＃39;）。innerHTML =＆＃39;会将您发送给＆＃39; + this.url; }）;

但是等号后面的语法不起作用，即this.url部分。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Marker animations with <code>setTimeout()</code>
    </title>
    <style>
        html,
        body,
        #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
        #panel {
            position: absolute;
            top: 5px;
            left: 50%;
            margin-left: -180px;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>

    <div id="panel">
        <button id="drop" onclick="drop()">Drop Markers</button>
    </div>

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
</head>
<body onload="initialize()" ;>

    <div id="map-canvas"></div>

    <script>
        var sacramento = new google.maps.LatLng(38.576725, -121.493715);

        var neighborhoods = [
            new google.maps.LatLng(38.576725, -121.493715),
            new google.maps.LatLng(35.011263, -115.473376),
            new google.maps.LatLng(33.941820, -118.408466)
        ];

        var markers = [];
        var map;
        var mapUrl = [
            'http://www.google.com',
            'http://www.youtube.com',
            'http://maps.amazon.com'
        ];

        function initialize() {

            var mapOptions = {
                zoom: 5,
                center: sacramento
            };

            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            drop();
        }

        function drop() {
            for (var i = 0; i < neighborhoods.length; i++) {
                addMarker(i);
            }
        }

        function addMarker(iterator) {

            var marker = new google.maps.Marker({
                position: neighborhoods[iterator],
                map: map,
                draggable: false,
                url: mapUrl[iterator],
                animation: google.maps.Animation.DROP
            });

            google.maps.event.addListener(marker, 'click', function () {
                window.location.href = markers.mapUrl;
            });

            google.maps.event.addListener(marker, 'click', toggleBounce);

            markers.push(marker);

        }

        function toggleBounce() {

            if (markers.getAnimation() != null) {
                markers.setAnimation(null);
            } else {

                markers.setAnimation(google.maps.Animation.BOUNCE);
            }

        }
    </script>    
</body>
</html>

Answer 1

你的代码有点混乱，但我认为你非常接近你想要做的事情。

google.maps.event.addListener(marker, 'click', function () {
    window.location.href = markers.mapUrl;;
});

应该是：

google.maps.event.addListener(marker, 'click', function () {
    window.location.href = this.url;
});

由于点击标记会重定向页面，因此不会使用/需要调用toggleBounce的第二个单击处理程序。这是一个清理和工作版本，基于你想要做的事情。同时将div从head移至body，并删除了地图API的额外导入。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Marker animations with 'setTimeout()'
    </title>
    <style>
        html,
        body,
        #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
        #panel {
            position: absolute;
            top: 5px;
            left: 50%;
            margin-left: -180px;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
</head>
<body onload="initialize()" ;>
    <div id="map-canvas"></div>
    <div id="panel">
        <button id="drop" onclick="drop()">Drop Markers</button>
    </div>
    <script>
        var sacramento = new google.maps.LatLng(38.576725, -121.493715);

        var neighborhoods = [
            new google.maps.LatLng(38.576725, -121.493715),
            new google.maps.LatLng(35.011263, -115.473376),
            new google.maps.LatLng(33.941820, -118.408466)
        ];

        var markers = [];
        var map;
        var mapUrl = [
            'http://www.google.com',
            'http://www.youtube.com',
            'http://maps.amazon.com'
        ];

        function initialize() {
            var mapOptions = {
                zoom: 5,
                center: sacramento
            };

            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            drop();
        }

        function drop() {
            for (var i = 0; i < neighborhoods.length; i++) {
                addMarker(i);
            }
        }

        function addMarker(iterator) {

            var marker = new google.maps.Marker({
                position: neighborhoods[iterator],
                map: map,
                draggable: false,
                url: mapUrl[iterator],
                animation: google.maps.Animation.DROP
            });

            google.maps.event.addListener(marker, 'click', function () {
                window.location.href = this.url;
            });

            markers.push(marker);
        }
    </script>    
</body>
</html>

将URL链接到多个Map标记

1 个答案: