Google 地图自定义控件始终显示在默认控件下方 [英] Google maps custom control always appears below the default controls

问题描述

我想向 Google Maps v3 地图添加自定义地图控件.我的自定义控件是下面屏幕截图中灰显的位置"图标.

问题是我需要自定义控件位于平移('箭头')控件下方，但 上方 街景小人/街景控件.我尝试在用于控件的 div 上设置index = -3"(请参阅​​

• 第二种选择是创建自定义缩放控件，然后您可以控制顺序(我不知道如何访问预定义的 Google 地图控件，只能将自定义控件放在之前或在他们之后).

示例自定义缩放/平移控件来自 关于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);

修改后的 ZoomPanControl 示例(只是平移控件)

上面例子中的代码片段:

var map = null;var 芝加哥 = 新 google.maps.LatLng(41.850033, -87.6500523);/*** HomeControl 向地图添加了一个控件，只需* 将用户返回到芝加哥.这个构造函数需要* 控制 DIV 作为参数.* @构造函数*/功能 HomeControl(controlDiv，地图){//为包含控件的 DIV 设置 CSS 样式//将 padding 设置为 5 px 将偏移控件//从地图的边缘controlDiv.style.padding = '5px';//为控件边框设置 CSSvar controlUI = document.createElement('div');controlUI.style.backgroundColor = '白色';controlUI.style.borderStyle = 'solid';controlUI.style.borderWidth = '2px';controlUI.style.cursor = '指针';controlUI.style.textAlign = 'center';controlUI.title = '点击将地图设置为首页';controlDiv.appendChild(controlUI);//为控件内部设置 CSSvar controlText = document.createElement('div');controlText.style.fontFamily = 'Arial,sans-serif';controlText.style.fontSize = '12px';controlText.style.paddingLeft = '4px';controlText.style.paddingRight = '4px';controlText.innerHTML = '首页';controlUI.appendChild(controlText);//设置点击事件监听器:只需将地图设置为//芝加哥google.maps.event.addDomListener(controlUI, 'click', function() {map.setCenter(芝加哥)});}函数初始化(){//创建 DIV 来保存控件和//调用 HomeControl() 构造函数传递//在这个 DIV 中.var homeControlDiv = document.createElement('div');var mapDiv = document.getElementById('map-canvas');var mapOptions = {缩放:12，中心:芝加哥，disableDefaultUI:真，地图类型控制:真，地图类型控制选项:{样式:google.maps.MapTypeControlStyle.HORIZONTAL_BAR，位置:google.maps.ControlPosition.RIGHT_TOP},规模控制:真，泛控制:假，街景控制:真，街景控制选项:{位置:google.maps.ControlPosition.LEFT_TOP},缩放控制:真，缩放控制选项:{位置: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} 标签名* @param {Object.} 属性* @returns {节点}*/函数创建元素(标签名称，属性){var elem = document.createElement(tagName);for(属性中的var prop){如果(道具==风格")elem.style.cssText = 属性[prop];否则如果(道具==类")elem.className = 属性[prop];别的elem.setAttribute(prop, properties[prop]);}返回元素；}/*** @构造函数* @param {google.maps.Map} 地图*/功能 PanControl(地图){this.map = 地图;this.originalCenter = map.getCenter();var t = 这个；var panContainer = CreateElement("div", {'style': "位置:相对；填充:5px；"});//平移控件var PanContainer = CreateElement("div", {'style': "位置:相对；左:2px；顶部:5px；宽度:56px；高度:56px；填充:5px；溢出:隐藏；"});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',样式":位置:绝对；左:0px；顶部:-1px；-moz-user-select:无；边框:0px 无；填充:0px；边距:0px；宽度:59px；高度:492px；"}));PanContainer.appendChild(div);div = CreateElement("div", {'style': "位置:绝对；左:0px；顶部:19px；宽度:18.6667px；高度:18.6667px；光标:指针；",'title': '向左平移'});google.maps.event.addDomListener(div，点击"，函数(){t.pan(PanDirection.LEFT);});PanContainer.appendChild(div);div = CreateElement("div", {'style': "位置:绝对；左:37px；顶部:19px；宽度:18.6667px；高度:18.6667px；光标:指针；",'title': '向右平移'});google.maps.event.addDomListener(div，点击"，函数(){t.pan(PanDirection.RIGHT);});PanContainer.appendChild(div);div = CreateElement("div", {'style': "位置:绝对；左:19px；顶部:0px；宽度:18.6667px；高度:18.6667px；光标:指针；",'title': '向上平移'});google.maps.event.addDomListener(div，点击"，函数(){t.pan(PanDirection.UP);});PanContainer.appendChild(div);div = CreateElement("div", {'style': "位置:绝对；左:19px；顶部:37px；宽度:18.6667px；高度:18.6667px；光标:指针；",'title': '向下平移'});google.maps.event.addDomListener(div，点击"，函数(){t.pan(PanDirection.DOWN);});PanContainer.appendChild(div);div = CreateElement("div", {'style': "位置:绝对；左:19px；顶部:19px；宽度:18.6667px；高度:18.6667px；光标:指针；",'title': '重置中心'});google.maps.event.addDomListener(div，点击"，函数(){t.map.setCenter(t.originalCenter);});PanContainer.appendChild(div);返回 panContainer;}/** @param {PanDirection} 方向 */PanControl.prototype.pan = 函数(方向){var panDistance = 50;如果(方向 == PanDirection.UP || 方向 == PanDirection.DOWN){panDistance = Math.round(this.map.getDiv().offsetHeight/2);this.map.panBy(0, direction == PanDirection.DOWN ? panDistance : -1 * panDistance);} 别的 {panDistance = Math.round(this.map.getDiv().offsetWidth/2);this.map.panBy(direction == PanDirection.RIGHT ? panDistance : -1 * panDistance, 0);}}/** @enum */var PanDirection = {左:0，正确:1，向上:3，下降:4}window["geocodezip"] = window["geocodezip"] ||{};window["geocodezip"]["web"] = window["geocodezip"]["web"] ||{};window["geocodezip"]["web"]["PanControl"] = PanControl;

html,身体，#地图画布{高度:100%；边距:0px；填充:0px}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></脚本><div id="map-canvas"></div>

I'd like to add a custom map control to a Google Maps v3 map. My custom control is the grayed-out 'location' icon in the screenshot below.

The problem is that I need the custom control to be below the pan ('arrows') control, but above the pegman / street view control. I have tried setting "index = -3" on the div I'm using for the control (see the v3 custom control positioning docs), with no luck.

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 );

Any ideas?

Update - solution found

Using the answer, provided by geocodezip, my custom control is now between the pan control and pegman control:

Most of the controls are now further over to the left than normal, but there doesn't seem to be a way to work around that, as far as I can tell.

Follow-up question

Now that my custom control is in the right place, is there a way to make the pegman and zoom controls centered below the pan control, like they are in the first screenshot?

解决方案

• One idea/option (not optimal but does sort of what you want).

1. Put the pan control in the TOP_LEFT controls position.
2. Put the custom control at index -1 (before all the normal controls) in 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

• A second option, would be to create a custom zoom control, then you can control the order (I couldn't figure out how to access the pre-defined Google Maps controls, only to put the custom control(s) before or after them).

example custom zoom/pan control from 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)

code snippet with code from above example:

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

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

这篇关于Google 地图自定义控件始终显示在默认控件下方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！