Javascript 自定义谷歌地图API V3缩放按钮

如何将google maps api（v3 javascript）缩放按钮自定义为我自己的图像。

这是不可能的。可以使用一组预定义的选项参数稍微调整它们的外观，也可以实现自定义贴图控件，该控件提供与缩放控件相同的功能。 有关更多信息，请参阅

---

更新：链接已修复。谢谢你的反馈

经过几个小时的搜索，我找到了解决方案 只需确保替换API ID即可！ 享受吧

html{高度：100%}
正文{高度：100%；边距：0；填充：0}
#地图画布{高度：60%；宽度：60%；边距：20px自动；边框：1px实体；左侧填充：100px；}
功能HomeControl（controlDiv、map）{
google.maps.event.addDomListener（zoomout，'click'，function（）{
var currentZoomLevel=map.getZoom（）；
如果（currentZoomLevel！=0）{
map.setZoom（currentZoomLevel-1）；}
});
google.maps.event.addDomListener（缩放，'单击'，函数（）{
var currentZoomLevel=map.getZoom（）；
如果（currentZoomLevel！=21）{
map.setZoom（currentZoomLevel+1）；}
});
}
var映射；
var-markersArray=[]；
函数初始化（）{
var mapDiv=document.getElementById（'map-canvas'）；
var mylatng=new google.maps.LatLng（-33.90224151.20215）；
变量映射选项={
缩放：15，
中心：myLatlng，
马克：是的，
泛控制：错误，
动物控制：错误，
街景控制：错误，
overviewMapControl:错误，
mapTypeControl:false，
mapTypeControl:false，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
map=新的google.maps.map（mapDiv，mapOptions）；
var marker=new google.maps.marker({
职位：myLatlng，
地图：地图，
标题：“你好，世界！”
});
//创建DIV以保存控件和
//调用HomeControl（）构造函数传递
//在这个部门。
var homeControlDiv=document.createElement（'div'）；
var homeControl=新的homeControl（homeControlDiv，map）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
把我缩小
放大我

我是用CSS的方式做的：

#map-container .gm-style > .gmnoprint > .gmnoprint { background: url(/images/map-zoom-controls.png) no-repeat center center !important; width: 42px !important; height: 68px !important; }
#map-container .gm-style > .gmnoprint > .gmnoprint > div > img { display: none !important; }
#map-container .gm-style > .gmnoprint > .gmnoprint div[title="Zoom in"] { top: 2px !important; left: 2px !important; width: 38px !important; height: 31px !important; }
#map-container .gm-style > .gmnoprint > .gmnoprint div[title="Zoom out"] { top: 35px !important; left: 2px !important; width: 38px !important; height: 30px !important; }

这适用于具有以下内容的图像： 宽度：42px； 高度：68px

做你自己的调整

注意

---

这仅适用于由于标题属性而使用英文版本的情况。

我在聚会上迟到了，但这是我的两分钱

您基本上有两种选择：

选项1:您可以自己使用HTML/CSS创建控件，然后使用绝对位置或类似方式将控件放置在地图上的正确位置。尽管这在生产环境中有效，但我不喜欢这样，因为您的元素HTML/CSS加载不会与地图显示同时进行。此外，您正在为控件分离HTML/CSS代码，因此很难在不同页面上重用相同的映射。e、 g.“我忘记添加控件了吗？”

选项2:您创建的具有您喜欢的缩放控制器的外观和感觉。下面是实践中关于这一点的代码

简而言之，您需要首先通过调用以下命令禁用普通UI控制器：

var mapOptions = {
    zoom: 12,
    center: chicago,
    /* Disabling default UI widgets */
    disableDefaultUI: true // <-- see this line
}

JavaScript:

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

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

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

/**
 * The ZoomControl adds +/- button for the map
 *
 */
function ZoomControl(controlDiv, map) {

  // Creating divs & styles for custom zoom control
  controlDiv.style.padding = '5px';

  // Set CSS for the control wrapper
  var controlWrapper = document.createElement('div');
  controlWrapper.style.backgroundColor = 'white';
  controlWrapper.style.borderStyle = 'solid';
  controlWrapper.style.borderColor = 'gray';
  controlWrapper.style.borderWidth = '1px';
  controlWrapper.style.cursor = 'pointer';
  controlWrapper.style.textAlign = 'center';
  controlWrapper.style.width = '32px'; 
  controlWrapper.style.height = '64px';
  controlDiv.appendChild(controlWrapper);

  // Set CSS for the zoomIn
  var zoomInButton = document.createElement('div');
  zoomInButton.style.width = '32px'; 
  zoomInButton.style.height = '32px';
  /* Change this to be the .png image you want to use */
  zoomInButton.style.backgroundImage = 'url("http://placehold.it/32/00ff00")';
  controlWrapper.appendChild(zoomInButton);

  // Set CSS for the zoomOut
  var zoomOutButton = document.createElement('div');
  zoomOutButton.style.width = '32px'; 
  zoomOutButton.style.height = '32px';
  /* Change this to be the .png image you want to use */
  zoomOutButton.style.backgroundImage = 'url("http://placehold.it/32/0000ff")';
  controlWrapper.appendChild(zoomOutButton);

  // Setup the click event listener - zoomIn
  google.maps.event.addDomListener(zoomInButton, 'click', function() {
    map.setZoom(map.getZoom() + 1);
  });

  // Setup the click event listener - zoomOut
  google.maps.event.addDomListener(zoomOutButton, 'click', function() {
    map.setZoom(map.getZoom() - 1);
  });  

}

function initialize() {
  var mapDiv = document.getElementById('map-canvas');

  var mapOptions = {
    zoom: 12,
    center: chicago,
    /* Disabling default UI widgets */
    disableDefaultUI: true
  }

  map = new google.maps.Map(mapDiv, mapOptions);

  // Create the DIV to hold the control and call the ZoomControl() constructor
  // passing in this DIV.
  var zoomControlDiv = document.createElement('div');
  var zoomControl = new ZoomControl(zoomControlDiv, map);

  zoomControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(zoomControlDiv);
}

initialize();

注意：此代码不包含任何花哨的图标和类似图标，只包含占位符。因此，您可能需要调整它以满足您的需要。此外，请记住为google maps api v3 javascript添加HTML5普通标记和脚本包含。我只添加了

，因为对身体其他部分的需求非常明显

现场观看：

---

干杯。

请修复您的链接或将相关说明发布到您的答案中。。他只是错过了“htm”结尾的“L”。很好！对我来说非常好！只要谷歌地图用户界面给出的结构保持不变，这就行了，你永远不应该依靠硬编码规则来实现你的目标。非常感谢你。这很有效，谢谢！一个小的改进是给缩放控件类命名，比如

controlWrapper.setAttribute（“class”，“custom zoom wrapper”）等。这意味着可以在css而不是js中添加样式，从而使代码更清晰，并允许媒体查询，即在更小的屏幕上添加更小的按钮。
var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);

/**
 * The ZoomControl adds +/- button for the map
 *
 */
function ZoomControl(controlDiv, map) {

  // Creating divs & styles for custom zoom control
  controlDiv.style.padding = '5px';

  // Set CSS for the control wrapper
  var controlWrapper = document.createElement('div');
  controlWrapper.style.backgroundColor = 'white';
  controlWrapper.style.borderStyle = 'solid';
  controlWrapper.style.borderColor = 'gray';
  controlWrapper.style.borderWidth = '1px';
  controlWrapper.style.cursor = 'pointer';
  controlWrapper.style.textAlign = 'center';
  controlWrapper.style.width = '32px'; 
  controlWrapper.style.height = '64px';
  controlDiv.appendChild(controlWrapper);

  // Set CSS for the zoomIn
  var zoomInButton = document.createElement('div');
  zoomInButton.style.width = '32px'; 
  zoomInButton.style.height = '32px';
  /* Change this to be the .png image you want to use */
  zoomInButton.style.backgroundImage = 'url("http://placehold.it/32/00ff00")';
  controlWrapper.appendChild(zoomInButton);

  // Set CSS for the zoomOut
  var zoomOutButton = document.createElement('div');
  zoomOutButton.style.width = '32px'; 
  zoomOutButton.style.height = '32px';
  /* Change this to be the .png image you want to use */
  zoomOutButton.style.backgroundImage = 'url("http://placehold.it/32/0000ff")';
  controlWrapper.appendChild(zoomOutButton);

  // Setup the click event listener - zoomIn
  google.maps.event.addDomListener(zoomInButton, 'click', function() {
    map.setZoom(map.getZoom() + 1);
  });

  // Setup the click event listener - zoomOut
  google.maps.event.addDomListener(zoomOutButton, 'click', function() {
    map.setZoom(map.getZoom() - 1);
  });  

}

function initialize() {
  var mapDiv = document.getElementById('map-canvas');

  var mapOptions = {
    zoom: 12,
    center: chicago,
    /* Disabling default UI widgets */
    disableDefaultUI: true
  }

  map = new google.maps.Map(mapDiv, mapOptions);

  // Create the DIV to hold the control and call the ZoomControl() constructor
  // passing in this DIV.
  var zoomControlDiv = document.createElement('div');
  var zoomControl = new ZoomControl(zoomControlDiv, map);

  zoomControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(zoomControlDiv);
}

initialize();