如何在没有点击标记事件的情况下在谷歌地图中获取一些信息，并在除了infoWindow之外的div中显示

Question

嗨我在谷歌地图上显示一些标记，点击标记，我正在调用点击事件并向右侧显示有关该地点的一些信息（地图以外的区域而不是infoWindow）。 现在这个事件在点击时被触发，默认情况下，当页面加载时我的div仍为空白，如何在地图加载后让div显示基本信息。 我需要显示与作为地图中心点的标记对应的信息，稍后当用户单击标记图标时，信息应该更改并对应于要点击的特定标记

我尝试了一些东西，但它不起作用：

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功能这样的东西

但是信息应该是默认情况下第一次出现在右侧。 稍后单击标记时，信息应该更改。 我也不坚持在kml文件中需要这些信息（xml对我来说也很好）。 我可以只有一个标记，并且信息应该在点击时弹出，并且第一次也是默认的，具体取决于用户的位置。

底线：我需要在点击标记时显示信息，默认情况下，当页面加载时，信息应显示为对应于地图的中心点。 这意味着来自不同位置的用户将看到与他们来自哪里的位置相对应的不同信息。（我根据用户位置将地图居中）

Answer 1

您可以使用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（）方法绑定到浏览器的window对象，并允许API与API的普通域之外的对象进行通信。

进一步阅读

实际上，基本的想法是你需要读取一个XMl并解析数据并在右侧的单独div中显示。这个div你可以在加载地图时动态创建，例如：

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

Answer 2

您可以在document.ready上的第一个标记上使用jQuery来.triger()一个click事件：

$(marker).trigger('click');

这将运行您已编写的代码，并在页面加载时使用div将填充来自触发单击的任何元素的数据。

当您绑定到document.ready您不需要在引号中封装document ：

$(document).ready(function () {...});

或者你可以使用短手，如果你是这样的事情：

$(function () {...});

UPDATE

您可以在设置标记的for循环后放置trigger函数调用：

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);

    //only run on the first marker
    if (i === 0) {

        //trigger a click event to show the first info-window
        $(marker).trigger('click');
    }
}

Answer 3

您可以在地图对象上触发tilesloaded事件。 查看事件的地图参考

tilesloaded等待直到在触发之前实际加载地图图块。 使用您的代码，您可以执行以下操作：

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);
    google.maps.event.addListener(map, 'tilesloaded', function() {
    doSomething();
  });

Answer 4

关于InfoWindow部分中的google文档：

请注意，如果在不传递标记的情况下调用open（），InfoWindow将使用InfoWindow选项对象在构造时指定的位置。

那么在您的代码中，为什么不简单地初始化infoWindow并调用open()方法？ 我对api不是特别熟悉，但是怎么样：

var infowindow = new google.maps.InfoWindow({
    content: 'your initial text'
});
infowindow.open();

或者，如果您需要在infowindow.open(your_initial_pos)上出于特殊目的使用标记，请使用中心位置初始化标记并在infowindow.open(your_initial_pos)调用中使用该标记。

如何在没有点击标记事件的情况下在谷歌地图中获取一些信息，并在除了infoWindow之外的div中显示

问题描述

4 个解决方案

解决方案1
4 已采纳 2011-12-29 18:23:50

解决方案2
0 2011-12-20 20:22:10

解决方案3
0 2011-12-20 20:25:57

解决方案4
0 2011-12-30 13:09:15

如何在没有点击标记事件的情况下在谷歌地图中获取一些信息，并在除了infoWindow之外的div中显示

问题描述

4 个解决方案

解决方案1 4 已采纳 2011-12-29 18:23:50

解决方案2 0 2011-12-20 20:22:10

解决方案3 0 2011-12-20 20:25:57

解决方案4 0 2011-12-30 13:09:15

解决方案1
4 已采纳 2011-12-29 18:23:50

解决方案2
0 2011-12-20 20:22:10

解决方案3
0 2011-12-20 20:25:57

解决方案4
0 2011-12-30 13:09:15