Fatal编程技术网
  • json/
  • Json 多标记中的谷歌地图信息窗口

Json 多标记中的谷歌地图信息窗口

json google-maps

Json 多标记中的谷歌地图信息窗口,json,google-maps,google-maps-markers,infowindow,Json,Google Maps,Google Maps Markers,Infowindow,我正在尝试使用GoogleMapsAPIv3、JSON和postgresql创建GIS web。我可以在mymap中显示多个标记，但当我单击一个标记并尝试打开信息窗口时，只有最后一个标记会正确响应 问题是，如果我尝试在循环中为infowindow分配内容。然后，当我单击标记时，它只知道循环最后一次迭代的内容。我知道这个问题，但不知道如何解决。对不起，我的英语不好。有什么建议吗？ 下面是代码（json.php和index.php）： 康托 身体{ 填充顶部：60px；/*60px，使容器一直到顶

我正在尝试使用GoogleMapsAPIv3、JSON和postgresql创建GIS web。我可以在mymap中显示多个标记，但当我单击一个标记并尝试打开信息窗口时，只有最后一个标记会正确响应

问题是，如果我尝试在循环中为infowindow分配内容。然后，当我单击标记时，它只知道循环最后一次迭代的内容。我知道这个问题，但不知道如何解决。对不起，我的英语不好。有什么建议吗？ 下面是代码（json.php和index.php）：


康托
身体{
填充顶部：60px；/*60px，使容器一直到顶部栏的底部*/
}
var-peta；
var gambar_tanda；
gambar_tanda='assets/img/marker.png'；
var x=新数组（）；
var y=新数组（）；
var customer_name=新数组（）；
函数peta_awal（）{
//posisi默认peta saat卸载
var lokasibaru=新的google.maps.LatLng（-6107）；
变量选项={
缩放：6，
中心：洛卡西巴鲁，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
peta=new google.maps.Map（document.getElementById（“Map_canvas”），peta选项）；
//使用函数ambilpeta（）实现协调
ambipeta（）；
}
函数ambipeta（）{
url=“json.php”；
$.ajax({
url:url，
数据类型：“json”，
cache:false，
成功：功能（msg）{

对于（i=0；i是的，我解决了这个问题。下面是代码：
希望这个案例能对大家有所帮助


<html>
    <head>
    <title>contoh</title>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <style>
      body {


padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
    <script src="assets/js/jquery.js"></script>
    <!-- load googlemaps api dulu -->
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    function initialize(){
    var peta;
    var gambar_tanda;
    gambar_tanda = 'assets/img/enseval.jpg';
    var x = new Array();
    var y = new Array();
    var customer_name = new Array();

        // posisi default peta saat diload
        var lokasibaru = new google.maps.LatLng(-6,107);
        var petaoption = {
            zoom: 6,
            center: lokasibaru,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        peta = new google.maps.Map(document.getElementById("map_canvas"),petaoption);
        var infowindow =  new google.maps.InfoWindow({
                          content: ""
        });


        // memanggil function ambilpeta() untuk menampilkan koordinat
        url = "json.php";
        $.ajax({
            url: url,
            dataType: 'json',
            cache: false,
            success: function(msg){
                for(i=0;i<msg.enseval.customer.length;i++){
                    x[i] = msg.enseval.customer[i].x;
                    y[i] = msg.enseval.customer[i].y;
                    customer_name[i] = msg.enseval.customer[i].nama_customer;
                    var point = new google.maps.LatLng(parseFloat(msg.enseval.customer[i].x),parseFloat(msg.enseval.customer[i].y));
                      tanda = new google.maps.Marker({
                                position: point,
                                map: peta,
                                icon: gambar_tanda,
                                clickable: true
                    });
                bindInfoWindow(tanda, peta, infowindow, msg.enseval.customer[i].nama_customer);
                //var isi = msg.enseval.customer[i].nama_customer;
                //var infowindow = new google.maps.InfoWindow();
                //google.maps.event.addListener(tanda,'click', function() {
                //return function(){
                //infowindow.setContent(this);
                //infowindow.open(peta,this);
                //};
                //});
                /*var infowindow = new google.maps.InfoWindow({
                content:isi
                });
                    google.maps.event.addListener(tanda, 'click', function() {
                    //infowindow.setContent(content);
                    infowindow.open(peta,this);
                    });*/

                }
            }
        });
    }
        google.maps.event.addDomListener(window, 'load', initialize);
        function bindInfoWindow(tanda, peta, infowindow, strDescription) {
        google.maps.event.addListener(tanda, 'click', function() {
            infowindow.setContent(strDescription);
            infowindow.open(peta, tanda);
        });
    }
    //onload="initialize() -- > body
    </script> 
    </head>
    <body ">  
    <div class="container">
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    </a>
                <a class="brand" href="#">CONTOH</a>
                <div class="btn-group pull-right"></div>
                </div>
            </div>
        </div>

    <div id="map_canvas" style="height:500px"></div>

    <hr>
          <footer>
            <p>&copy; TEST</p>
          </footer>
    </div>
    </body>
    </html>




康托
身体{
填充顶部：60px；/*60px，使容器一直到顶部栏的底部*/
}
函数初始化（）{
var-peta；
var gambar_tanda；
gambar_tanda='assets/img/enseval.jpg'；
var x=新数组（）；
var y=新数组（）；
var customer_name=新数组（）；
//posisi默认peta saat卸载
var lokasibaru=新的google.maps.LatLng（-6107）；
变量选项={
缩放：6，
中心：洛卡西巴鲁，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
peta=new google.maps.Map（document.getElementById（“Map_canvas”），peta选项）；
var infowindow=new google.maps.infowindow({
内容：“”
});
//使用函数ambilpeta（）实现协调
url=“json.php”；
$.ajax({
url:url，
数据类型：“json”，
cache:false，
成功：功能（msg）{
对于（i=0；i


&抄袭




<html>
    <head>
    <title>contoh</title>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <style>
      body {


padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
    <script src="assets/js/jquery.js"></script>
    <!-- load googlemaps api dulu -->
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    function initialize(){
    var peta;
    var gambar_tanda;
    gambar_tanda = 'assets/img/enseval.jpg';
    var x = new Array();
    var y = new Array();
    var customer_name = new Array();

        // posisi default peta saat diload
        var lokasibaru = new google.maps.LatLng(-6,107);
        var petaoption = {
            zoom: 6,
            center: lokasibaru,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        peta = new google.maps.Map(document.getElementById("map_canvas"),petaoption);
        var infowindow =  new google.maps.InfoWindow({
                          content: ""
        });


        // memanggil function ambilpeta() untuk menampilkan koordinat
        url = "json.php";
        $.ajax({
            url: url,
            dataType: 'json',
            cache: false,
            success: function(msg){
                for(i=0;i<msg.enseval.customer.length;i++){
                    x[i] = msg.enseval.customer[i].x;
                    y[i] = msg.enseval.customer[i].y;
                    customer_name[i] = msg.enseval.customer[i].nama_customer;
                    var point = new google.maps.LatLng(parseFloat(msg.enseval.customer[i].x),parseFloat(msg.enseval.customer[i].y));
                      tanda = new google.maps.Marker({
                                position: point,
                                map: peta,
                                icon: gambar_tanda,
                                clickable: true
                    });
                bindInfoWindow(tanda, peta, infowindow, msg.enseval.customer[i].nama_customer);
                //var isi = msg.enseval.customer[i].nama_customer;
                //var infowindow = new google.maps.InfoWindow();
                //google.maps.event.addListener(tanda,'click', function() {
                //return function(){
                //infowindow.setContent(this);
                //infowindow.open(peta,this);
                //};
                //});
                /*var infowindow = new google.maps.InfoWindow({
                content:isi
                });
                    google.maps.event.addListener(tanda, 'click', function() {
                    //infowindow.setContent(content);
                    infowindow.open(peta,this);
                    });*/

                }
            }
        });
    }
        google.maps.event.addDomListener(window, 'load', initialize);
        function bindInfoWindow(tanda, peta, infowindow, strDescription) {
        google.maps.event.addListener(tanda, 'click', function() {
            infowindow.setContent(strDescription);
            infowindow.open(peta, tanda);
        });
    }
    //onload="initialize() -- > body
    </script> 
    </head>
    <body ">  
    <div class="container">
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    </a>
                <a class="brand" href="#">CONTOH</a>
                <div class="btn-group pull-right"></div>
                </div>
            </div>
        </div>

    <div id="map_canvas" style="height:500px"></div>

    <hr>
          <footer>
            <p>&copy; TEST</p>
          </footer>
    </div>
    </body>
    </html>