Question

在这里查看这些：

Google Maps API V3 multiple markers with links

但他们没有帮助。我不是精通编程和总计n00b。我只是想在我的网页上添加一些标记动画。我希望能够在单个标记结束后单击它并重定向到相关的标记URL。

更新：非常感谢您对此采取后续行动。但是当我尝试运行html页面时，我得到一个空白屏幕。我在下面更新了我的代码。我还删除了z索引，并将所有代码更新放在标签内的标签之间）最后，我删除了intialize（）;调用函数而不是使用。运行代码理论上应该将3个标记放在地图上，指定的URL给出了neighborhoods.length = 3.但是刷新后页面仍然是空白的。

因此阻止浏览器将地图加载到页面上。地图画布是否需要调整？我的更新代码如下： -

<!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;
        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()";>

<script>  

<div id="panel" style="margin-left: -52px">

<button id="drop" onclick="drop()">Drop Markers</button>
     </div>
    <div id="map-canvas"></div>

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

var iterator = 0;  // I added back this initialized variable which        //wasn't in your adjusted code shown here

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.google.com'];

function initialize() {
   {......etc. }

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

Answer 1

您的代码中有几个问题。语法等我从代码中删除了一些内容以使其更容易理解（setTimeout，toggleBounce等）。我在drop()函数中添加了对initialize()函数的调用。我还通过在DIV中显示URL来替换window.location.href。检查底部的小提琴链接。

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.google.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 () {
        document.getElementById('goToLocation').innerHTML = 'Will send you to ' + this.url;
    });

    markers.push(marker);
}

initialize();

这应该可以帮助您入门。

JSFiddle

如何将不同的URL链接到API v3的多个地图标记

1 个答案: