首先我应该说我对javascript或Google API V3不太了解。不管怎样,我一直试图在谷歌地图上添加标记,用信息窗口来指示我去过的地方。我在网上找到一个例子,并把它复制到我的网页上。然后,我尝试添加一个函数,以便在单击标记时放大到该位置。在更改代码后,我设法使缩放工作得非常好。但是,信息窗口不会打开。在它打开之前,当我使用这个;
infowindow.setContent(contentString);
infowindow.open(map,marker);.
但是缩放无法正常工作。改成这个之后;
infowindow.setContent(this.html);
infowindow.open(map, this);
变焦效果很好。但我丢失了信息窗口。有人能看到我如何更改代码以使缩放和信息窗口都能工作吗。如果有人能帮助我,我将非常高兴。我可以使用下面的代码进行调整吗?还是需要完全重写?提前感谢
<script>
//<![CDATA[
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";
// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
var map = null;
function initialize() {
// create the map
var myOptions = {
zoom: 7,
center: new google.maps.LatLng(47.516231, 13.550072),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function () {
infowindow.close();
});
// Add markers to the map
// add the points
var point = new google.maps.LatLng(48.208174, 16.373819);
var marker = createMarker(point, "Vienna", '<div style="font-size:12px;font-weight: bold;font-family:segoe ui, Trebuchet MS;">Vienna</div>')
// put the assembled side_bar_html contents into the side_bar div
document.getElementById("side_bar").innerHTML = side_bar_html;
}
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 100)
});
// This function picks up the click and opens the corresponding info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
map.setZoom(10);
map.setCenter(marker.getPosition());
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + name + '</a><br>';
}
</script>
主要问题是您将代码更改为使用标记的.html属性(google.maps.marker对象没有.html属性,但您可以添加它们)。
2个修复选项:
-
使用您的原始代码:
// A function to create the marker and set up the event window function function createMarker(latlng, name, html) { var contentString = html; var marker = new google.maps.Marker({ position: latlng, map: map, zIndex: Math.round(latlng.lat() * -100000) << 5 }); google.maps.event.addListener(marker, 'click', function () { infowindow.setContent(contentString); infowindow.open(map,marker); map.setZoom(10); map.setCenter(marker.getPosition()); }); // save the info we need to use later for the side_bar gmarkers.push(marker); // add a line to the side_bar html side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + name + '</a><br>'; }
工作示例
-
将.html添加到google.maps.Marker并使用
this
:// A function to create the marker and set up the event window function function createMarker(latlng, name, html) { var marker = new google.maps.Marker({ position: latlng, map: map, html: html, // <---------------------------------------------- add this to the Marker zIndex: Math.round(latlng.lat() * -100000) << 5 }); google.maps.event.addListener(marker, 'click', function () { infowindow.setContent(this.html); infowindow.open(map,this); map.setZoom(10); map.setCenter(this.getPosition()); }); // save the info we need to use later for the side_bar gmarkers.push(marker); // add a line to the side_bar html side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + name + '</a><br>'; }
默认情况下,API将平移映射,以便信息窗口完全可见(如果可能)。
这将通过使用动画来完成,当您设置缩放+中心时,此动画仍在运行,并将覆盖您的设置。
将infowindow
的disableAutoPan
-选项设置为true
以禁用自动平移,并且它应该按预期工作