Fatal编程技术网
  • javascript/
  • Javascript 在Google Map API V3中显示某些信息窗口

Javascript 在Google Map API V3中显示某些信息窗口

javascript google-maps

Javascript 在Google Map API V3中显示某些信息窗口,javascript,google-maps,infowindow,Javascript,Google Maps,Infowindow,我编写了以下代码来显示标记。有两个按钮显示标记的下一个或上一个信息窗口。但问题是，InfoWindows并没有使用google.maps.event.trigger显示 有人能帮我解决这个问题吗。非常感谢。 以下是代码： <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" c

我编写了以下代码来显示标记。有两个按钮显示标记的下一个或上一个信息窗口。但问题是，InfoWindows并没有使用google.maps.event.trigger显示 有人能帮我解决这个问题吗。非常感谢。 以下是代码：

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Common Loader</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var infowindow;
  var map;
  var bounds;
  var markers = [];
  var markerIndex=0;

  function initialize() {
    var myLatlng = new google.maps.LatLng(41.051407, 28.991134);
    var myOptions = {
      zoom: 5,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

      markers = document.getElementsByTagName("marker");
      for (var i = 0; i < markers.length; i++) {
        var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
        var marker = createMarker(markers[i].getAttribute("name"), latlng, markers[i].getAttribute("phone"), markers[i].getAttribute("distance"));
       }
    rebound(map);
  }

  function createMarker(name, latlng, phone, distance) {
    var marker = new google.maps.Marker({position: latlng, map: map});

    var myHtml = "<table style='width:100%;'><tr><td><b>" + name + "</b></td></tr><tr><td>" + phone + "</td></tr><tr><td align='right'>" + distance + "</td></tr></table>";

    google.maps.event.addListener(marker, "click", function() {
      if (infowindow) infowindow.close();
      infowindow = new google.maps.InfoWindow({content: myHtml});
      infowindow.open(map, marker);
    });
    return marker;
  }

  function rebound(mymap){
    bounds    = new google.maps.LatLngBounds();
    for (var i = 0; i < markers.length; i++) {
    bounds.extend(new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng"))));
    }
    mymap.fitBounds(bounds);
  }

  function showNextInfo()
  {
    if(markerIndex<markers.length-1)
          markerIndex++;
    else
          markerIndex = 0 ;
    alert(markers[markerIndex].getAttribute('name'));
    google.maps.event.trigger(markers[markerIndex],"click");
  }
  function showPrevInfo()
  {
    if(markerIndex>0)
          markerIndex--;
    else
          markerIndex = markers.length-1 ;
        google.maps.event.trigger(markers[markerIndex],'click');
  }
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:400px; height:300px"></div>
<markers>
<marker name='Name1' lat='41.051407' lng='28.991134' phone='+902121234561' distance=''/>
<marker name='Name2' lat='40.858746' lng='29.121666' phone='+902121234562' distance=''/>
<marker name='Name3' lat='41.014604' lng='28.972256' phone='+902121234562' distance=''/>
<marker name='Name4' lat='41.012386' lng='26.978350' phone='+902121234562' distance=''/>
</markers>
<input type="button" onclick="showPrevInfo()" value="prev">&nbsp;<input type="button" onclick="showNextInfo()" value="next">
</body>
</html>


谷歌地图JavaScript API v3示例：通用加载程序
var信息窗口；
var映射；
var界；
var标记=[]；
var-markerIndex=0；
函数初始化（）{
var mylatng=new google.maps.LatLng（41.051407,28.991134）；
变量myOptions={
缩放：5，
中心：myLatlng，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
markers=document.getElementsByTagName（“marker”）；
对于（var i=0；i
我就是这样做的

希望能有所帮助；）

/**
*地图
*/
var mylatng=new google.maps.LatLng（39.980278,4.049835）；
变量myOptions={
缩放：10，
中心：myLatlng，
mapTypeId:google.maps.mapTypeId.ROADMAP，
滚轮：错误
}
var map=new google.maps.map（document.getElementById（'mapa'），myOptions）；
var infoWindow=new google.maps.infoWindow（）；
var markerBounds=new google.maps.LatLngBounds（）；
var-markerary=[]；
函数makeMarker（选项）{
var pushPin=new google.maps.Marker（{map:map}）；
图钉。设置选项（选项）；
google.maps.event.addListener（图钉，'click'，函数（）{
设置选项（选项）；
信息窗口。打开（地图、图钉）；
});
markerArray.push（图钉）；
回程推杆；
}
google.maps.event.addListener（映射，'click'，函数（）{
infoWindow.close（）；
});
函数openMarker（i）{
google.maps.event.trigger（markerArray[i]，'click'）；
};
/**
*标记
*/
马克({
位置：新google.maps.LatLng（39.943962,3.891220），
标题：“标题”，
内容：“Lorem ipsumLorem ipsum dolor sit amet”
});
openMarker（0）；
此代码不起作用，因为它正在触发
标记[markerIndex]
上的
事件，该事件不是映射标记，而是关于带标记的DOM元素的信息
标记

要使其运行，您必须添加包含地图标记列表的全局数组：


var markerList = [];


更改
initialize（）
函数将映射标记推送到for循环中的该列表：


markerList.push(marker);


将函数
showNextInfo（）
和
showPrevInfo（）
更改为触发地图标记上的事件：


//google.maps.event.trigger(markers[markerIndex], "click");
google.maps.event.trigger(markerList[markerIndex], "click");



//google.maps.event.trigger(markers[markerIndex], "click");
google.maps.event.trigger(markerList[markerIndex], "click");