在信息窗口Google Map API中显示mysql表数据

时间:2015-08-01 15:00:17

标签: javascript php arrays arraylist

我在谷歌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中显示与每个多边形相关联的属性数据。我能做到吗? 我想显示以下信息.Name保存在几何表中并具有唯一ID,几何与其他表关联。 $ sign用作php变量,通过它从数据库中获取数据

姓名:$名称, 人口:$流行, 面积:$区域

1 个答案:

答案 0 :(得分:0)

你可以尝试一下

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