Google 地图 - 地图上的多个自定义按钮

Question

我已经创建了两个 CustomControls，但是，第一个的设置在第二个按钮上是重复的。我敢肯定这个错误是新手犯的。我能找到的大多数示例都只显示一个按钮，或者它们正在向标记添加控件。任何指导将不胜感激！

<html>
  <head>
    <title>Current Location</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">   
  </head>
  <body onload= "start()">
  <script>   
   function CustomControl(controlDiv, map, deviceID) {
       // Set CSS for the control border
       var controlUI = document.createElement('div');
       //controlUI.style.backgroundColor = '#f00c0c';
       controlUI.style.backgroundColor = '#ffffff';
       controlUI.style.borderStyle = 'solid';
       controlUI.style.borderWidth = '1px';
       controlUI.style.borderColor = '#ccc';
       controlUI.style.borderRadius = "23px";
       controlUI.style.height = '33px';
       controlUI.style.marginTop = '5px';
       controlUI.style.marginLeft = '-6px';
       controlUI.style.paddingTop = '1px';
       controlUI.style.cursor = 'pointer';
       controlUI.style.textAlign = 'center';
       controlUI.title = 'Click to change settings';
       controlDiv.appendChild(controlUI);

       // Set CSS for the control interior
       var controlText = document.createElement('div');
       controlText.style.fontFamily = 'sans-serif';
       controlText.style.fontSize = '10px';
       controlText.style.paddingLeft = '4px';
       controlText.style.paddingRight = '8px';
       controlText.style.marginTop = '10px';
       controlText.innerHTML = 'Settings';
       controlUI.appendChild(controlText);

       // Setup the click event listeners
       google.maps.event.addDomListener(controlUI, 'click', function () {
          url = "http://excite.bounceme.net/profile.html;
           window.location = url;
       });
   }

   function CustomControl1(controlDiv, map, deviceID) {
       // Set CSS for the control border
       var controlUI1 = document.createElement('empty');
       //controlUI1.style.backgroundColor = '#f00c0c';
       controlUI1.style.backgroundColor = '#ffffff';
       controlUI1.style.borderStyle = 'solid';
       controlUI1.style.borderWidth = '1px';
       controlUI1.style.borderColor = '#ccc';
       controlUI1.style.borderRadius = "23px";
       controlUI1.style.height = '33px';
       controlUI1.style.marginTop = '5px';
       controlUI1.style.marginLeft = '-6px';
       controlUI1.style.paddingTop = '1px';
       controlUI1.style.cursor = 'pointer';
       controlUI1.style.textAlign = 'center';
       controlUI1.title = 'Click to plot course';
       controlDiv.appendChild(controlUI1);

       // Set CSS for the control interior
       var controlText1 = document.createElement('empty');
       controlText1.style.fontFamily = 'sans-serif';
       controlText1.style.fontSize = '10px';
       controlText1.style.paddingLeft = '4px';
       controlText1.style.paddingRight = '8px';
       controlText1.style.marginTop = '10px';
       controlText1.innerHTML = 'Plot Route';
       controlUI.appendChild(controlText1);

       // Setup the click event listeners
       google.maps.event.addDomListener(controlUI1, 'click', function () {
       url = "http://excite.bounceme.net/settings.html"; 
       window.location = url;
       });
  }    

   function start(){
       var map;
       map = new google.maps.Map(document.getElementById('map'), {
       center: {lat: 39.833, lng: -98.585},
       zoom: 12
       });
       var customControlDiv = document.createElement('div');
       var customControl = new CustomControl(customControlDiv, map,deviceID);
       customControlDiv.index = 1;
       map.controls[google.maps.ControlPosition.TOP_RIGHT].push(customControlDiv);
       var customControlDiv1 = document.createElement('empty');
       var customControl1 = new CustomControl(customControlDiv1, map,deviceID);
       customControlDiv1.index = 2;
       map.controls[google.maps.ControlPosition.RIGHT_TOP].push(customControlDiv1);
    }
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"> </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=yourkeygoeshere4&callback=initMap"
    async defer></script>
  </body>
</html>

Answer 1

您的代码中有错字。您正在创建 class CustomControl 的两个副本，您永远不会创建 CustomControl1 class.

工作代码片段（您还有一个语法错误）：

function CustomControl(controlDiv, map, deviceID) {
  // Set CSS for the control border
  var controlUI = document.createElement('div');
  //controlUI.style.backgroundColor = '#f00c0c';
  controlUI.style.backgroundColor = '#ffffff';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '1px';
  controlUI.style.borderColor = '#ccc';
  controlUI.style.borderRadius = "23px";
  controlUI.style.height = '33px';
  controlUI.style.marginTop = '5px';
  controlUI.style.marginLeft = '-6px';
  controlUI.style.paddingTop = '1px';
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to change settings';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior
  var controlText = document.createElement('div');
  controlText.style.fontFamily = 'sans-serif';
  controlText.style.fontSize = '10px';
  controlText.style.paddingLeft = '4px';
  controlText.style.paddingRight = '8px';
  controlText.style.marginTop = '10px';
  controlText.innerHTML = 'Settings';
  controlUI.appendChild(controlText);

  // Setup the click event listeners
  google.maps.event.addDomListener(controlUI, 'click', function() {
    url = "http://excite.bounceme.net/profile.html";
    window.location = url;
  });
}

function CustomControl1(controlDiv, map, deviceID) {
  // Set CSS for the control border
  var controlUI1 = document.createElement('empty');
  //controlUI1.style.backgroundColor = '#f00c0c';
  controlUI1.style.backgroundColor = '#ffffff';
  controlUI1.style.borderStyle = 'solid';
  controlUI1.style.borderWidth = '1px';
  controlUI1.style.borderColor = '#ccc';
  controlUI1.style.borderRadius = "23px";
  controlUI1.style.height = '33px';
  controlUI1.style.marginTop = '5px';
  controlUI1.style.marginLeft = '-6px';
  controlUI1.style.paddingTop = '1px';
  controlUI1.style.cursor = 'pointer';
  controlUI1.style.textAlign = 'center';
  controlUI1.title = 'Click to plot course';
  controlDiv.appendChild(controlUI1);

  // Set CSS for the control interior
  var controlText1 = document.createElement('empty');
  controlText1.style.fontFamily = 'sans-serif';
  controlText1.style.fontSize = '10px';
  controlText1.style.paddingLeft = '4px';
  controlText1.style.paddingRight = '8px';
  controlText1.style.marginTop = '10px';
  controlText1.innerHTML = 'Plot Route';
  controlUI1.appendChild(controlText1);

  // Setup the click event listeners
  google.maps.event.addDomListener(controlUI1, 'click', function() {
    url = "http://excite.bounceme.net/settings.html";
    window.location = url;
  });
}

function start() {
  var map;
  var deviceID = "A";
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 39.833,
      lng: -98.585
    },
    zoom: 12
  });
  var customControlDiv = document.createElement('div');
  var customControl = new CustomControl(customControlDiv, map, deviceID);
  customControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(customControlDiv);
  var customControlDiv1 = document.createElement('div');
  var customControl1 = new CustomControl1(customControlDiv1, map, deviceID);
  customControlDiv1.index = 2;
  map.controls[google.maps.ControlPosition.RIGHT_TOP].push(customControlDiv1);
}
google.maps.event.addDomListener(window, "load", start);

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

Google 地图 - 地图上的多个自定义按钮

Google Maps - Multiple Custom Buttons on Map

javascript

google-maps

custom-controls

google-maps-api-3