我有一张目前不使用地理位置的 map 。现在，我的网站上已有SSL，我已根据Google Maps API文档添加了SSL。但是问题是，我现在正在获得一个标签作为标记，而且我不知道如何将其返回到我的自定义标签中。
谁能帮忙，并解释如何做？
我的代码:
var marker;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom : 13,
center : {
lat : 59.909144,
lng : 10.7436936
},
disableDefaultUI : true,
//START STYLE
styles : [{
"elementType" : "geometry",
"stylers" : [{
"color" : "#ebe3cd"
}
]
}, {
"elementType" : "labels.text.fill",
"stylers" : [{
"color" : "#523735"
}
]
}, {
"elementType" : "labels.text.stroke",
"stylers" : [{
"color" : "#f5f1e6"
}
]
}, {
"featureType" : "administrative",
"elementType" : "geometry.stroke",
"stylers" : [{
"color" : "#c9b2a6"
}
]
}, {
"featureType" : "administrative.land_parcel",
"elementType" : "geometry.stroke",
"stylers" : [{
"color" : "#dcd2be"
}
]
}, {
"featureType" : "administrative.land_parcel",
"elementType" : "labels.text.fill",
"stylers" : [{
"color" : "#ae9e90"
}
]
}, {
"featureType" : "landscape.natural",
"elementType" : "geometry",
"stylers" : [{
"color" : "#dfd2ae"
}
]
}, {
"featureType" : "poi",
"elementType" : "geometry",
"stylers" : [{
"color" : "#dfd2ae"
}
]
}, {
"featureType" : "poi",
"elementType" : "labels.text.fill",
"stylers" : [{
"color" : "#93817c"
}
]
}, {
"featureType" : "poi.park",
"elementType" : "geometry.fill",
"stylers" : [{
"color" : "#a5b076"
}
]
}, {
"featureType" : "poi.park",
"elementType" : "labels.text.fill",
"stylers" : [{
"color" : "#447530"
}
]
}, {
"featureType" : "road",
"elementType" : "geometry",
"stylers" : [{
"color" : "#f5f1e6"
}
]
}, {
"featureType" : "road.arterial",
"elementType" : "geometry",
"stylers" : [{
"color" : "#fdfcf8"
}
]
}, {
"featureType" : "road.highway",
"elementType" : "geometry",
"stylers" : [{
"color" : "#f8c967"
}
]
}, {
"featureType" : "road.highway",
"elementType" : "geometry.stroke",
"stylers" : [{
"color" : "#e9bc62"
}
]
}, {
"featureType" : "road.highway.controlled_access",
"elementType" : "geometry",
"stylers" : [{
"color" : "#e98d58"
}
]
}, {
"featureType" : "road.highway.controlled_access",
"elementType" : "geometry.stroke",
"stylers" : [{
"color" : "#db8555"
}
]
}, {
"featureType" : "road.local",
"elementType" : "labels.text.fill",
"stylers" : [{
"color" : "#806b63"
}
]
}, {
"featureType" : "transit.line",
"elementType" : "geometry",
"stylers" : [{
"color" : "#dfd2ae"
}
]
}, {
"featureType" : "transit.line",
"elementType" : "labels.text.fill",
"stylers" : [{
"color" : "#8f7d77"
}
]
}, {
"featureType" : "transit.line",
"elementType" : "labels.text.stroke",
"stylers" : [{
"color" : "#ebe3cd"
}
]
}, {
"featureType" : "transit.station",
"elementType" : "geometry",
"stylers" : [{
"color" : "#dfd2ae"
}
]
}, {
"featureType" : "water",
"elementType" : "geometry.fill",
"stylers" : [{
"color" : "#b9d3c2"
}
]
}, {
"featureType" : "water",
"elementType" : "labels.text.fill",
"stylers" : [{
"color" : "#92998d"
}
]
}
]
//END STYLE
});
//CUSTOM MARKER ICON
var image = {
url : "img/ridepin.png",
scaledSize : new google.maps.Size(150, 150)
};
marker = new google.maps.Marker({
map : map,
draggable : true,
icon : image,
animation : google.maps.Animation.DROP,
position : {
lat : 59.909144,
lng : 10.7436936
}
});
marker.addListener('click', toggleBounce);
//END CUSTOM MARKER ICON
// GET POSITION
infoWindow = new google.maps.InfoWindow;
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var pos = {
lat : position.coords.latitude,
lng : position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('I don\'t want this marker!');
infoWindow.open(map);
map.setCenter(pos);
}, function () {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
//END GET POSITION
}
//BOUNCE WHEN MARKER IS PRESSED
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
//END BOUNCE WHEN MARKER IS PRESSED
最佳答案
在setPosition实例上使用marker方法，而不是infoWindow实例。
检查从您的代码改编的此代码段:
var map, marker, infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {
lat: 59.909144,
lng: 10.7436936
},
disableDefaultUI: true,
//START STYLE
styles: [{
"elementType": "geometry",
"stylers": [{
"color": "#ebe3cd"
}]
}, {
"elementType": "labels.text.fill",
"stylers": [{
"color": "#523735"
}]
}, {
"elementType": "labels.text.stroke",
"stylers": [{
"color": "#f5f1e6"
}]
}, {
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#c9b2a6"
}]
}, {
"featureType": "administrative.land_parcel",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#dcd2be"
}]
}, {
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#ae9e90"
}]
}, {
"featureType": "landscape.natural",
"elementType": "geometry",
"stylers": [{
"color": "#dfd2ae"
}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"color": "#dfd2ae"
}]
}, {
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#93817c"
}]
}, {
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [{
"color": "#a5b076"
}]
}, {
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#447530"
}]
}, {
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"color": "#f5f1e6"
}]
}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [{
"color": "#fdfcf8"
}]
}, {
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [{
"color": "#f8c967"
}]
}, {
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#e9bc62"
}]
}, {
"featureType": "road.highway.controlled_access",
"elementType": "geometry",
"stylers": [{
"color": "#e98d58"
}]
}, {
"featureType": "road.highway.controlled_access",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#db8555"
}]
}, {
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#806b63"
}]
}, {
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [{
"color": "#dfd2ae"
}]
}, {
"featureType": "transit.line",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#8f7d77"
}]
}, {
"featureType": "transit.line",
"elementType": "labels.text.stroke",
"stylers": [{
"color": "#ebe3cd"
}]
}, {
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [{
"color": "#dfd2ae"
}]
}, {
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [{
"color": "#b9d3c2"
}]
}, {
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#92998d"
}]
}]
//END STYLE
});
//CUSTOM MARKER ICON
var image = {
url: "https://maps.gstatic.com/mapfiles/ms2/micons/grn-pushpin.png",
scaledSize: new google.maps.Size(32, 32)
};
marker = new google.maps.Marker({
map: map,
draggable: true,
icon: image,
animation: google.maps.Animation.DROP,
position: {
lat: 59.909144,
lng: 10.7436936
}
});
marker.addListener('click', toggleBounce);
//END CUSTOM MARKER ICON
// GET POSITION
infoWindow = new google.maps.InfoWindow;
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
marker.setPosition(pos);
marker.setTitle('Your position is '+(Math.round(pos.lat * 100) / 100)+", "+(Math.round(pos.lng * 100) / 100));
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
//END GET POSITION
}
//BOUNCE WHEN MARKER IS PRESSED
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
//END BOUNCE WHEN MARKER IS PRESSED
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);
}html,
body,
#map {
margin: 0;
padding: 0;
height: 100%;
max-width: none;
}<div id="map" />
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>或这个jsfiddle:https://jsfiddle.net/beaver71/n25n4ojt/