将PHP变量传递给javascript,以显示IP在谷歌地图上的位置
Pass PHP variable to javascript to show location of IP on Google Maps
在同一页上,我使用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());
}
});
相关文章:
- 从桌面读取python文件时高亮显示代码
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何在生成下载文件时显示加载动画
- React重新渲染但未显示正确的组件
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 使用codehelper.io显示基于IP位置的状态缩写
- 如何在页面上显示时间、日期IP和URL?更新日期:2015年2月25日
- 将PHP变量传递给javascript,以显示IP在谷歌地图上的位置
- Nodejs,Express - 尝试从请求对象获取客户端 IP - 显示 127.0.0.1
- 根据 IP 向 Web 访问者显示自定义消息
- 根据浏览器语言或IP地址显示内容,以显示YouTube或优酷视频
- c#没有显示完整的IP地址
- 使用客户端IP作为cookie,识别重复访问并在第一次访问后显示消息
- jQuery显示/获取用户IP地址
- 如何从xml Ip api获取xml内容并显示在网页上
- 日志显示用户的两个不同 IP 地址
- 如何使用 JS 在 HTML 中将 IP 显示为文本
- 浏览器默认在 javascript 警报框中显示站点 ip
- 如何显示网站而不是ip/index.html