我目前正在做谷歌地图。我没有任何PhP文件，我只有HTML Java脚本我的问题是，当我点击或悬停我的标记时，会有一条弹出消息，即InforMessage，真正需要做的是，我想制作一个PHP文件，这样PHP文件的内部就会传输到标记上的InfoMessage。php文件的内部是1或2图像，然后是以下描述。这是我的PHP和Java Scrip代码：
你可以编辑它，对不起，提前我刚刚开始使用PHP JS：）
=HTML=
<!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>
=Javascript=
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);
}
}
提前感谢
如果不起作用，请使用此代码并进行一些更改。
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) {
}
});
}