google-maps - 由于自定义图像,Google Maps API v3 多个标记不起作用?
问题描述
我正在使用基于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()
,而LatLng 类不支持。如果要使用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>
希望这可以帮助!
推荐阅读
- spring-mvc - 运行 JPA 查询的 SQL 语句中的语法错误
- angular - 角度的垫子对话框中的样式
- bash - 如何在终端中将运行计数显示为“watch”输出的一部分?
- python - 合并数据框
- javascript - 如何解构 axios 返回的承诺?
- javascript - 如何在 JS 的 Notification API 中设置自定义通知声音
- flutter - 不等于 Cloud Firestore 查询功能是否可用于 Flutter 插件?
- java - 每个大小为 k 的窗口中的第一个负整数,辅助空间 O(1) 和 O(n) 时间复杂度
- jupyter - 在 Jupyter Python 笔记本中使用 C/C++ 块
- python - 关于 Tkinter(python) 的查询