多个标记，单个信息窗口，锚定在地图底部

我无法渲染锚定有多个标记的Google地图infowindow。多个标记，单个信息窗口，锚定在地图底部

我使用MVC 3和JavaScript来渲染地图，地图呈现良好，以及相关的信息窗口。但我希望信息窗口显示在地图的底部，而不是相对于标记。根据用于搜索的国家，每张地图的起点可能会有所不同。我的JavaScript以下（这是工作）>我只是不知道如何改变信息窗口：

function initializeMap() { 

var countryID = $("#CountryID :selected").val(); 
var cityID = $("#cities :selected").val(); 
var regionID = $("#regions :selected").val(); 
var locationtypeID = $("#LocationTypeID :selected").val(); 
var filtertype = $("#filtertype").val(); 
var latlng; 

$.ajax({ 
    type: "GET", 
    url: "/ajaxcalls/getCentre", 
    data: "cid=" + countryID, 
    datatype: "json", 
    success: function (result) { 
     var gpscoords = (result).split(","); 
     latlng = new google.maps.LatLng(gpscoords[0], gpscoords[1]); 
    }, 
    error: function (req, status, error) {    
    } 
}); 

var myOptions = { 
    zoom: 7, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
};  

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

$.ajax({ 
    type: "GET", 
    url: "/ajaxcalls/getmarkers", 
    data: "cid=" + countryID + "&rid=" + regionID + "&xid=" + cityID + "&tid=" + locationtypeID + "&filterType=" + filtertype, 
    datatype: "json", 
    success: function (result) { 

     var infowindow = null; 

     infowindow = new google.maps.InfoWindow({ 
      content: "holding..." 
     }); 

     $.each(result, function (i, item) { 

      var gpscoords = (item.GPSCoOrds.toString()).split(","); 

      var mpos = new google.maps.LatLng(gpscoords[1], gpscoords[0]); 

      var markerobject = ""; 

      if (item.LocationTypeID == 2) { 
       markerobject = "atm.png"; 
      } 
      else { 
       markerobject = "bank.png"; 
      } 

      marker = new google.maps.Marker({ 
       map: map, 
       position: mpos, 
       draggable: false, 
       icon: "/content/mapicons/" + markerobject, 
       title: item.Designation.toString() + " " + item.Address.toString() 
      }); 

      google.maps.event.addListener(marker, 'mouseover', function() { 
       var windowcontent = "<div>Site Name: "; 
       windowcontent = windowcontent + item.Designation + "</div>"; 
       windowcontent = windowcontent + "<div>Address: " + item.Address + "</div>"; 
       windowcontent = windowcontent + "<div>Contact Number: " + item.contactNumber + "</div>"; 
       windowcontent = windowcontent + "<div>Branch Type: " + item.BranchType + "</div>"; 
       windowcontent = windowcontent + "<div>Network Provider: " + item.NetworkProvider + "</div>"; 
       windowcontent = windowcontent + "<div>Network Capacity: " + item.NetworkCapacity + "</div>"; 

       infowindow.setContent(windowcontent); 

       infowindow.open(map, this); 
      }); 
     }); 
    }, 
    error: function (req, stats, error) { 
     alert(error); 
    } 
}); 
    } 

    $(document).ready(function() { 
     $("#mapupdater").click(function() { 
    initializeMap(); 
}); 
    });

任何帮助，将不胜感激。

来源

2011-11-22 Robin Curtis

不要锚定信息窗口的标记与infowindow.open(map, this);

只是做infowindow.open(map);

但是你仍然要告诉信息窗口在哪里出现。在创建时使用position属性，或者在创建后使用setPosition()。

来源

2011-11-22 14:00:24 duncan

Postition属性的问题在于它仍然是一个LatLng对象。如果您滚动地图或移动地图，infowindow就会移开，因为此时地图上可能不会显示latlng。我的理解是否正确？ –

是的，所以您需要在地图边界发生变化时拥有事件侦听器，以重绘任何打开的infowindows。 – duncan

感谢所有的回复，我刚刚创建了一个静态浮动div，并使用ajax调用来直接更新数据库中的信息。 –

多个标记，单个信息窗口，锚定在地图底部

回答

相关问题