首页 > 编程语言> > javascript – Google Maps API：点击标记打开网址

javascript – Google Maps API：点击标记打开网址

2019-09-26 16:43:33 作者：互联网

我想通过使用Google Maps API 3点击标记打开一个新窗口.

不幸的是,Google Maps API的示例并不多,我发现了这段代码：

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

当我用循环创建标记时如何使用它？我在很多方面都尝试过它而且没有能力.

这是我的代码 – 我简单而简短：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }
        #map_canvas { height: 100% }
    </style>

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
    var points = [
        ['name1', 59.9362384705039, 30.19232525792222, 12],
        ['name2', 59.941412822085645, 30.263564729357767, 11],
        ['name3', 59.939177197629455, 30.273554411974955, 10]
    ];

    function setMarkers(map, locations) {
        var shape = {
            coord: [1, 1, 1, 20, 18, 20, 18 , 1],
            type: 'poly'
        };

        for (var i = 0; i < locations.length; i++) {
            var flag = new google.maps.MarkerImage('markers/' + (i + 1) + '.png',
            new google.maps.Size(17, 19),
            new google.maps.Point(0,0),
            new google.maps.Point(0, 19));

            var place = locations[i];
            var myLatLng = new google.maps.LatLng(place[1], place[2]);
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: flag,
                shape: shape,
                title: place[0],
                zIndex: place[3]
            });
        }
    }

    function initialize() {
        var myOptions = {
            center: new google.maps.LatLng(59.91823239768787, 30.243222856188822),
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
        setMarkers(map, points);
    }
    </script>
</head>

<body onl oad="initialize()">
    <div id="map_canvas" style="width:50%; height:50%"></div>
</body>
</html>

如何通过单击带有上面代码的标记来打开URL？

解决方法:

您可以为每个点添加特定网址,例如：

var points = [
    ['name1', 59.9362384705039, 30.19232525792222, 12, 'www.google.com'],
    ['name2', 59.941412822085645, 30.263564729357767, 11, 'www.amazon.com'],
    ['name3', 59.939177197629455, 30.273554411974955, 10, 'www.stackoverflow.com']
];

将url添加到for循环中的标记值：

var marker = new google.maps.Marker({
    ...
    zIndex: place[3],
    url: place[4]
});

然后你可以在你的for循环结束之前添加：

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

另见example.

标签：javascript,google-maps,google-maps-api-3,google-maps-markers
来源： https://codeday.me/bug/20190926/1820968.html