javascript - 在谷歌地图中点击标记时显示弹出信息
问题描述
通过单击谷歌地图中的每个标记,显示弹出信息包括:位置、名称、国家、纬度和经度,在单个弹出窗口中。我需要显示用户单击的特定标记的所有信息,例如:“位置:邦迪海滩,国家/地区:澳大利亚,纬度:-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);
}
工作演示。
推荐阅读
- python - 查找给定列表的模式和第二模式
- php - PHP parsing json failing
- mqtt - How is the Sparkplug is_historical metric property used?
- html - 固定背景附件的问题
- tvos - UIUserInterfaceStyle 在每次重新打开时恢复为 UIUserInterfaceStyleDark
- r - generate a special matrix (max value of column sum is minimum) with given number of column from a vector
- c# - swagger 4.0 Asp.net core 2.2 需要的body参数
- sql - SSIS OnPostExecute event: How to see the execution result?
- google-cloud-bigtable - 间歇性错误:java.io.IOException:无法提前阅读源:BigtableSource{config=BigtableConfig{projectId=
- excel - autofilter not including all rows when filtering using vba