【发布时间】：2017-08-21 03:40:09
【问题描述】：
我是第一次这样做，如何在我的网站中添加谷歌地图？我做过AJAX请看这段代码给我答案
使用 AJAX 来抛出数据库的区域，区域已完美完成，“纬度”和“经度”完美获取，但我无法在 JavaScript 代码中使用该纬度和经度。
这是我的php文件代码：
<div class="col-lg-4">
<select name="area_id" class="form-control" onchange="showUser(this.value)" id="area">
<option value="">Select Area</option>
</select>
</div>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "getuser.php?q=" + str, true);
xmlhttp.send();
}
}
</script>
</div>
<div id="txtHint"><b>Person info will be listed here...</b></div>
这是 getuser.php 文件：
<?php
include("config.php");
?>
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=" My Map Key "&callback=initMap"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style>
#txtHint {
height: 350px;
}
</style>
</head>
<body>
<?php
$q = intval($_GET['q']);
echo $sql = "SELECT * FROM area WHERE area_id='$q'";
$qry = mysql_query($sql);
while($fetch = mysql_fetch_array($qry))
{
$area_name=$fetch['area_name'];
//$city_name=$fetch['city_name'];
$address =$area_name; // Google HQ
$prepAddr = str_replace(' ','+',$address);
$geocode=file_get_contents('https://maps.google.com/maps/api/geocode/json?address='.$prepAddr.'&sensor=false');
$output= json_decode($geocode);
$area_latitude = $output->results[0]->geometry->location->lat;
$area_longitude = $output->results[0]->geometry->location->lng;
echo "<br><input type='text' name='area_latitude' id='area_latitude'value='".$area_latitude."'> <br>";
echo "<input type='text' name='area_longitude' id='area_longitude' value='".$area_longitude."'>";
?>
<script type="text/javascript">
var map;
var marker;
var area_latitude = $("#area_latitude").val();
var area_longitude = $("#area_longitude").val();
var myLatlng = new google.maps.LatLng(area_latitude, area_longitude);
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();
function initialize() {
var mapOptions = {
zoom: 18,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("txtHint"), mapOptions);
marker = new google.maps.Marker({
map: map,
position: myLatlng,
draggable: true
});
geocoder.geocode({
'latLng': myLatlng
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
$('#address').val(results[0].formatted_address);
$('#latitude').val(marker.getPosition().lat());
$('#longitude').val(marker.getPosition().lng());
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
}
}
});
google.maps.event.addListener(marker, 'dragend', function () {
geocoder.geocode({
'latLng': marker.getPosition()
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
$('#address').val(results[0].formatted_address);
$('#latitude').val(marker.getPosition().lat());
$('#longitude').val(marker.getPosition().lng());
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
}
}
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<?php }
?>
</body>
</html>
【问题讨论】：
-
您是否在控制台中收到任何 JS 错误？有地图出现吗？
-
删除这个：
"&callback=initMap"从您加载地图脚本的位置。当你做google.maps.event.addDomListener(window, 'load', initialize);时，你已经涵盖了这个 -
我删除了这个 "&callback=initMap" 但没有工作...
标签： javascript php mysql ajax google-maps