Я создал простое приложение карты, как показано в приведенном ниже коде.
Короче говоря, я получаю правильные вызовы API (имя, описание и т. Д. c), но мой geometry.location.lat и geometry.location.long кажется пустым (console.log, чтобы увидеть его).
(на самом деле маркеры отображаются с правильными координатами местоположения, поэтому я в замешательстве)
<!DOCTYPE html>
<html>
<head>
<title>My Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<!-- Stylesheets. -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<h1 class="display-4">My Map</h1>
</div>
</div>
<div class="row mb-2">
<div class="col">
<input class="form-control" id="search" type="text" placeholder="Search..." />
</div>
</div>
<div class="row">
<div class="col">
<div id="map"></div>
</div>
</div>
</div>
<!-- Bootstrap scripts. -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Google Maps scripts. -->
<script src="script.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=<your api key>&libraries=places" async defer></script>
</body>
</html>
скрипт. js
var map;
window.onload = () => {
let method = 'dynamic';
// if you want to statically add places, de-comment following line
// method = 'static';
if (method === 'static') {
let places = staticLoadPlaces();
renderPlaces(places);
}
if (method !== 'static') {
// first get current user location
return navigator.geolocation.getCurrentPosition(function (position) {
console.log("Latitude: ", position.coords.latitude)
console.log("Longitude: ", position.coords.longitude)
// works
var options = {
center: { lat: position.coords.latitude, lng: position.coords.longitude },
zoom: 100
};
var myLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map = new google.maps.Map(document.getElementById('map'), options);
var request = {
location: myLocation,
radius: '500',
type: ['restaurant']
};
service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
///////////////////////////////////////////
// Search Function that is optional here //
///////////////////////////////////////////
var input = document.getElementById('search');
var searchBox = new google.maps.places.SearchBox(input);
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
searchBox.addListener('places_changed', function () {
var places = searchBox.getPlaces();
if (places.length == 0)
return;
markers.forEach(function (m) { m.setMap(null); });
markers = [];
var bounds = new google.maps.LatLngBounds();
places.forEach(function(p) {
if (!p.geometry)
return;
markers.push(new google.maps.Marker({
map: map,
title: p.name,
position: p.geometry.location
}));
if (p.geometry.viewport)
bounds.union(p.geometry.viewport);
else
bounds.extend(p.geometry.location);
});
map.fitBounds(bounds);
});
},
);
}
};
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
console.log(results[i]); // outputs for google maps js api
console.log(results[i].name);
console.log(results[i].geometry.location.lat);
console.log(results[i].geometry.location.lng);
createMarker(results[i]);
}
}
}
function createMarker(result) {
new google.maps.Marker({
position: result.geometry.location,
map: map
});
}