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

查看：88
本文介绍了Google地图自定义控件始终显示在默认控件下方的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想为Google地图v3地图添加自定义地图控件。我的自定义控件是以下屏幕截图中灰色的位置图标。





问题是我需要自定义控件低于pan（'箭头'）控件，但是 pegman /街景控制。我试图设置索引= -3在我用于控制的div（请参阅


  • 第二个选项是创建一个自定义缩放控件，然后你可以控制顺序（我无法弄清楚如何访问预定义的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 chicago = new google.maps.LatLng（41.850033，-87.6500523） ; / ** * HomeControl向地图添加一个控件，该控件简单*将用户返回到芝加哥。这个构造函数将* DIV作为参数。 * @constructor * / function HomeControl（controlDiv，map）{//为包含控件的DIV设置CSS样式//将填充设置为5 px将偏移控件//从地图边缘控制controlDiv.style.padding =' 5像素'; //为控件边框设置CSS var controlUI = document.createElement（'div'）; controlUI.style.backgroundColor ='white'; controlUI.style.borderStyle ='solid'; controlUI.style.borderWidth ='2px'; controlUI.style.cursor ='指针'; controlUI.style.textAlign ='center'; controlUI.title ='点击将地图设置为首页'; controlDiv.appendChild（controlUI）; //为控件内部设置CSS 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>主页< / b>'; controlUI.appendChild（controlText）; //设置点击事件侦听器：只需将地图设置为// Chicago google.maps.event.addDomListener（controlUI，'click'，function（）{map.setCenter（chicago）}）;} function initialize（）{/ /创建DIV来保存控件并//在此DIV中调用传递//的HomeControl（）构造函数。 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];其他elem.setAttribute（道具，属性[道具]）; } 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;}）; // PanControl 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）;返回panContainer;} / ** @param {PanDirection}方向* / 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; < script src =https：//


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"></script>

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

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

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆