簡體   English   中英

在信息窗口Google Map API中顯示mysql表數據

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM