1 Вопрос: Как добавить функцию случайного расположения на карте в мой API Google Maps?

вопрос создан в Wed, May 8, 2019 12:00 AM

У меня есть API для ввода города и штата, и он переместит мой маркер в это место. Как бы я использовал Math.random, чтобы создать кнопку, которая приведет меня в случайное место?

    <script th:inline="javascript">
    /*<![CDATA[*/

    var coords = {
    lat: parseFloat(/*[[${location.lat}]]*/) || 39.9612,
    lng: parseFloat(/*[[${location.lng}]]*/) || -82.9988
};
var city = /*[[${location.city}]]*/;
var state = /*[[${location.state}]]*/;

    /*]]>*/

function randomBetween() {
    var random = new google.maps.LatLng( (Math.random()*(85*2)-85), (Math.random()*(180*2)-180) );
}
</script>

    <input type="button" onclick="randomBetween()" value="Click" />

Когда я запускаю функцию randomBetween, я хочу, чтобы она перенесла меня в случайное место. Моя кнопка на данный момент ничего не делает.

    
- 2
1 ответ                              1                         

Есть примеры того, как создавать маркеры в случайных местах в пределах карты, в нескольких примерах в документации, один из них:

var lngSpan = bounds.east - bounds.west;
var latSpan = bounds.north - bounds.south;
for (var i = 0; i < secretMessages.length; ++i) {
  var marker = new google.maps.Marker({
    position: {
      lat: bounds.south + latSpan * Math.random(),
      lng: bounds.west + lngSpan * Math.random()
    },
    map: map
  });
}

Чтобы добавить маркер в ваше «случайное» местоположение и центрировать карту там:

function randomBetween() {
  var random = new google.maps.LatLng( (Math.random()*(85*2)-85), (Math.random()*(180*2)-180) );
  var marker = new google.maps.Marker({
    map: map,
    position: random
  });
  map.setCenter(marker.getPosition());
}

доказательство концепции скрипки

 снимок экрана с полученной картой

Фрагмент кода:

р>

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  });
  google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
    randomBetween();
  })
}

function randomBetween() {
  var random = new google.maps.LatLng((Math.random() * (85 * 2) - 85), (Math.random() * (180 * 2) - 180));
  var marker = new google.maps.Marker({
    map: map,
    position: random
  });
  map.setCenter(marker.getPosition());
}
#map {
  height: 95%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<input id="btn" value="random location" type="button" />
<div id="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&callback=initMap" async defer></script>
    
0
2019-05-08 16: 35: 54Z
источник размещен Вот