InfowWindow中的迷你地圖，用於指引路線

我在Google Map v3中工作（實際上是將V2遷移到V3），並嘗試自定義定向服務的Infowindow。我可以使用Origin，Destination和航點顯示方向。我的地圖用標記正確顯示了路線（帶有A，B，C ...文本的綠色標記）。默認情況下，點擊標記infowindow將顯示該標記的地址。我想定製它，因此點擊標記時，它應該顯示更多縮放的Infowindow中該位置的迷你地圖。我能夠做一些進步，但這裏的問題是， - 標記更改爲紅色指示標記而不是綠色標記（與A，B，C ...文本） - 無論我點擊標記，infowindow將打開最後一個標記 - 一旦標記被點擊，它將顯示小地圖，但在關閉並再次點擊該標記時，它將顯示地址（默認行爲） - 我的代碼實際上是用紅色尖頭標記覆蓋綠色標記InfowWindow中的迷你地圖，用於指引路線

能soboby幫助我如何解決這些問題下面是我的代碼：

 function CreateDirection (arrWaypoints) { 
      if (!this.directions) { 
       this.directions = new google.maps.DirectionsService(); 

       var origin = arrWaypoints[0]; 
       var destination = arrWaypoints[arrWaypoints.length - 1]; 

       var tripWaypoints = []; 

       for (var i = 1; i < arrWaypoints.length - 1; i++) { 
        tripWaypoints.push({ 
         location: new google.maps.LatLng(arrWaypoints[i].hb,  arrWaypoints[i].ib), 
         stopover: true 
        }); 
       } 

       var myMap = MyMap.getMap(); 
       var steps = []; 

       this.directions.route({ 
        origin: origin, 
        destination: destination, 
        waypoints: tripWaypoints, 
        travelMode: google.maps.DirectionsTravelMode.DRIVING, 
        unitSystem: google.maps.DirectionsUnitSystem.METRIC 
       }, function(result, status) { 
        if (status == google.maps.DirectionsStatus.OK) { 
         directionsDisplay = new google.maps.DirectionsRenderer(); 

// directionDiv div element in my page       

directionsDisplay.setPanel(document.getElementById("directionDiv")); 
         directionsDisplay.setMap(myMap); 
         directionsDisplay.setDirections(result); 
        } 
       }); 
      } 
     } 

     function CreateMiniMapInfoWindow (wayPointsArray) { 
      for (var i = 0; i < wayPointsArray.length; i++) { 
       var myMap = MyMap.getMap(); 
       var marker = new google.maps.Marker({ 
        position: wayPointsArray[i], 
        map: myMap 
       }); 

       google.maps.event.addListener(marker, 'click', function() { 

       var myOptionsMini = { 
        zoom: 14, 
        center: wayPointsArray[i], 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       } 

       var infowindow = new google.maps.InfoWindow(); 
        var minimap = new google.maps.Map(document.getElementById ("minimap"), myOptionsMini); 

        document.getElementById("minimap").style.display = 'block'; 
        minimap.setCenter(marker.getPosition()); 
        var minimapDiv = document.getElementById("minimap"); 
        infowindow.setContent(minimapDiv); 
        infowindow.open(myMap, marker); 
       }); 
      } 
     }

我需要的解決方案： - 如何獲取信息窗口定製（與小地圖）的所有標記 - 如何把綠色標記文本A，B，C ... enter image description here 附加的圖像是什麼我得到從上面的代碼我希望我的問題很清楚。如果有人有任何輸入，請讓我知道。

感謝，沙拉斯

來源

2013-05-10 Sharath

將以下對象作爲參數傳遞給的DirectionsRenderer：

{markerOptions:{clickable:false,zIndex:1000}}

這將有2個作用：

自定義標記將被放在後面的由DirectionsRenderer創建的A，B，C標記（目前它們仍然存在，但位於自定義標記之後）
DirectionsRenderer創建的標記不可點擊，底層的自定義標記能夠接收點擊。

另一種選擇（我寧願它）：設置的DirectionsRenderer到真正的suppressMarkers - 選項，並使用A，B，爲您的自定義標記C-標誌物（如https://maps.gstatic.com/mapfiles/markers2/marker_greenA.png，https://maps.gstatic.com/mapfiles/markers2/marker_greenB.png）

與infoWindow相關：所有你需要的是1 infoWindow與所有標記1地圖。觀察標記的點擊事件發生時打開信息窗口和中心標記的位置信息窗口裏面的地圖（可點擊回調內部通過this.getPosition()檢索）

注：，而不是使用您的預定義的航點，您最好解析directionsService返回的路線，以將自定義標記放置在確切位置（這些可能與您預定義的航點不同）

來源

2013-05-11 02:24:40

InfowWindow中的迷你地圖，用於指引路線

回答

相關問題