个人中心
gpt4 book ai didi

javascript - 在 Google Map API V3 中显示特定信息窗口

转载 作者：可可西里 更新时间：2023-11-01 02:54:55 24 4
gpt4 key购买 nike

我写了下面的代码来显示标记。有 2 个按钮显示标记的下一个或上一个信息窗口。但问题是 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>

最佳答案

我就是这样做的

希望对你有帮助;)

 /**
  * map
  */
  var myLatlng = new google.maps.LatLng(39.980278, 4.049835);
  var myOptions = {
    zoom: 10,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false
  }
 var map = new google.maps.Map(document.getElementById('mapa'), myOptions);

 var infoWindow = new google.maps.InfoWindow();
 var markerBounds = new google.maps.LatLngBounds();
 var markerArray = [];

 function makeMarker(options){
   var pushPin = new google.maps.Marker({map:map});
   pushPin.setOptions(options);
   google.maps.event.addListener(pushPin, 'click', function(){
     infoWindow.setOptions(options);
     infoWindow.open(map, pushPin);
   });
   markerArray.push(pushPin);
   return pushPin;
 }

 google.maps.event.addListener(map, 'click', function(){
   infoWindow.close();
 });

 function openMarker(i){
   google.maps.event.trigger(markerArray[i],'click');
 };

 /**
 *markers
 */
 makeMarker({
   position: new google.maps.LatLng(39.943962, 3.891220),
   title: 'Title',
   content: '<div><h1>Lorem ipsum</h1>Lorem ipsum dolor sit amet<div>'
 });

openMarker(0);

关于javascript - 在 Google Map API V3 中显示特定信息窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1481039/

24 4 0
文章推荐： java - 如何计算(并指定)java进程允许的总内存空间？
文章推荐： javascript - Node.js:tcp 连接中的 zlib 压缩
文章推荐： java - 如何在 JAVA 中更改服务器套接字连接的回复端口
文章推荐： c# - TCP 客户端和套接字的问题
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com