Google Maps API v3 - 可點擊文本以放大標記並打開infoWindow

我正在使用帶有127個標記的地圖標記集羣的項目。我需要幫助的是當訪問者點擊標記列表中的文本鏈接時打開infoWindow。目前，單擊文本可縮放標記，但不會同時打開infoWindow。點擊標記打開infoWindow。我在代碼中添加了一條評論，指出正在生成標記列表的位置。評論是//可點擊標記的文本列表。Google Maps API v3 - 可點擊文本以放大標記並打開infoWindow

不幸的是，該網站正在開發中，並且不公開顯示。讓我知道是否有任何其他信息可以幫助你。提前致謝。

var globalMarker = []; 
var map; 

function initialize() { 
    var center = new google.maps.LatLng(35.4214, -15.6919); 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
     zoom: 1, 
     center: center, 
     disableDoubleClickZoom: true, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    var markers = []; 
    var infowindow = new google.maps.InfoWindow(); 
    for (i = 0; i < 127; i++) { 
     var dataChapters = data.chapters[i]; 
     var latLng = new google.maps.LatLng(dataChapters.latitude, dataChapters.longitude); 
     marker = new MarkerWithLabel({ 
      position: latLng, 
      draggable: true, 
      raiseOnDrag: true, 
      map: map, 
      labelContent: "<strong>" + dataChapters.name + "<\/strong>" + "<br />" + dataChapters.description + "<br /><br />", // label for cluster view. 
      labelAnchor: new google.maps.Point(30, 0), 
      labelVisible: false, 
      labelClass: "labels", // the CSS class for the label 
      labelStyle: { 
       opacity: 0.75 
      } 
     }); 
     markers.push(marker); 
// text list of clickable markers 
     makeDiv(i, 15, dataChapters.rank + ")&nbsp;" + "<span class=\"chapterlink\">" + dataChapters.name + "<\/span>" + "<br />"); 
     google.maps.event.addListener(markers[i], 'click', function (e) { 
      infowindow.setContent(this.labelContent); // label for pin. 
      infowindow.open(map, this); 
     }); 
    } 
    var clusterOptions = { 
     zoomOnClick: true 
    }; 
    var markerCluster = new MarkerClusterer(map, markers, clusterOptions); 
    globalMarker = markers.slice(); 
    google.maps.event.addListener(markerCluster, 'clusterclick', function (cluster) { 
     var content = ''; 
     // Convert lat/long from cluster object to a usable MVCObject 
     var info = new google.maps.MVCObject; 
     info.set('position', cluster.center_); 
     //---- 
     //Get markers 
     var markers = cluster.getMarkers(); 
     var titles = ""; 
     //Get all the titles 
     for (var i = 0; i < markers.length; i++) { 
      titles += markers[i].labelContent + "\n"; 
     } 
     //--- 
     infowindow.close(); 
     infowindow.setContent(titles); //set infowindow content to titles 
     infowindow.open(map, info); 
     google.maps.event.addListener(map, 'zoom_changed', function() { 
      infowindow.close(); 
     }); 
    }); 
} 

function makeDiv(index, zoomLevel, content) { 
    document.getElementById("sidebar").innerHTML += '<div class="child" onclick="zoomIn(' + index + ',' + zoomLevel + ')">' + content + ' </div>'; 
} 

function zoomIn(index, zoomLevel) { 
    map.setCenter(globalMarker[index].getPosition()); 
    map.setZoom(zoomLevel); 
} 

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

來源

2013-08-27 Israel Isassi

什麼是你的「數據」是什麼樣子？運行代碼需要什麼HTML？ – geocodezip

[以下是帶側邊欄的MarkerClusterer示例]（http://www.geocodezip.com/v3_MW_example_map3_clustered.html） – geocodezip

數據是Google Spreadsheet的JSON輸出。我使用http://snipplr.com/view/69810/的腳本樣本作爲起點，但做了一些格式修改。 –

嘗試將此添加到zoomIn()：

google.maps.event.trigger(globalMarker[index],'click');

來源

2013-08-27 22:11:47

這工作完美！非常感謝你的幫助。 –

Google Maps API v3 - 可點擊文本以放大標記並打開infoWindow

回答

相關問題