[英]Display pop up information on clicking marker in google map
通過單擊 Google 地圖中的每個標記,在單個彈出窗口中顯示的彈出信息包括:位置、名稱、國家/地區、緯度和經度。 我需要顯示用戶單擊的特定標記的所有信息,例如:“位置:邦迪海灘,國家:澳大利亞,緯度:-33.890,經度:151.274”。
<template>
<div id="map" class="map"></div>
</template>
<script>
mounted() {
var locations = [
['Bondi Beach','Australia',-33.890542, 151.274856, 4],
['Coogee Beach','Australia', -33.923036, 151.259052, 5],
['Cronulla Beach','Australia', -34.028249, 151.157507, 3]
];
var count, marker;
// Init map
let mapOptions = {
zoom: 13,
center: new google.maps.LatLng(locations[0][1], locations[0][2]),
scrollwheel: true
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
// Create info window
var infowindow = new google.maps.InfoWindow({
maxWidth: 350,
pixelOffset: new google.maps.Size(-10,-25)
});
var infoData = [];
// Add markers
for (count = 0; count < locations.length; count++) {
var loan = locations[count][0]
let myLatlng = new google.maps.LatLng(locations[count][1], locations[count][2]);
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: locations[count][0]
});
marker.setMap(map);
// Bind marker click event to open info-window
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent( " " );
infowindow.open(map);
infowindow.setPosition(myLatlng);
});
}
}
</script>
您可以將信息窗口內容設置為 HTML。 來自 Google 的 JS 小提琴。 谷歌官方文檔。
代碼示例:
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra BeachManly Beach Manly Beach Manly Beach', -33.950198, 151.259302, 1]
];
var count, marker;
// Init map
var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(locations[0][1], locations[0][2]),
scrollwheel: true,
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
// Create info window
var infowindow = new google.maps.InfoWindow({
maxWidth: 350,
pixelOffset: new google.maps.Size(-10,-25)
});
var infoFn = function (count) {
return function (e) {
var content = '<div>' +
'<span>Location: ' + locations[count][0] + '</span>' +
'<span>, Lat: ' + locations[count][1] + '</span>' +
'<span>, Long: ' + locations[count][2] + '</span>' +
'</div>';
infowindow.setContent(content);
infowindow.open(map);
infowindow.setPosition(new google.maps.LatLng(locations[count][1], locations[count][2]));
}
};
// Add markers
for (count = 0; count < locations.length; count++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[count][1], locations[count][2]),
map: map,
title: locations[count][0]
});
marker.setMap(map);
let fn = infoFn(count);
google.maps.event.addListener(marker, 'click', fn);
}
工作演示。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.