通行證PHP變量的JavaScript顯示IP上的谷歌地圖

Question

這裏的位置在同一頁U上正在使用的PHP代碼返回域的IP，我想這個PHP $ IP變量傳遞給JavaScript代碼的下方，在按鈕標籤中。我如何將這個php $ ip變量傳遞給下面的javascript代碼。

這裏是PHP提交的部分，沒有谷歌地圖：

<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; 
} 
?> 

下面是這段代碼的JavaScript代碼：我想通過上面的PHP $ IP變量 我想刪除輸入標籤和按鈕標籤在這段JavaScript代碼，因爲他們現有的兩個輸入和單頁

我在這個項目的目標是查找IP的位置，並顯示在谷歌地圖上的提交按鈕的標籤。

<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

/*! 
* 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

也許IPMapper代碼...

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

不上的JavaScript

Answer 2

更好的解決方案將是一個專家來添加數據添加到元素並使用事件偵聽器。

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

，並在JavaScript

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