[英]Load Google Map marker HTML on request
Is it possible to load the content (ie the HTML displayed in the “tooltip”) of a Google Map marker only when the user actually clicks it? 是否可以仅在用户实际点击它时加载Google地图标记的内容(即“工具提示”中显示的HTML)?
I have a nice Google Map embedded on our site, and it works fine - with just 200 markers at a time. 我在我们的网站上嵌入了一个漂亮的谷歌地图,它工作正常 - 一次只有200个标记。 But now we would like to show a substantial number of marker(3900+), and currently all the tiny HTML pages for displaying the tooltips are set when the markers are added.
但现在我们想要显示大量的标记(3900+),目前所有用于显示工具提示的微小HTML页面都会在添加标记时设置。 Ideally, this HTML would be loaded using AJAX.
理想情况下,这个HTML将使用AJAX加载。
Yes, you will need to load the data you wish when a marker you have added to the map is clicked, by adding a click listener to the marker. 是的,通过向标记添加单击侦听器,您需要在单击添加到地图的标记时加载所需的数据。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=true_or_false"
type="text/javascript"></script>
<div id="map_canvas"> </div>
<script>
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
// When clicked on the marker I use jquery to request some Html
// then show in the contents of an info window
$.ajax({
url: 'http://www.test.com/get-data/',
dataType: 'html',
success: function (data) {
var infowindow = new google.maps.InfoWindow(
{ content: data,
size: new google.maps.Size(50,50),
position: marker.position
});
infowindow.open(map);
}
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.