IP adresinin Google Maps üzerindeki konumunu göstermek için javascript'e javascript iletin

Question

Burada aynı sayfada Etki alanından ip döndürmek için php kodunu kullanıyorum ve bu php $ ip değişkenini aşağıdaki javascript koduna iletmek istiyorum düğme etiketinde. Bu php $ ip değişkenini aşağıdaki javascript koduna nasıl aktarabilirim? İşte

php google maps olmadan kısmını teslim edilir: Burada

<form method="post" action=""> 
    <input type="text" name="name"> 
    <input type="submit" name="submit" value="submit"> 
</form> 

<?php 
if(isset($_POST['submit'])) 
{ 
    $ip = gethostbyname($_POST['name']); 
    echo $ip; 
} 
?> 

bu kodda javascript kodu: Ben php $ ip değişkeni yukarıda geçmek istiyorum ben kaldırmak istiyorum Bu javascript kodundaki giriş etiketi ve düğme etiketi, mevcut iki giriş ve tek düğme üzerindeki buton etiketlerinin tek bir sayfada gösterilmesidir. Bu projedeki amacım IP'nin yerini bulmak ve google haritalarında göstermektir. Başvuru için

<script type="text/javascript"> 
    $(function(){ 
     try{ 
      IPMapper.initializeMap("map"); 
      //IPMapper.addIPMarker("111.111.111.111"); 
     } catch(e){ 
      //handle error 
     } 
    }); 
</script> 

<input id="ip" name="ip" type="text" /> 
    <button onclick="IPMapper.addIPMarker($('#ip').val());">Geocode</button> 
    <div id="map" style="height: 500px;width:500px; "> 
</div> 

: javascript Belki

/*! 
* IP Address geocoding API for Google Maps 
* http://lab.abhinayrathore.com/ipmapper/ 
* Last Updated: June 13, 2012 
*/ 
var IPMapper = { 
    map: null, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    latlngbound: null, 
    infowindow: null, 
    baseUrl: "http://freegeoip.net/json/", 
    initializeMap: function(mapId){ 
     IPMapper.latlngbound = new google.maps.LatLngBounds(); 
     var latlng = new google.maps.LatLng(0, 0); 
     //set Map options 
     var mapOptions = { 
      zoom: 1, 
      center: latlng, 
      mapTypeId: IPMapper.mapTypeId 
     } 
     //init Map 
     IPMapper.map = new google.maps.Map(document.getElementById(mapId), mapOptions); 
     //init info window 
     IPMapper.infowindow = new google.maps.InfoWindow(); 
     //info window close event 
     google.maps.event.addListener(IPMapper.infowindow, 'closeclick', 
       function() { 
        IPMapper.map.fitBounds(IPMapper.latlngbound); 
        IPMapper.map.panToBounds(IPMapper.latlngbound); 
       }); 
    }, 
    addIPArray: function(ipArray){ 
     ipArray = IPMapper.uniqueArray(ipArray); //get unique array elements 
     //add Map Marker for each IP 
     for (var i = 0; i < ipArray.length; i++){ 
      IPMapper.addIPMarker(ipArray[i]); 
     } 
    }, 
    addIPMarker: function(ip){ 
     ipRegex = /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/; 
     if($.trim(ip) != '' && ipRegex.test(ip)){ //validate IP Address format 
      var url = encodeURI(IPMapper.baseUrl + ip + "?callback=?"); //geocoding url 
      $.getJSON(url, function(data) { //get Geocoded JSONP data 
       if($.trim(data.latitude) != '' && data.latitude != '0' && !isNaN(data.latitude)){ //Geocoding successfull 
        var latitude = data.latitude; 
        var longitude = data.longitude; 
        var contentString = ""; 
        $.each(data, function(key, val) { 
         contentString += '<b>' + key.toUpperCase().replace("_", " ") + ':</b> ' + val + '<br />'; 
        }); 
        var latlng = new google.maps.LatLng(latitude, longitude); 
        var marker = new google.maps.Marker({ //create Map Marker 
         map: IPMapper.map, 
         draggable: false, 
         position: latlng 
        }); 
        IPMapper.placeIPMarker(marker, latlng, contentString); //place Marker on Map 
       } else { 
        IPMapper.logError('IP Address geocoding failed!'); 
        $.error('IP Address geocoding failed!'); 
       } 
      }); 
     } else { 
      IPMapper.logError('Invalid IP Address!'); 
      $.error('Invalid IP Address!'); 
     } 
    }, 
    placeIPMarker: function(marker, latlng, contentString){ //place Marker on Map 
     marker.setPosition(latlng); 
     google.maps.event.addListener(marker, 'click', function() { 
      IPMapper.getIPInfoWindowEvent(marker, contentString); 
     }); 
     IPMapper.latlngbound.extend(latlng); 
     IPMapper.map.setCenter(IPMapper.latlngbound.getCenter()); 
     IPMapper.map.fitBounds(IPMapper.latlngbound); 
    }, 
    getIPInfoWindowEvent: function(marker, contentString){ //open Marker Info Window 
     IPMapper.infowindow.close() 
     IPMapper.infowindow.setContent(contentString); 
     IPMapper.infowindow.open(IPMapper.map, marker); 
    }, 
    uniqueArray: function(inputArray){ //return unique elements from Array 
     var a = []; 
     for(var i=0; i<inputArray.length; i++) { 
      for(var j=i+1; j<inputArray.length; j++) { 
       if (inputArray[i] === inputArray[j]) j = ++i; 
      } 
      a.push(inputArray[i]); 
     } 
     return a; 
    }, 
    logError: function(error){ 
     if (typeof console == 'object') { console.error(error); } 
    } 
} 

Answer 1

yılında IPMapper kodu ...

<button onclick="IPMapper.addIPMarker($('<?php echo $ip ?>').val());">Geocode</button> 

Değil Daha iyi bir çözüm olacaktır javascript

Answer 2

uzmanı eklemek için öğeye veri ve bir olay dinleyicisi kullanın.

<button data-ip-marker="<?= htmlspecialchars($ip) ?>">Geocode</button> 

ve JavaScript

yılında

$(document).on('click', '[data-ip-marker]', function() { 
    var marker = $('#' + this.getAttribute('data-ip-marker')); 
    if (marker.length) { 
     IPMapper.addIPMarker(marker.val()); 
    } 
});