自定义谷歌地图API V3 PEGMAN按钮

Custom Google Map API V3 PEGMAN Button

本文关键字：PEGMAN 按钮 V3 API 谷歌地图 自定义      更新时间：2023-09-26

我制作了自定义缩放控件，并希望添加具有相同样式的 Pegman 控件。可能吗？

自定义缩放控件添加如下（来自此问题答案）：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 60%; width:60%; margin:20px auto; border:1px solid; padding-left:100px; }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=YOUR-MAP_API-ID&sensor=false&region=AU">
    </script>

<script type="text/javascript">
function HomeControl(controlDiv, map) {
 google.maps.event.addDomListener(zoomout, 'click', function() {
   var currentZoomLevel = map.getZoom();
   if(currentZoomLevel != 0){
     map.setZoom(currentZoomLevel - 1);}     
  });
   google.maps.event.addDomListener(zoomin, 'click', function() {
   var currentZoomLevel = map.getZoom();
   if(currentZoomLevel != 21){
     map.setZoom(currentZoomLevel + 1);}
  });
}
var map;
var markersArray = [];

function initialize() {
  var mapDiv = document.getElementById('map-canvas');
  var myLatlng = new google.maps.LatLng(-33.90224, 151.20215);
  var mapOptions = {
    zoom: 15,
    center: myLatlng,
    Marker: true,
    panControl: false,
    zoomControl: false,
    streetViewControl: false,
    overviewMapControl: false,
     mapTypeControl: false,
     mapTypeControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(mapDiv, mapOptions);
  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title:"Hello World!"
  });
  // Create the DIV to hold the control and
  // call the HomeControl() constructor passing
  // in this DIV.
  var homeControlDiv = document.createElement('div');
  var homeControl = new HomeControl(homeControlDiv, map);
}
google.maps.event.addDomListener(window, 'load', initialize);    
</script>
</head>


  <body>
    <div id="map-canvas"></div>
    <div id="zoomout" style="border:1px solid; width:150px; heoght:50px; cursor:pointer; margin-bottom:20px;">ZOOM ME OUT</div>
    <div id="zoomin" style="border:1px solid; width:150px; heoght:50px;cursor:pointer;">ZOOM ME IN</div>
  </body>
</html>
是否可以使用自定义 Pegman 按钮在

正文中添加一个div元素，但它需要完全按照默认按钮的工作方式工作（将黄色人拖放到地图上，Pegman 在悬停时移动等）只有他身后的方形按钮将是另一种样式。

当你只想设置按钮的样式，而不是 pegman 时，这很容易。

该按钮具有类gm-svpc，只需添加您的样式即可。

function initialize() {
  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 14,
    center: new google.maps.LatLng(52.5498783, 13.425209099999961),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
    streetViewControl: true
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
  margin: 0;
  padding: 0;
  height: 100%;
}
.gm-svpc {
  background: tomato !important;
  border: 2px solid firebrick;
  border-radius: 20px !important;
}
<div id="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>

相关文章：