将自定义按钮放入谷歌地图 v3

Question

当用户单击按钮时，我有工作谷歌地图，它将转到用户位置。但我的问题是如何在谷歌地图内制作按钮？单击谷歌地图[]最大化后，它会显示按钮。我的代码是：

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

    <input id="lat" value="47.6145" />
    <input id="lng" value="-122.3418" />
    <div id="google_map"></div>


    <!-- Replace the value of the key parameter with your own API key. -->
    <script src="https://maps.googleapis.com/maps/api/js?key=APIKEY"></script>

    var map;

    function getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
      } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
      }
    }

    function showPosition(position) {

      $('#lat').val(position.coords.latitude);
      $('#lng').val(position.coords.longitude);

      map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
      //location.reload();

      x.innerHTML = "<p id='babi'>Latitude: " + position.coords.latitude +
        "</p><br><p id='setan'>Longitude: " + position.coords.longitude + "</p>";
    }

    $(document).ready(function() {
      var lng = $("#lng").val();
      var lat = $("#lat").val();
      var mapCenter = new google.maps.LatLng(lat, lng);
      // var mapCenter = new google.maps.LatLng(47.6145, -122.3418); //Google map Coordinates

      map_initialize(); // load map
      function map_initialize() {
        //Google map option
        var googleMapOptions = {
          center: mapCenter, // map center
          zoom: 17, //zoom level, 0 = earth view to higher value
          panControl: true, //enable pan Control
          zoomControl: true, //enable zoom control
          zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL //zoom control size
          },
          scaleControl: true, // enable scale control
          mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
        };

        map = new google.maps.Map(document.getElementById("google_map"), googleMapOptions);
      }
    });

当我使用 [] 使谷歌地图变大时，我只想让按钮在谷歌地图中尝试。

我的实际工作在这里：https://jsfiddle.net/designblog4u/kjd6t1L5/ ..我只需要在我的谷歌地图中添加尝试按钮，因为当我点击地图中的 [] 时，按钮不显示..

或者如果有人知道如何将我的代码与下面的地理位置按钮集成，例如：https://jsfiddle.net/ogsvzacz/6/。会很合适的。

Answer 1

创建一个custom control 喜欢this example in the documentation

1. 将您的“按钮”和输入元素包装在 <div> 中：

<div id="mapcontrol">
  <p>Click the button to get your coordinates.</p>

  <button onclick="getLocation()">Try It</button>

  <input id="lat" value="47.6145" />
  <input id="lng" value="-122.3418" />
</div>

1. 将其添加到示例中的“自定义控件”（当前位于地图顶部的中心）：

function CenterControl(controlDiv, map) {

  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '3px';
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '22px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to recenter the map';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'Center Map';
  controlUI.appendChild(document.getElementById('mapcontrol'));
}

1. 将控件添加到地图中：

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

    centerControlDiv.index = 1;
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);

proof of concept fiddle

代码 sn-p：

/**
 * The CenterControl adds a control to the map that recenters the map on
 * the provided coordinates.
 * This constructor takes the control DIV as an argument.
 * @constructor
 */
function CenterControl(controlDiv, map) {

  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '3px';
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '22px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to recenter the map';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'Center Map';
  controlUI.appendChild(document.getElementById('mapcontrol'));

  // Setup the click event listeners: simply set the map to Chicago.
  /* controlUI.addEventListener('click', function() {
    map.setCenter(chicago);
  }); */
}



var map;

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {

  $('#lat').val(position.coords.latitude);
  $('#lng').val(position.coords.longitude);

  map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
  //location.reload();

  x.innerHTML = "<p id='babi'>Latitude: " + position.coords.latitude +
    "</p><br><p id='setan'>Longitude: " + position.coords.longitude + "</p>";
}

$(document).ready(function() {
  var lng = $("#lng").val();
  var lat = $("#lat").val();
  var mapCenter = new google.maps.LatLng(lat, lng);
  // var mapCenter = new google.maps.LatLng(47.6145, -122.3418); //Google map Coordinates

  map_initialize(); // load map
  function map_initialize() {
    //Google map option
    var googleMapOptions = {
      center: mapCenter, // map center
      zoom: 17, //zoom level, 0 = earth view to higher value
      panControl: true, //enable pan Control
      zoomControl: true, //enable zoom control
      zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL //zoom control size
      },
      scaleControl: true, // enable scale control
      mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
    };

    map = new google.maps.Map(document.getElementById("google_map"), googleMapOptions);
  }
  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map);

  centerControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);

});

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#google_map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mapcontrol">
  <p>Click the button to get your coordinates.</p>

  <button onclick="getLocation()">Try It</button>

  <input id="lat" value="47.6145" />
  <input id="lng" value="-122.3418" />
</div>
<div id="google_map"></div>


<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>