Google地圖自定義控件總是出現在默認控件下方

Question

我想將自定義地圖控件添加到Google Maps v3地圖。我的自定義控件是下面屏幕截圖中灰色的「位置」圖標。

的問題是，我需要的定製控制成爲鍋下面（「箭頭」）的控制，但以上衣夾人/街景控制。我試圖設置「索引= -3」在我用於控制的div（見v3 custom control positioning docs），沒有運氣。

wrapperDiv = document.createElement('div'); 
/* Some code appends an image to wrapperDiv in my actual code */ 
wrapperDiv.index = -3; 
map.controls[google.maps.ControlPosition.LEFT_TOP].push(wrapperDiv); 

任何想法？

更新 - 解決方案發現

使用，答案由geocodezip提供，我的自定義控件現在平移控制和街景小人控件之間：

大多數控件現在據我所知，似乎還沒有辦法解決這個問題。

後續問題

現在，我的自定義控件是在正確的地方，有沒有一種方法，使中心的平移控制下衣夾和縮放控件，就像他們在第一張截圖？

Answer 1

• 一個想法/選項（不是最優的，但有你想要的）。

  1. 將平移控制置於TOP_LEFT控件位置。
  2. 將在索引-1定製控制（前的所有正常對照）在LEFT_TOP

var mapOptions = { 
    zoom: 12, 
    center: chicago, 
    disableDefaultUI: true, 
    mapTypeControl: true, 
    mapTypeControlOptions: { 
     style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, 
     position: google.maps.ControlPosition.RIGHT_TOP 
    }, 
    scaleControl: true, 
    panControl: true, 
    panControlOptions: { 
     position: google.maps.ControlPosition.TOP_LEFT 
    }, 
    streetViewControl: true, 
    streetViewControlOptions: { 
     position: google.maps.ControlPosition.LEFT_TOP 
    }, 
    zoomControl: true, 
    zoomControlOptions: { 
     position: google.maps.ControlPosition.LEFT_TOP 
    } 
    } 

    map = new google.maps.Map(mapDiv, mapOptions); 
    var homeControl = new HomeControl(homeControlDiv, map); 

    map.controls[google.maps.ControlPosition.LEFT_TOP].push(homeControlDiv); 

example

• 第二個選擇，將創建一個自定義的縮放控件，然後你可以控制順序（我無法弄清楚如何訪問預定義ned Google地圖控件，僅用於將自定義控件放在它們之前或之後）。

example custom zoom/pan control從與代碼this question on SO

var PanControl = new geocodezip.web.PanControl(map); 
    PanControl.index = -2; 
    var homeControl = new HomeControl(homeControlDiv, map); 
    homeControlDiv.index = -1; 
    map.controls[google.maps.ControlPosition.LEFT_TOP].push(PanControl); 
    map.controls[google.maps.ControlPosition.LEFT_TOP].push(homeControlDiv); 

Example with a modified ZoomPanControl (just the pan control)

代碼段從上面的例子：

var map = null; 
 
var chicago = new google.maps.LatLng(41.850033, -87.6500523); 
 

 
/** 
 
* The HomeControl adds a control to the map that simply 
 
* returns the user to Chicago. This constructor takes 
 
* the control DIV as an argument. 
 
* @constructor 
 
*/ 
 
function HomeControl(controlDiv, map) { 
 

 
    // Set CSS styles for the DIV containing the control 
 
    // Setting padding to 5 px will offset the control 
 
    // from the edge of the map 
 
    controlDiv.style.padding = '5px'; 
 

 
    // Set CSS for the control border 
 
    var controlUI = document.createElement('div'); 
 
    controlUI.style.backgroundColor = 'white'; 
 
    controlUI.style.borderStyle = 'solid'; 
 
    controlUI.style.borderWidth = '2px'; 
 
    controlUI.style.cursor = 'pointer'; 
 
    controlUI.style.textAlign = 'center'; 
 
    controlUI.title = 'Click to set the map to Home'; 
 
    controlDiv.appendChild(controlUI); 
 

 
    // Set CSS for the control interior 
 
    var controlText = document.createElement('div'); 
 
    controlText.style.fontFamily = 'Arial,sans-serif'; 
 
    controlText.style.fontSize = '12px'; 
 
    controlText.style.paddingLeft = '4px'; 
 
    controlText.style.paddingRight = '4px'; 
 
    controlText.innerHTML = '<b>Home</b>'; 
 
    controlUI.appendChild(controlText); 
 

 
    // Setup the click event listeners: simply set the map to 
 
    // Chicago 
 
    google.maps.event.addDomListener(controlUI, 'click', function() { 
 
    map.setCenter(chicago) 
 
    }); 
 

 
} 
 

 
function initialize() { 
 
    // Create the DIV to hold the control and 
 
    // call the HomeControl() constructor passing 
 
    // in this DIV. 
 
    var homeControlDiv = document.createElement('div'); 
 

 

 
    var mapDiv = document.getElementById('map-canvas'); 
 
    var mapOptions = { 
 
    zoom: 12, 
 
    center: chicago, 
 
    disableDefaultUI: true, 
 
    mapTypeControl: true, 
 
    mapTypeControlOptions: { 
 
     style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, 
 
     position: google.maps.ControlPosition.RIGHT_TOP 
 
    }, 
 
    scaleControl: true, 
 
    panControl: false, 
 
    streetViewControl: true, 
 
    streetViewControlOptions: { 
 
     position: google.maps.ControlPosition.LEFT_TOP 
 
    }, 
 
    zoomControl: true, 
 
    zoomControlOptions: { 
 
     position: google.maps.ControlPosition.LEFT_TOP 
 
    } 
 
    } 
 

 
    map = new google.maps.Map(mapDiv, mapOptions); 
 
    var PanControl = new geocodezip.web.PanControl(map); 
 
    PanControl.index = -2; 
 
    var homeControl = new HomeControl(homeControlDiv, map); 
 
    homeControlDiv.index = -1; 
 
    map.controls[google.maps.ControlPosition.LEFT_TOP].push(PanControl); 
 
    map.controls[google.maps.ControlPosition.LEFT_TOP].push(homeControlDiv); 
 

 
} 
 

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

 
/** 
 
* @param {string} tagName 
 
* @param {Object.<string, string>} properties 
 
* @returns {Node} 
 
*/ 
 
function CreateElement(tagName, properties) { 
 
    var elem = document.createElement(tagName); 
 
    for (var prop in properties) { 
 
    if (prop == "style") 
 
     elem.style.cssText = properties[prop]; 
 
    else if (prop == "class") 
 
     elem.className = properties[prop]; 
 
    else 
 
     elem.setAttribute(prop, properties[prop]); 
 
    } 
 
    return elem; 
 
} 
 

 
/** 
 
* @constructor 
 
* @param {google.maps.Map} map 
 
*/ 
 
function PanControl(map) { 
 
    this.map = map; 
 
    this.originalCenter = map.getCenter(); 
 

 
    var t = this; 
 
    var panContainer = CreateElement("div", { 
 
    'style': "position: relative; padding: 5px;" 
 
    }); 
 

 
    //Pan Controls 
 
    var PanContainer = CreateElement("div", { 
 
    'style': "position: relative; left: 2px; top: 5px; width: 56px; height: 56px; padding: 5px; overflow: hidden;" 
 
    }); 
 
    panContainer.appendChild(PanContainer); 
 
    var div = CreateElement("div", { 
 
    'style': "width: 56px; height: 56px; overflow: hidden;" 
 
    }); 
 
    div.appendChild(CreateElement("img", { 
 
    'alt': ' ', 
 
    'src': 'http://maps.gstatic.com/intl/en_ALL/mapfiles/mapcontrols3d5.png', 
 
    'style': "position: absolute; left: 0px; top: -1px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 59px; height: 492px;" 
 
    })); 
 
    PanContainer.appendChild(div); 
 

 
    div = CreateElement("div", { 
 
    'style': "position: absolute; left: 0px; top: 19px; width: 18.6667px; height: 18.6667px; cursor: pointer;", 
 
    'title': 'Pan left' 
 
    }); 
 
    google.maps.event.addDomListener(div, "click", function() { 
 
    t.pan(PanDirection.LEFT); 
 
    }); 
 
    PanContainer.appendChild(div); 
 
    div = CreateElement("div", { 
 
    'style': "position: absolute; left: 37px; top: 19px; width: 18.6667px; height: 18.6667px; cursor: pointer;", 
 
    'title': 'Pan right' 
 
    }); 
 
    google.maps.event.addDomListener(div, "click", function() { 
 
    t.pan(PanDirection.RIGHT); 
 
    }); 
 
    PanContainer.appendChild(div); 
 
    div = CreateElement("div", { 
 
    'style': "position: absolute; left: 19px; top: 0px; width: 18.6667px; height: 18.6667px; cursor: pointer;", 
 
    'title': 'Pan up' 
 
    }); 
 
    google.maps.event.addDomListener(div, "click", function() { 
 
    t.pan(PanDirection.UP); 
 
    }); 
 
    PanContainer.appendChild(div); 
 
    div = CreateElement("div", { 
 
    'style': "position: absolute; left: 19px; top: 37px; width: 18.6667px; height: 18.6667px; cursor: pointer;", 
 
    'title': 'Pan down' 
 
    }); 
 
    google.maps.event.addDomListener(div, "click", function() { 
 
    t.pan(PanDirection.DOWN); 
 
    }); 
 
    PanContainer.appendChild(div); 
 
    div = CreateElement("div", { 
 
    'style': "position: absolute; left: 19px; top: 19px; width: 18.6667px; height: 18.6667px; cursor: pointer;", 
 
    'title': 'Reset center' 
 
    }); 
 
    google.maps.event.addDomListener(div, "click", function() { 
 
    t.map.setCenter(t.originalCenter); 
 
    }); 
 
    PanContainer.appendChild(div); 
 

 
    return panContainer; 
 
} 
 

 
/** @param {PanDirection} direction */ 
 
PanControl.prototype.pan = function(direction) { 
 
    var panDistance = 50; 
 
    if (direction == PanDirection.UP || direction == PanDirection.DOWN) { 
 
    panDistance = Math.round(this.map.getDiv().offsetHeight/2); 
 
    this.map.panBy(0, direction == PanDirection.DOWN ? panDistance : -1 * panDistance); 
 
    } else { 
 
    panDistance = Math.round(this.map.getDiv().offsetWidth/2); 
 
    this.map.panBy(direction == PanDirection.RIGHT ? panDistance : -1 * panDistance, 0); 
 
    } 
 
} 
 

 
/** @enum */ 
 
var PanDirection = { 
 
    LEFT: 0, 
 
    RIGHT: 1, 
 
    UP: 3, 
 
    DOWN: 4 
 
} 
 

 
window["geocodezip"] = window["geocodezip"] || {}; 
 
window["geocodezip"]["web"] = window["geocodezip"]["web"] || {}; 
 
window["geocodezip"]["web"]["PanControl"] = PanControl;

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 

 
<div id="map-canvas"></div>