Привет всем новичкам здесь и новичкам в JS. У меня есть приложение, которое используется более 10 лет и до сих пор используется. Он написан на PHP/Mysql/JS и использует GM для определения мест доставки. Я думал обновить его до новой системы маркеров, но не смог заставить ее работать. Я думаю, что это только я и мое ограниченное понимание JS.
В любом случае, следующий код показывает карту, но не маркеры. rfap3 и т. д. основаны на теге CSS. Любая помощь очень ценится. Действительно мог найти какие-либо существующие сообщения, которые мне помогли.
<script type = "text/javascript" src = "https://maps.googleapis.com/maps/api/js?callback=Function.prototype&key=MYKEY&loading=async"></script>
<script type = "text/javascript">
async function initmap() {
// setTimeout second value is milliseconds
// ie: 1000 = 1 second, 30000 = 30 seconds
setTimeout( "document.location = document.location;", 30000);
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
const myLatLng = new google.maps.LatLng(-41.439068, 147.135773);
const bounds = new google.maps.LatLngBounds();
const myOptions = {
zoom: 12,
maxZoom: 18,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapId: 'rfamaps123456'
};
map = new google.maps.Map(document.getElementById("show_map"), myOptions);
var rfastodo = [
['3055',-41.416744,147.134476,'rfap3',201],
['3082',-41.432907,147.152039,'rfap3',202],
['3079',-41.431507,147.147400,'rfap2',203]
];
setRFAs(map, rfastodo);
function setRFAs(map, rfalist){
const rfaTag = document.createElement("div");
for (var i = 0; i < rfalist.length; i++) {
var rfas = rfalist[i];
var myLatLng2 = new google.maps.LatLng(rfas[1], rfas[2]);
rfaTag.classname = rfas[3];
rfaTag.textcontent = rfas[0];
var marker = new AdvancedMarkerElement({
position: myLatLng2,
map: map,
content: rfaTag,
zIndex: rfas[4]
});
}
bounds.extend(marker.position);
map.fitBounds(bounds);
}
}
</script>
Просто обнаружил, что все есть, кроме маркеров.
🤔 А знаете ли вы, что...
JavaScript имеет множество встроенных объектов, таких как Array, Date и Math.
У вас есть несколько проблем с функцией setRFAs.
// this should be inside the for loop
const rfaTag = document.createElement("div");
и
rfaTag.classname = rfas[3]; // this should be className
rfaTag.textcontent = rfas[0]; // this should be textContent
и
// this should be inside the for loop
bounds.extend(marker.position);
С исправлениями, указанными выше, функция выглядит так:
function setRFAs(map, rfalist) {
for (var i = 0; i < rfalist.length; i++) {
const rfaTag = document.createElement("div");
var rfas = rfalist[i];
var myLatLng2 = new google.maps.LatLng(rfas[1], rfas[2]);
rfaTag.classBame = rfas[3];
rfaTag.textContent = rfas[0];
var marker = new AdvancedMarkerElement({
position: myLatLng2,
map: map,
content: rfaTag,
zIndex: rfas[4]
});
bounds.extend(marker.position);
}
map.fitBounds(bounds);
}
в качестве бонуса - я бы написал так
function setRFAs(rfaList) {
rfaList.forEach(([textContent, lat, lng, className, zIndex]) => {
const content = document.createElement("div");
content.className = className;
content.textContent = textContent;
position = new google.maps.LatLng(lat, lng);
const marker = new AdvancedMarkerElement({position, map, content, zIndex});
bounds.extend(marker.position);
}
);
map.fitBounds(bounds);
}
и вызовите его без аргумента map, поскольку это похоже на то, как вы не вызываете его с bounds, вы все равно просто используете bounds из внешней области видимости