Google Maps Javascript定位控制地图 [英] Google Maps Javascript positioning control maps

问题描述

如何将zoomControl选项和panControl定位放在一起？
感谢相关方面。

  map = new google.maps.Map（mapDiv，{
 center ：new google.maps.LatLng（39.300299,34.471664），
 zoom：6，
 disableDefaultUI：true，
 mapTypeControl：true，
 // mapTypeControlOptions：{style：google。 maps.MapTypeControlStyle.DROPDOWN_MENU，position：google.maps.ControlPosition.RIGHT_TOP}，
 mapTypeControlOptions：{style：google.maps.MapTypeControlStyle.DROPDOWN_MENU，position：google.maps.ControlPosition.LEFT_TOP}，
 mapTypeId ：google.maps.MapTypeId.TERRAIN，
 panControl：true，
 panControlOptions：{position：google.maps.ControlPosition.LEFT_TOP}，
 zoomControl：true，
 zoomControlOptions：{ style：google.maps.ZoomControlStyle.BIG，position：google.maps.ControlPosition.LEFT_TOP}，
 scaleControl：true，
}）; 
  

解决方案

一个选项（使用这个问题）：

function initialize（）{var mapDiv = document.getElementById（'map_canvas'）; var map = new google.maps.Map（mapDiv，{center：new google.maps.LatLng（39.300299，34.471664），zoom：6，disableDefaultUI：true，mapTypeControl：true，// mapTypeControlOptions：{style：google.maps。 MapTypeControlStyle.DROPDOWN_MENU，position：google.maps.ControlPosition.RIGHT_TOP}，mapTypeControlOptions：{style：google.maps.MapTypeControlStyle.DROPDOWN_MENU，position：google.maps.ControlPosition.LEFT_TOP}，mapTypeId：google.maps.MapTypeId.TERRAIN，zoomControl ：true，zoomControlOptions：{position：google.maps.ControlPosition.TOP_LEFT / *，index：-1 * /}，scaleControl：true，streetViewControl：false}）; var PanControl = new geocodezip.web.PanControl（map）; PanControl.index = 1; map.controls [google.maps.ControlPosition.TOP_LEFT] .push（PanControl）;} 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：500px;宽度：500px; margin：0px; < script src =https：//   

How can I position zoomControl options and panControl positioning next to each other? Thanks in regards..

map = new google.maps.Map(mapDiv, {
        center: new google.maps.LatLng(39.300299, 34.471664),
        zoom: 6,
        disableDefaultUI: true,
        mapTypeControl: true,
        //mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, position: google.maps.ControlPosition.RIGHT_TOP },
        mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, position: google.maps.ControlPosition.LEFT_TOP },
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        panControl: true,
        panControlOptions: { position: google.maps.ControlPosition.LEFT_TOP},
        zoomControl: true,
        zoomControlOptions: { style: google.maps.ZoomControlStyle.BIG, position: google.maps.ControlPosition.LEFT_TOP },
        scaleControl: true,
    });

解决方案

One option (use the custom pan control from this question):

function initialize() {
  var mapDiv = document.getElementById('map_canvas');
  var map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(39.300299, 34.471664),
    zoom: 6,
    disableDefaultUI: true,
    mapTypeControl: true,
    //mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, position: google.maps.ControlPosition.RIGHT_TOP },
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      position: google.maps.ControlPosition.LEFT_TOP
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    zoomControl: true,
    zoomControlOptions: {
      position: google.maps.ControlPosition.TOP_LEFT
        /*,
                index: -1 */
    },
    scaleControl: true,
    streetViewControl: false
  });
  var PanControl = new geocodezip.web.PanControl(map);
  PanControl.index = 1;
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(PanControl);

}
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: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src=""></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>

这篇关于Google Maps Javascript定位控制地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！