谷歌地图标记图标未显示

Question

我正在尝试实现一个谷歌地图，用户可以在其中找到自己选择的地方的搜索。地图显示得很好，搜索框也正常工作。唯一的问题是地图标记没有显示。我有以下脚本。似乎从未使用过图标var，但我不知道为什么。谁能帮我？

<script>

function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 55.86515, lng: -4.25763 },
zoom: 13,
mapTypeId: 'roadmap'
});

var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(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 (marker) {
marker.setMap(null);
});
markers = [];

var bounds = new google.maps.LatLngBounds();
places.forEach(function (place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
markers.push(new google.maps.Marker({
map: map,
icon: "~/flag.jpg",
title: place.name,
position: place.geometry.location,
animation: google.maps.Animation.BOUNCE
}));
if (place.geometry.viewport) {
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
</script>

Answer 1

您给出的图像路径可能不起作用。因此，请尝试以下操作进行验证。这对我有用。

var markerImage = 'http://www.mapsmarker.com/wp-content/uploads/leaflet-maps-marker-icons/bar_coktail.png';
markers.push(new google.maps.Marker({
map: map,
icon: markerImage,
title: place.name,
position: place.geometry.location,
animation: google.maps.Animation.BOUNCE
}));

可以尝试小提琴