[英]Display mysql table data in info window Google map API
我在Google MAPS API上還很新,我希望獲得一些幫助。 我正在使用ajax從mysql datbase在我的站點上繪制多邊形,並且工作正常。 Ajax代碼是
function checkbox(clicked_id)
{
var checkbox = document.getElementById(clicked_id);
if(checkbox.checked==true)
{
// coordintaes for routes
// Get coordinates of route and display it
for(m=1;m<=36;m++){
//alert(m);
$.ajax({
url: "route_query4district1.php?id="+m,
dataType: 'json',
success: function (msg1)
{
xarray1 = new Array();
yarray1 = new Array();
color1 = new Array();
new_id = new Array();
dist_name = new Array();
js_data1 = eval(msg1);
//alert(js_data1);
var k1=0;
for(j1=0;j1<js_data1.length;j1+=5){
xarray1[k1] = js_data1[j1];
yarray1[k1] = js_data1[j1+1];
color1[k1] = js_data1[j1+2];
new_id[0] = js_data1[j1+3];
dist_name[0] = js_data1[j1+4];
k1++;
}
//alert(dist_name);
var flightPlanCoordinates = new Array();
for(i=0;i<xarray1.length;i++){
flightPlanCoordinates[i] = new google.maps.LatLng(yarray1[i], xarray1[i]);
}
var line_color="#00000";
var stroke_color=line_color.toString();
var linee_color=color1[m];
var strokee_color=linee_color.toString();
flightPath[m] = new google.maps.Polygon({
path: flightPlanCoordinates,
strokeColor: stroke_color,
fillColor: strokee_color,
strokeOpacity: 1.0,
strokeWeight: 4
});
flightPath[m].setMap(map);
google.maps.event.addListener(flightPath[m], 'click', showArrays);
infoWindow = new google.maps.InfoWindow();
}
});
}
}
現在我想在信息窗口谷歌地圖APi中顯示與每個多邊形關聯的屬性數據。我該怎么做? 我想顯示以下信息。名稱保存在幾何表中,並且具有唯一的ID,通過該ID與其他表關聯。 $符號用作php變量,通過該變量從datbase提取數據
名稱:$ name,人口:$ pop,區域:$ area
你可以試試看
flightPath[m] = new google.maps.Polygon({
path: flightPlanCoordinates,
strokeColor: stroke_color,
fillColor: strokee_color,
strokeOpacity: 1.0,
strokeWeight: 4,
id: m
});
//Create the info window
var infowindow = new google.maps.InfoWindow({
width:...,
...
});
//Add it to object with the same key as your flightpaths
infowindows[m] = infowindow.
//Set event listener for mouse over
google.maps.event.addListener(flightPath[m], 'mouseover', function(){
setContent(this.id);
});
google.maps.event.addListener(flightPath[m], 'mouseout', function(){
infowindows[this.id].close();
});
//mouseover function
var setContent = function(id)
{
//build your html. This is where you'd get your variables from php. Ajax or save them to a js variable.
infowindows[id].setContent(html);
infowindows[id].open(map, flightPath[id]);
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.