将PHP变量传递给javascript,以显示IP在谷歌地图上的位置

Pass PHP variable to javascript to show location of IP on Google Maps

本文关键字:IP 显示 谷歌地图 位置 变量 PHP javascript      更新时间:2023-09-26

在同一页上,我使用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 中的IPMapper代码

/*!
 * 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); }
    }
}

也许。。。

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

不是javascript 的专家

更好的解决方案是将数据添加到元素中并使用事件侦听器。

<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());
    }
});