将自定义按钮放入 google 地图 v3

Question

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

<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);
      }
    });

当我使用 [].

使 google 地图变大时，我只想让按钮在 google 地图内尝试

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

或者如果有人知道如何将我的代码与下面的地理定位按钮集成，就像这个例子：https://jsfiddle.net/ogsvzacz/6/。不胜感激。

Answer 1

做一个custom control like this example in the documentation

将您的 "button" 和输入元素包装在 <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>

将其添加到示例中的 "custom control"（当前位于地图顶部的中心）：

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'));
}

将控件添加到地图：

    // 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

代码片段：

/**
 * 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>

将自定义按钮放入 google 地图 v3

Put custom button inside google map v3

javascript

php

google-maps

google-maps-api-3