我有 3 个问题,第一个:如果我在 indiacom 黄页的右下角列表中选择 1 公里和 2 公里的银行等等,就会不断出现。第二个:如果我选择一公里的银行然后我选择两公里的银行第一组1公里的银行消失并且从1公里到2公里的银行只出现第三个:如果我选择1公里内的银行出现银行外圆直径1000米。
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=true&libraries=places"> </script>
<script>
var cityCircle;
var marker;
var clickmarker;
var latilong;
var map;
var infowindow = new google.maps.InfoWindow();
var myCenter;
var markers = [];
var circles = [];
google.maps.visualRefresh = true;
function initialize()
{
var styles = [
{
"stylers": [
{ "visibility": "on" },
{ "saturation": -40 },
{ "hue": "#F0FAFF" },
{ "weight": 1.7 }
]
}
]
myCenter=new google.maps.LatLng(13.0839, 80.2700);
var options = {
mapTypeControlOptions: {
mapTypeIds: ['Styled']
},
center:myCenter,
zoom: 14,
mapTypeId: 'Styled'
};
var div = document.getElementById('map-canvas');
map = new google.maps.Map(div, options);
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
map.mapTypes.set('Styled', styledMapType);
}
function setPlaces()
{
var placeType = document.getElementById('cmbMoreFunction').options[document.getElementById('cmbMoreFunction').selectedIndex].value;
var kiloDistance=document.getElementById('kilometers').options[document.getElementById('kilometers').selectedIndex].value ;
var request = {
location:myCenter,
radius: parseInt(kiloDistance),
types: [placeType]
};
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
for (var i = 0; i < circles.length; i++) {
circles[i].setMap(null);
}
for (var i = 0; i < results.length; i++) {
createMarker(results[i] , placeType);
}
}
}
function createMarker(place , placeType)
{
var placeLoc = place.geometry.location;
marker = new google.maps.Marker({
position: place.geometry.location
});
marker.setIcon({
url: placeType + '.png',
size: new google.maps.Size(70, 71),
anchor: new google.maps.Point(17, 14),
scaledSize: new google.maps.Size(35, 35)
});
marker.setMap(map);
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
markers.push(marker);
circles.push(cityCircle);
}
var circleOptions = {
map: map,
center: myCenter,
radius: parseInt(kiloDistance),
};
if (kiloDistance != -1) {
cityCircle = new google.maps.Circle(circleOptions);
};
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width: 90%; float:left"></div>
<div style="width: 10%; float:right">
<select id="cmbMoreFunction" onchange="setPlaces()" >
<option value="-1"><--Select--></option>
<option value="bank">Banks</option>
<option value="park">Parks</option>
<option value="store">Stores</option>
</select>
</div>
<select id="kilometers" onchange="setPlaces()" style="width: 10%; float:right">
<option value="-1"><--Select--></option>
<option value="1000">1 KM</option>
<option value="2000">2 KM</option>
<option value="3000">3 KM</option>
</select>
</body>
</html>