如何使用javascript调用Php文件
目前我正在做谷歌地图。 我没有任何PhP文件， 我只有HTML Java脚本 我的问题是，当我点击或悬停我的标记时，会有一条弹出消息InforMessage，真正需要做的是，我想制作一个PHP文件，PHP文件的内部将被传输到标记上的InfoMessage。 php文件的内部是1或2个图像，然后是下面的描述。 以下是我的PHP和Java脚本代码： 您可以编辑它，抱歉，我只是开始使用PHP JS:） =HTML=如何使用javascript调用Php文件,javascript,php,html,google-maps,Javascript,Php,Html,Google Maps,目前我正在做谷歌地图。 我没有任何PhP文件， 我只有HTML Java脚本 我的问题是，当我点击或悬停我的标记时，会有一条弹出消息InforMessage，真正需要做的是，我想制作一个PHP文件，PHP文件的内部将被传输到标记上的InfoMessage。 php文件的内部是1或2个图像，然后是下面的描述。 以下是我的PHP和Java脚本代码： 您可以编辑它，抱歉，我只是开始使用PHP JS:） =HTML= <!DOCTYPE html> <html lang="en
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jav.js"></script>
</head>
<body>
<div id="map"></div>
<!--<script src="https://maps.googleapis.com/maps/api/js"
async defer></script>-->
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
</body>
</html>
文件
function initMap() {
var myLatLng = {lat: 18.2050, lng: 120.7920};
var laoagLatLng = {lat: 18.196257 , lng: 120.593041};
var locations = [
{name:"Bangui", lat:18.509124, lng:120.748283},
{name:"Batac", lat: 18.045672, lng:120.592285},
{name:"Burgos", lat:18.474150, lng:120.615543},
{name:"Laoag City", lat: 18.196379, lng: 120.594239},
{name:"Marcos", lat:18.032340, lng:120.709952},
{name:"Pagudpud", lat:18.563691, lng:120.872484},
{name:"Paoay", lat:18.074607, lng:120.516002},
{name:"Pasuquin", lat:18.409917, lng:120.619044},
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: myLatLng,
});
for (i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: locations[i],
icon: 'img/muni.png',
map: map,
title: locations[i].name
});
marker.setMap(myLatLng);
}
}
函数initMap（）{
var Mylatng={lat:18.2050，lng:120.7920}；
var laoagLatLng={lat:18.196257，lng:120.593041}；
变量位置=[
{名称：“班吉”，拉丁美洲：18.509124，液化天然气：120.748283}，
{名称：“Batac”，lat:18.045672，lng:120.592285}，
{名称：“Burgos”，纬度：18.474150，液化天然气：120.615543}，
{名称：“拉瓦格市”，纬度：18.196379，液化天然气：120.594239}，
{名称：“马科斯”，拉丁美洲：18.032340，液化天然气：120.709952}，
{名称：“Pagudpud”，纬度：18.563691，液化天然气：120.872484}，
{名称：“Paoay”，lat:18.074607，lng:120.516002}，
{名称：“Pasuquin”，lat:18.409917，lng:120.619044}，
];
var map=new google.maps.map（document.getElementById（'map'）{
缩放：11，
中心：myLatLng，
});
对于（i=0；i提前感谢您使用此代码，如果不起作用，请进行一些更改
function initAutocomplete() {
var latlng = new google.maps.LatLng(19.0213, 72.8424);
document.getElementById('pac-input').value='Dadar, Mumbai, Maharashtra, India';
var map = new google.maps.Map(document.getElementById('map'), {
//center: {lat: 22.717950, lng: 75.884679},
center: latlng,
zoom: 17,
mapTypeId: google.maps.MapTypeId.HYBRID
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
console.log(google.maps.ControlPosition);
//var markers = [];
// [START region_getplaces]
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
console.log(places.length);
if (places.length == 0) {
return;
}
//markers = [];
var marker;
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
marker = new google.maps.Marker({
position: place.geometry.location,
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
icon: 'red-icon-50.png',
title: place.name
});
google.maps.event.addListener(marker, 'dragend', function(a) {
console.log(a);
document.getElementById("lat").value= a.latLng.lat();
document.getElementById("lng").value= a.latLng.lng();
});
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
var address = document.getElementById('pac-input').value;
if(address != ''){
var marker = new google.maps.Marker({
position: latlng,
map: map,
animation: google.maps.Animation.DROP,
icon: 'red-icon-50.png',
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function(a) {
console.log(a);
document.getElementById("lat").value= a.latLng.lat();
document.getElementById("lng").value= a.latLng.lng();
});
marker.id = 1;
poilon=document.getElementById("lng").value;
poilat=document.getElementById("lat").value;
google.maps.event.addListener(marker, "click", function (e) {
var markerinfopopup = "<b>Point of Interest #"+marker.id+"</b><div><br /><textarea id=\"poi"+marker.id+"\" placeholder=\"Details\" value=\"\"></textarea><br /><p><div class=\"gef\"><button class=\"btncol\" onclick=\"saveInfoPoi('"+marker.id+"','"+poilat+"','"+poilon+"')\">Save</button><button class=\"btncol\" onclick = 'DeleteMarker(" + marker.id + ");' value = 'Delete'>Delete</button></div></p></div>";
var infoWindow1 = new google.maps.InfoWindow({
content: markerinfopopup
});
prev_infowindow2=infoWindow1;
infoWindow1.open(map, marker);
});
}
}
function saveInfoPoi(ids,poi_lat,poi_lon)
{
var poiids="poi"+ids;
var descs=document.getElementById(poiids).value;
console.log(descs);
var poiLatLon="("+poi_lat+","+poi_lon+")";
var param = {poiinfowindowid: ids, clat:mlat,clon:mlong, poidescription: descs,poilatlon:poiLatLon};
$.ajax({
url: "<?php echo $ajax; ?>",
type: "post",
data: param ,
success: function (response) {
var su=JSON.parse(response);
console.log(su);
prev_infowindow2.close();
},
error: function(jqXHR, textStatus, errorThrown) {
}
});
}
函数initAutocomplete（）{
var latlng=新的google.maps.latlng（19.0213,72.8424）；
document.getElementById（'pac-input'）.value='Dadar，印度马哈拉施特拉邦孟买'；
var map=new google.maps.map（document.getElementById（'map'）{
//中心：{lat:22.717950，lng:75.884679}，
中心：拉特林，
缩放：17，
mapTypeId:google.maps.mapTypeId.HYBRID
});
//创建搜索框并将其链接到UI元素。
var input=document.getElementById（'pac-input'）；
var searchBox=newgoogle.maps.places.searchBox（输入）；
map.controls[google.maps.ControlPosition.TOP_LEFT].push（输入）；
//将搜索框结果偏向当前地图的视口。
addListener（'bounds_changed'，function（）{
searchBox.setBounds（map.getBounds（））；
});
log（google.maps.ControlPosition）；
//var标记=[]；
//[开始区域\u getplaces]
//侦听用户选择预测并检索时激发的事件
//关于那个地方的更多细节。
searchBox.addListener（'places\u changed'，function（）{
var places=searchBox.getPlaces（）；
控制台.日志（位置.长度）；
如果（places.length==0）{
返回；
}
//标记=[]；
var标记；
//对于每个位置，获取图标、名称和位置。
var bounds=new google.maps.LatLngBounds（）；
地点。forEach（功能（地点）{
变量图标={
url:place.icon，
大小：新谷歌地图大小（71,71），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（17,34），
scaledSize:new google.maps.Size（25,25）
};
marker=新的google.maps.marker({
位置：place.geometry.location，
地图：地图，
真的，
动画：google.maps.animation.DROP，
图标：“red-icon-50.png”，
标题：place.name
});
google.maps.event.addListener（标记'dragend'，函数（a）{
控制台日志（a）；
document.getElementById（“lat”）.value=a.latLng.lat（）；
document.getElementById（“lng”）.value=a.latLng.lng（）；
});
if（place.geometry.viewport）{
//只有地理代码具有视口。
联合（place.geometry.viewport）；
}否则{
扩展（place.geometry.location）；
}
});
映射边界（bounds）；
});
var address=document.getElementById（'pac-input'）。值；
如果（地址！=''）{
var marker=new google.maps.marker({
位置：latlng，
地图：地图，
动画：google.maps.animation.DROP，
图标：“red-icon-50.png”，
德拉格布尔：是的
});
google.maps.event.addListener（标记'dragend'，函数（a）{
控制台日志（a）；
document.getElementById（“lat”）.value=a.latLng.lat（）；
document.getElementById（“lng”）.value=a.latLng.lng（）；
});
marker.id=1；
poilon=document.getElementById（“lng”）.value；
poilat=document.getElementById（“lat”）.value；
google.maps.event.addListener（标记“单击”，函数（e）{
var markerinfopopup=“兴趣点#”+marker.id+”
SaveDelete”；
var infoWindow1=新建google.maps.InfoWindow({
内容：markerinfopopup
});
prev_infowindow2=infoWindow1；
信息窗口1.打开（地图、标记）；
});
}
}
函数saveInfoPoi（id、poi_lat、poi_lon）
{
var poaids=“poi”+id；
var descs=document.getElementById（poiids）.value；
控制台日志（descs）；
var poiLatLon=“（“+poi_-lat+”，“+poi_-lon+”）；
var param={poininfowneid:ids，clat:mlat，clon:mlong，poidecription:descs，poilatlon:poilatlon}；
$.ajax({
url:“”，
类型：“post”，
数据：param，
成功：功能（响应）{
var su=JSON.parse（响应）；
控制台日志（su）；
上一个信息窗口2.close（）；
},
错误：函数（jqXHR、textStatus、errorshown）{
}
});
}