我正在尝试在谷歌地图中创建一个工具，该工具显示一个圆圈中的标记数量（由PHP编码连接加载到MySQL数据库），该圆圈使用搜索框放置。这很好，感谢几个星期前我在这个网站上收到的帮助。从那时起，我花了几天时间（开启和关闭）尝试将圆的半径更改为输入到已放置在地图上的用户输入框中的值。
输入框的on click函数抛出错误，表示函数未定义。我相信这是因为名为'updateRadius（）'的函数中存在错误，它无法找到我在代码中先前声明的circle变量。
我希望有人可以就此提出建议。谢谢。请参阅以下代码：
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Using MySQL and PHP with Google Maps</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 75%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
/*Styles for Search Box*/
#description {
font-family: Roboto;
font-size: 15px;
font-weight: 300;
}
#infowindow-content .title {
font-weight: bold;
}
#infowindow-content {
display: none;
}
#map #infowindow-content {
display: inline;
}
.pac-card {
margin: 10px 10px 0 0;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
background-color: #fff;
font-family: Roboto;
}
#pac-container {
padding-bottom: 12px;
margin-right: 12px;
}
.pac-controls {
display: inline-block;
padding: 5px 11px;
}
.pac-controls label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 400px;
}
#pac-input:focus {
border-color: #4d90fe;
}
#title {
color: #fff;
background-color: #4d90fe;
font-size: 25px;
font-weight: 500;
padding: 6px 12px;
}
#target {
width: 345px;
}
/*Add Styles Radius input box here*/
.map-control {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
font-family: 'Roboto','sans-serif';
margin: 10px;
/* Hide the control initially, to prevent it from appearing
before the map loads. */
display: none;
}
/* Display the control once it is inside the map. */
#map .map-control { display: block; }
.selector-control {
font-size: 14px;
line-height: 30px;
padding-left: 5px;
padding-right: 5px;
}
</style>
</head>
<body>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
<input id="rad" placeholder="Radius" value="200"></input>
<input id="radius" type="button" value="Click" onclick="updateRadius()"/>
<script>
var image = 'http://maps.google.com/mapfiles/kml/pal4/icon57.png';
/*var customLabel = {
TE: {
label: 'T' }
};*/
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(40.784032, -73.964436),
zoom: 12,
mapTypeControl: false
});
var infoWindow = new google.maps.InfoWindow;
// 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());
});
// Add a style-selector control to the map.
//var styleControl = document.getElementById('style-selector-control');
//map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(styleControl);
var inputBox = document.getElementById('rad');
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(inputBox)
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(radius)
//var searchBox = new google.maps.places.SearchBox(input);
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
var circle = new google.maps.Circle ({
map: map,
//center: new google.maps.LatLng (40.758789, -73.978717),
radius: 200,
strokeColor: "#00ff00",
fillcolor: "red",
editable: true
});
google.maps.event.addListener(searchBox, 'places_changed', function() {
var place = searchBox.getPlaces()[0];
if (!place.geometry) return;
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
circle.setCenter(place.geometry.location);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
});
function updateRadius(){
var radi = document.getElementById('rad').value;
circle.setRadius(parseFloat(radi));
}
// Change this depending on the name of your PHP or XML file
downloadUrl('googleMap.php', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('name');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('type');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
/*var icon = customLabel[type] || {};*/
var marker = new google.maps.Marker({
map: map,
position: point,
/*label: icon.label,*/
icon: image
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=&libraries=places&callback=initAutocomplete"
async defer></script>
</body>
</html>
此问题是由于函数的嵌套造成的。基本上你有这个：
<body>
<input id="radius" onclick="updateRadius()"/>
<script>
function initAutocomplete() {
var circle = new google.maps.Circle ({...});
updateRadius() {...}
}
</body>
在这种情况下，updateRadius需要访问它所拥有的circle，因为它们都在相同的范围内（initAutocomplete的范围。问题是因为它们是在initAutocomplete中定义的，所以它们在该函数之外是不可见的。你的输入尝试调用updateRadius，但它无法访问initAutocomplete的范围，这就是你得到错误的原因。解决这个问题的一个简单方法就是将updateRadius添加到window（基本上使它成为一个全局变量）。这不是一个大型站点的理想解决方案，但可能解决您的问题。您可以通过更改此设置：
function updateRadius() {
...
}
进入这个：
window.updateRadius = function() {
...
}
希望有所帮助，如果您需要我澄清一些事情，请告诉我。