Javascript 谷歌地图API：点击标记打开url_Javascript_Google Maps_Google Maps Api 3_Google Maps Markers

Javascript 谷歌地图API：点击标记打开url

javascript google-maps google-maps-api-3

Javascript 谷歌地图API：点击标记打开url,javascript,google-maps,google-maps-api-3,google-maps-markers,Javascript,Google Maps,Google Maps Api 3,Google Maps Markers,我想通过使用谷歌地图API 3点击一个标记来打开一个新窗口不幸的是，Google Maps API的示例并不多，我发现了以下代码： google.maps.event.addListener(marker, 'click', function() { window.location.href = marker.url; }); 当我创建带有循环的标记时，如何使用它？我试过很多种方法，但都买不起这是我的代码–我使它简单明了： <!DOCTYPE html> <htm

我想通过使用谷歌地图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 onload="initialize()">
    <div id="map_canvas" style="width:50%; height:50%"></div>
</body>
</html>


html{高度：100%}
正文{高度：100%；边距：0；填充：0}
#地图画布{高度：100%}
变量点=[
[name1'，59.9362384705039,30.19232525792222,12]，
[name2'，59.941412822085645,30.263564729357767,11]，
[name3'，59.939177197629455,30.2735544111974955,10]
];
功能设置标记（地图、位置）{
变量形状={
坐标：[1,1,1,20,18,20,18,1]，
类型：“poly”
};
对于（变量i=0；i


如何通过单击上面带有代码的标记打开url？
url
不是标记类上的对象。但是没有什么能阻止您将其作为属性添加到该类中。我猜无论你在看什么样的例子，都是这样的。是否希望每个标记使用不同的URL？当您执行以下操作时会发生什么：
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],
        url: "/your/url/"
    });

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

for（变量i=0；i
您可以为每个点添加特定的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]
});

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

然后，您可以在for循环结束之前添加：
var marker = new google.maps.Marker({
    ...
    zIndex: place[3],
    url: place[4]
});

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

也看看这个。
前面的答案对我来说不太合适。通过设置标记，我一直存在问题。所以我稍微修改了代码
   <!DOCTYPE html>
   <html>
   <head>
     <meta http-equiv="content-type" content="text/html; charset=ANSI" />
     <title>Google Maps Multiple Markers</title>
     <script src="http://maps.google.com/maps/api/js?sensor=false"
      type="text/javascript"></script>
   </head>
   <body>
     <div id="map" style="width: 1500px; height: 1000px;"></div>

     <script type="text/javascript">
       var locations = [
         ['Goettingen',  51.54128040000001,  9.915803500000038, 'http://www.google.de'],
         ['Kassel', 51.31271139999999,  9.479746100000057,0, 'http://www.stackoverflow.com'],
         ['Witzenhausen', 51.33996819999999,  9.855564299999969,0, 'www.http://developer.mozilla.org.de']

 ];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
 center: new google.maps.LatLng(51.54376, 9.910419999999931),
 mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
   position: new google.maps.LatLng(locations[i][1], locations[i][2]),
   map: map,
   url: locations[i][4]
  });

 google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
   return function() {
     infowindow.setContent(locations[i][0]);
     infowindow.open(map, marker);
   }
 })(marker, i));

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
   return function() {
     infowindow.setContent(locations[i][0]);
     infowindow.open(map, marker);
     window.location.href = this.url;
   }
 })(marker, i));

    }

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


谷歌地图多个标记
变量位置=[
[Goettingen'，51.5412804000001，9.915803500000038，'http://www.google.de'],
[Kassel'，51.312711399999，9.47974610000057,0，'http://www.stackoverflow.com'],
[Witzenhausen'，51.3399681999999，9.85556429999969,0'，www。http://developer.mozilla.org.de']
];
var map=new google.maps.map（document.getElementById（'map'）{
缩放：10，
中心：新google.maps.LatLng（51.54376,9.91041999931），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var infowindow=new google.maps.infowindow（）；
var标记，i；
对于（i=0；i

这条路对我很管用！
您可以从数据库中创建Google Maps路由链接，将其用作交互式路由地图。
如果有人想在单个标记上添加URL，而不需要循环，请参见以下步骤：
if ($('#googleMap').length) {
    var initialize = function() {
        var mapOptions = {
            zoom: 15,
            scrollwheel: false,
            center: new google.maps.LatLng(45.725788, -73.5120818),
            styles: [{
                stylers: [{
                    saturation: -100
                }]
            }]
        };
        var map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
        var marker = new google.maps.Marker({
            position: map.getCenter(),
            animation: google.maps.Animation.BOUNCE,
            icon: 'example-marker.png',
            map: map,
            url: 'https://example.com'
        });

        //Add an url to the marker
    google.maps.event.addListener(marker, 'click', function() {
        window.location.href = this.url;
    });
    }
    // Add the map initialize function to the window load function
    google.maps.event.addDomListener(window, "load", initialize);
}

谢谢你的回复。我以前试过，今天又试过一次。这样，每个标记都有相同的url。但这并不是我所需要的。我需要不同的网址。如何将url1设置为marker1，将url2设置为marker2？如何解决？我有一个类似的项目，每次点击标记都必须在一个div中打开一个函数。谢谢回复。这样，将为每个标记打开最后一个url。我试过了，但没有找到解决办法。我检查了你的例子（上面的链接）：据我判断：也有同样的问题——当你点击标记时，每个标记都有“stackoverflow链接”。这真是太棒了！它起作用了。我认为问题在于听众的位置不对。非常感谢，不客气。如果您对答案感到满意，请将其标记为正确答案。完成。（我只是在阅读faq来找出如何标记正确答案。）谢谢。添加新代码后，我注意到一个问题：当鼠标悬停在标记上时，没有标记名称提示。在进行更改之前：有标记的名称“onmouseover”：“name1”、“name2”。（示例（上面的链接）也有这个问题。）这就是我通过objectsHello循环得到的！虽然这段代码可以解决这个问题，但如何解决