將infowindows添加到帶標籤的標記，因爲它們被放置在地圖上？

我已經包含了一個沒有信息窗口的工作腳本的例子。將infowindows添加到帶標籤的標記，因爲它們被放置在地圖上？

我已經包含了一個數組deliveryContent，它將保存infowindow的內容。我在添加infowindow時如何參考標記而掙扎。

<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>All delivery locations marker animations with <code>setTimeout()</code></title> 
<style type="text/css"> 
.labels { 
    color: black; 
    background-color: white; 
    font-family:"Lucida Grande", "Arial", sans-serif; 
    font-size: 12px; 
    text-align: center; 
    width: 30px; 
    border: 2px solid black; 
    white-space: nowrap; 
} 


</style> 
    <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"></script> 
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script> 
    <script> 
// If you're adding a number of markers, you may want to 
// drop them on the map consecutively rather than all at once. 
// This example shows how to use setTimeout() to space 
// your markers' animation. 

var store = new google.maps.LatLng(41.2382980, -85.8564200); 


var deliveriePoints = [ 
    new google.maps.LatLng(41.2376780, -85.8562430), 
    new google.maps.LatLng(41.2386110, -85.8524380), 
    new google.maps.LatLng(41.2396430, -85.8285930), 
    new google.maps.LatLng(41.2420040, -85.8062659), 
    new google.maps.LatLng(41.2608541, -85.9731375), 
    new google.maps.LatLng(41.2373810, -85.8070200), 
    new google.maps.LatLng(41.2950700, -85.8276680), 
    new google.maps.LatLng(41.2033602, -85.8166853), 
    new google.maps.LatLng(41.2485910, -85.8490100), 
    new google.maps.LatLng(41.2124700, -85.8837920), 
    new google.maps.LatLng(41.2378323, -85.8066285) 
]; 

var deliveryLabels = [ 
    "1", 
    "2", 
    "3", 
    "4", 
    "28", 
    "29", 
    "30", 
    "31", 
    "32", 
    "33", 
    "34" 
]; 

var deliveryContent = [ 
    "Order 1", 
    "Order 2", 
    "Order 3", 
    "Order 4", 
    "Order 28", 
    "Order 29", 
    "Order 30", 
    "Order 31", 
    "Order 32", 
    "Order 33", 
    "Order 34" 
]; 

var markers = []; 
var iterator = 0; 

var storeimage = { 
    url: 'http://google.com/mapfiles/ms/micons/green-dot.png', 
    // This marker is 20 pixels wide by 32 pixels tall. 
    size: new google.maps.Size(24, 32), 
    // The origin for this image is 0,0. 
    origin: new google.maps.Point(0,0), 
    // The anchor for this image is the base at 0,32. 
    anchor: new google.maps.Point(12, 32) 
    }; 

var map; 

function initialize() { 
    var mapOptions = { 
    zoom: 13, 
    center: store 
    }; 

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

var marker = new MarkerWithLabel({ 
    map: map, 
    icon: storeimage, 
    position: store, 
    labelContent: "Store", 
    labelAnchor: new google.maps.Point(16, 39), 
    labelClass: "labels", 
    labelInBackground: false 
    }); 
    drop(); 
} 

function drop() { 
    for (var i = 0; i < deliveriePoints.length; i++) { 
    setTimeout(function() { 
     addMarker(); 
    }, i * 200); 
    } 
} 

//function addMarker() { 
// markers.push(new google.maps.Marker({ 
// position: deliveries[iterator], 
// map: map, 
// draggable: false, 
// animation: google.maps.Animation.DROP 
// })); 
// iterator++; 
//} 

function addMarker() { 
    markers.push(new MarkerWithLabel({ 
    map: map, 
    position: deliveriePoints[iterator], 
    labelContent: deliveryLabels[iterator], 
    labelAnchor: new google.maps.Point(16, 39), 
    labelClass: "labels", 
    labelInBackground: false 
    })); 
    iterator++; 
} 


// var marker = new MarkerWithLabel({ 
// map: map, 
// position: GeoCodeLocation, 
// labelContent: checkNumber, 
// labelAnchor: new google.maps.Point(16, 39), 
// labelClass: "labels", 
// labelInBackground: false 
// }); 




google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    </body> 
</html>

來源

2014-03-03 user2330216

您也可以將InfoWindow的內容存儲爲標記屬性。

當標記已被點擊信息窗口的內容屬性設置爲存儲的屬性：

function addMarker() { 
//create a single InfoWindow-instance for all markers 
if(!map.get('infoWin')){map.set('infoWin',new google.maps.InfoWindow());} 

    var marker=new MarkerWithLabel({ 
    map: map, 
    //store the content 
    infoWinContent:deliveryContent[iterator], 
    position: deliveriePoints[iterator], 
    labelContent: deliveryLabels[iterator], 
    labelAnchor: new google.maps.Point(16, 39), 
    labelClass: "labels", 
    labelInBackground: false 
    }); 
    markers.push(marker); 
    //observe the click 
    google.maps.event.addListener(marker,'click',function(){ 
    this.getMap().get('infoWin').setOptions({ 
     map:this.getMap(), 
     position:this.getPosition(), 
     //set the content 
     content:this.get('infoWinContent') 
    }) 
    }); 

    iterator++; 
}

來源

2014-03-03 22:10:43

將infowindows添加到帶標籤的標記，因爲它們被放置在地圖上？

回答

相關問題