我正在尝试制作它,以便当我的Google Maps JavaScript API确定用户位置时出现标记。当我打开HTML时,它可以拉起用户的位置,但是没有标记显示用户的位置。我有几个标记显示了3个健身房的位置,但我想向用户展示与三个健身房有关的地方。
我应该在" var markers ="数组中添加用户的位置?还是我应该在" infowindow.setposition(pos)"之后添加某种类型的代码?这是我到目前为止的代码;
<script>
var map, infoWindow;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat:34.0522,lng:-118.2437},
zoom: 15,
disableDefaultUI: true,
gestureHandling: 'cooperative',
});
infoWindow = new google.maps.InfoWindow;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
handleLocationError(false, infoWindow, map.getCenter());
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn't support geolocation.');
infoWindow.open(map); }
var markers = [
{
coords:{lat:34.051937,lng:-118.472118},
iconImage:'GymBoxNBurn.png',
content:'Box N Burn Boxing Gym'
},
{
coords:{lat:33.938454,lng:-118.277857},
iconImage:'GymBroadwayBoxing.png',
content:'Broadway Boxing Gym'
},
{
coords:{lat:34.015644,lng:-118.487396},
iconImage:'GymBoxNBurn.png',
content:'Box N Burn Boxing Gym'
}
];
for(var i = 0;i < markers.length;i++){
addMarker(markers[i]);
}
function addMarker(props){
var marker = new google.maps.Marker({
position:props.coords,
map:map,
});
if(props.iconImage){
marker.setIcon(props.iconImage);
}
if(props.content){
var infoWindow = new google.maps.InfoWindow({
content:props.content
});
}
}
};
尝试一下。注意:确定您的立场的不是Google地图。i'ts标准html/javaScript功能;您的Webbrowser读取它。
...
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
addMarker({
coords: pos,
content:'YOU ARE HERE'
});
// if you want this, center the map. Else remove next line
map.setCenter(pos);
},
...