我正在使用基于Google 示例的当前代码,它可以使用一个标记正常工作,但是当我尝试使用多个标记时,它失败了。
我认为这可能与我的自定义标记图像有关,但不确定,因为我对此并不擅长......有人有什么想法吗?
function initialize() {
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
];
var myLatLng = new google.maps.LatLng(beach[1], beach[2], beach[3]);
var mapPKCanvas = document.getElementById('main-map');
var mapPKOptions = {
center: new google.maps.LatLng(-33.890542, 151.274856),
zoom: 15,
draggable: true,
scrollwheel: false,
mapTypeControl: false,
scaleControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mainMapPK = new google.maps.Map(mapPKCanvas, mapPKOptions)
var url = 'https://www.customimage-map.png';
var size = new google.maps.Size(64, 78);
if (window.devicePixelRatio > 1.5) {
url = 'https://www.customimage-mapx2.png';
size = new google.maps.Size(64, 78);
}
var image = {
url: url,
size: size,
scaledSize: new google.maps.Size(64, 78),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(18, 20)
};
var marker = new google.maps.Marker({
position: myLatLng.getCenter(),
map: mainMapPK,
icon: image
});
marker.addListener('click', function() {
infowindow.open(mainMapPK, marker);
});
google.maps.event.trigger(mainMapPK, "resize");
}
google.maps.event.addDomListener(window, 'load', initialize);
假设您的图像路径正确,我认为您的自定义标记实现没有任何问题。但是,我确实在您发布的代码片段中看到了几个问题。
首先,beach
不存在。应该是beaches
。此外,这是一个二维数组,因此您应该相应地访问坐标:
google.maps.LatLng(beaches[0][1], beaches[0][2]) // -33.890542, 151.274856
其次,设置您标记的位置,你正在使用getCenter()
它的经纬度类不支持。如果要使用getCenter()
,请改用LatLngBounds 类。否则,只需将标记的位置按原样设置为您的 LatLng。
试试下面修改后的代码示例:
<div id="main-map" style="height:450px;"></div>
<script>
function initialize() {
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
];
var mapPKCanvas = document.getElementById('main-map');
var mapPKOptions = {
center: new google.maps.LatLng(-33.890542, 151.274856),
zoom: 10,
draggable: true,
scrollwheel: false,
mapTypeControl: false,
scaleControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mainMapPK = new google.maps.Map(mapPKCanvas, mapPKOptions)
var url = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/parking_lot_maps.png';
var size = new google.maps.Size(64, 78);
if (window.devicePixelRatio > 1.5) {
url = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/library_maps.png';
size = new google.maps.Size(64, 78);
}
var image = {
url: url,
size: size,
scaledSize: new google.maps.Size(64, 78),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(18, 20)
};
var marker = new google.maps.Marker({
position: new google.maps.LatLng(beaches[2][1], beaches[2][2]),
map: mainMapPK,
icon: image
});
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(beaches[1][1], beaches[1][2]),
map: mainMapPK,
icon: image
});
var marker3 = new google.maps.Marker({
position: new google.maps.LatLng(beaches[0][1], beaches[0][2]),
map: mainMapPK,
icon: image
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize"></script>
希望这可以帮助!
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句