gpt4 book ai didi

javascript - 如何在不点击标记事件的情况下在谷歌地图中获取一些信息并将其显示在除 infoWindow 之外的 div 中

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:50:17 26 4
gpt4 key购买 nike

您好,我在我的谷歌地图上显示了一些标记,点击标记后,我调用了点击事件并在右侧显示了关于该地点的一些信息( map 以外的区域,而不是信息窗口)。现在这个事件在点击时被触发,默认情况下当页面加载时我的 div 保持空白,我如何让 div 在 map 加载后显示基本信息。我需要显示与 map 中心点标记对应的信息,稍后当用户单击标记图标时,信息应该更改并对应于被单击的特定标记

我已经尝试了一些但它不起作用:

function loadMap() {
var myLatlng = new google.maps.LatLng(40.46998, -3.68705);
var myOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);

var places = [];
places.push(new google.maps.LatLng(51.43581, -0.51744));
places.push(new google.maps.LatLng(48.87187, 2.31764));
places.push(new google.maps.LatLng(45.45979, 9.19681));

var infowindow;
for(var i = 0; i<places.length; i++) {
var marker= new google.maps.Marker({
position: places[i],
map: map,
title: 'Place' + i
});


(function (i,marker){
google.maps.event.addListener(marker, 'click' , function() {
infowindow.setContent('PLace Number' + i)
infowindow.open(i, marker)
});
});(i, marker);
}
}
$("document").ready(function () {
loadMap();
});

更新已编辑

基本上我需要类似 Layer KML features 的东西

但是第一次默认情况下,信息应该出现在右侧。稍后单击标记时,信息应该会更改。我也不坚持我需要 kml 文件中的此信息(xml 也适合我)。我可以有一个标记,信息应该在点击时弹出,并且第一次也是默认的,这取决于用户的位置。

底线:我需要在单击标记时显示信息,并且默认情况下,当页面加载时,信息应对应于 map 的中心点显示。这意味着来自不同位置的用户将看到与他们来自的位置相对应的不同信息。(我根据用户位置将 map 居中)

最佳答案

您可以使用 google maps api 的 addDomListener 事件。像这样:

<script>
function initialize() {

// Map initialization

}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div id="map_canvas"></div>
</body>

虽然上述代码是 Maps Javascript API 代码,但 addDomListener() 方法绑定(bind)到浏览器的窗口对象,并允许 API 与 API 正常域之外的对象进行通信。

进一步reading

实际上,基本的想法是您需要读取 XMl 并解析数据并将其显示在右侧的单独 div 中。您可以在加载 map 时动态创建此 div 例如:

$("#body").append("<div class='newdiv'></div>")

关于javascript - 如何在不点击标记事件的情况下在谷歌地图中获取一些信息并将其显示在除 infoWindow 之外的 div 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8581392/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com