2013-07-04 1 views
1

Я хочу, чтобы моя карта повторно инициализировалась после отправки формы. моя форма имеет раскрывающееся меню, выпадающее меню используется для выбора региона, который будет отображаться на карте. Я хочу, чтобы при отправке формы страница все еще там, но обновление карты и отображение метки. Извините за мой плохой английский. есть код:google map refresh после отправки формы

<script type="text/javascript"> 
       function initialize(){ 
       var peta; 
       var gambar_tanda; 
       gambar_tanda = 'assets/images/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: '<div class=new>""</div>' 
        }); 
        // 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); 
          } 
         } 
        }); 
       } 

       google.maps.event.addDomListener(window, 'load', initialize); 

       function bindInfoWindow(tanda, peta, infowindow, data) { 
        google.maps.event.addListener(tanda, 'click', function() { 
        infowindow.setContent(data); 
        infowindow.open(peta, tanda); 
        }); 
       } 
       function reload(form){ 
       var val=form.org_id.options[form.org_id.options.selectedIndex].value; 
       self.location='index.php?cabang=' + val ; 
       } 
       </script> 
       </head> 
       <body> 
       <div id="map_canvas" style=" align: left; width:1000px; height:500px"></div> 
       <?php require ('config.php'); 
       @$cabang=$_GET['cabang']; 
       /*if(strlen($cabang) > 0 and !is_numeric($cabang)){ 
       echo "Data Error"; 
       exit; 
       }*/ 
       $quer2=pg_query("SELECT DISTINCT org_id FROM gis order by org_id"); 
       if(isset($cabang) and strlen($cabang)){ 
       $quer=pg_query("SELECT DISTINCT cp_rayon_name FROM gis where org_id=$cabang order by cp_rayon_name"); 
       } 
       //else{$quer=pg_query("SELECT DISTINCT cp_rayon_name FROM gis order by cp_rayon_name"); } 
       echo "<form method=post name=f1 action='' onSubmit='\"initialize()\'>"; 
       echo "<select name='org_id' onchange=\"reload(this.form)\"><option value=''>Select one</option>"; 
       while($noticia2 = pg_fetch_array($quer2)) { 
       if($noticia2['org_id'][email protected]$cabang){echo "<option selected value='$noticia2[org_id]'>$noticia2[org_id]</option>"."<BR>";} 
       else{echo "<option value='$noticia2[org_id]'>$noticia2[org_id]</option>";} 
       } 
       echo "</select>"; 
       echo "<select name='rayon'><option value=''>Select one</option>"; 
       while($noticia = pg_fetch_array($quer)) { 
       echo "<option value='$noticia[cp_rayon_name]'>$noticia[cp_rayon_name]</option>"; 
       } 
       echo "</select>"; 
       echo "<input type=submit value=Submit>"; 
       echo "</form>"; 
       include ('json.php'); 
       ?> 

       </body> 
       </html> 

<?php 
     require ('config.php'); 
     $rayon = $_POST['rayon']; 
     $cabang = $_POST['org_id']; 
     //echo "$rayon, $cabang"; 
     $sql = "SELECT distinct org_id, customer_name, attribute16, attribute17 FROM gis where cp_rayon_name = '$RAYON'"; 
     $data = pg_query($sql); 
     $json = '{"enseval": {'; 
     $json .= '"customer":[ '; 
     while($x = pg_fetch_array($data)){ 
      $json .= '{'; 
      $json .= '"id_customer":"'.$x['org_id'].'", 
       "nama_customer":"'.htmlspecialchars($x['customer_name']).'", 
       "x":"'.$x['attribute17'].'", 
       "y":"'.$x['attribute16'].'" 
      },'; 
     } 
     $json = substr($json,0,strlen($json)-1); 
     $json .= ']'; 
     $json .= '}}'; 
     //echo $json; 
     ?> 
+0

вам нужно PANTO (LatLng: LatLng) из [Google Maps API] (https://developers.google.com/maps /documentation/javascript/3.exp/reference?hl=en#Map)? – vladkras

+0

Что вы имеете в виду? извините, я все еще новичок. первый код используется для выбора latlong, который будет отображаться на карте, процесс выполняется во втором коде, но как сделать карту отображаемой маркером после процесса? Я скучаю по этой штуке. – Krichevskoy

+0

, пожалуйста, вставьте свой html-код с этим выберите здесь – vladkras

ответ

1

Прежде всего, я не могу понять, почему вы в том числе json.php в конце файла, и это не будет работать на AJAX, потому что вам вы прокомментировали последнюю строку. Я думаю, вам не нужно перезагружать эту страницу, используя self.location='index.php?cabang=' + val;. Просто отправьте запрос на json.php, используя $.ajax (у вас уже есть в вашем коде) и на успех обновления карты с panTo() методом (описание here)

поэтому алгоритм должен быть: <select> OnChange ->reload ->val (вы уже есть) ->$.ajax ->json.php + data = val ->success: function(data) {} ->var newCoor = new google.maps.LatLng(data.x, data.y) ->Map.panTo(panTo(newCoor))

+0

спасибо большое, что vladkras, json.php использует, чтобы получить отметку latlong для карты. self.location = 'index.php? cabang =' + val; -> ajax для combobox не для карты. Дело в том, что: 1. В начале карта пуста без маркера, и есть поле со списком, которое использовалось для выбора маркера (latlong). 2. после отправки combobox form, я хочу, чтобы карта обновила функцию и получила значение combobox. 3. поэтому на карте теперь будет отображаться маркер, который был выбран ранее. – Krichevskoy

+0

Извините за мой плохой базовый, я могу понять ваш алгоритм. Можете ли вы точно показать мне, код и где я должен его поместить. – Krichevskoy

+0

Я думаю, я решу эту проблему .. Я использую разные способы .. другой алгоритм. Спасибо за все. – Krichevskoy

Смежные вопросы