我正在开发一个示例应用程序，以使用javascript代码与所有googlemapneneneba API一起工作。目前，我需要限制用户使用谷歌地图API中的标记仅选择特定城市内的区域(如Chennai-India(。
我怎样才能做到这一点？我有一个使用标记选择特定区域的代码，而且我可以将搜索自动完成限制在特定国家/地区。但我需要地图允许用户只选择特定城市内的区域(比如印度钦奈(。
这是代码Snippet。
Location: <input type="text" id="us2- address" style="width: 200px"/>
<div id="us2" style="width: 500px; height: 400px;"></div>
Lat.: <input type="text" id="us2-lat"/>
Long.: <input type="text" id="us2-lon"/>
//Plugin used: https://github.com/Logicify/jquery-locationpicker-plugin
$('#us2').locationpicker({
enableAutocomplete: true,
enableReverseGeocode: true,
radius: 0,
inputBinding: {
latitudeInput: $('#us2-lat'),
longitudeInput: $('#us2-lon'),
radiusInput: $('#us2-radius'),
locationNameInput: $('#us2-address')
},
onchanged: function (currentLocation, radius, isMarkerDropped) {
var addressComponents = $ (this).locationpicker('map').location.addressComponents;
console.log(currentLocation); //latlon
updateControls(addressComponents); // Data
}
});
function updateControls(addressComponents) {
console.log(addressComponents);
}
演示链接
我使用多边形线和包含位置将边界限制在边界限制内。
map = new google.maps.Map(document.getElementById('us2'), {
center: { lat: 8.8052602, lng: 78.1452745 }, // tuty Center point
//center: { lat: 8.7295261, lng: 77.6852354 },// Tirunelveli Center point
zoom: 18
});
var TutyCoordinates = [{ lng:77.829907599999999, lat: 9.231779}, { lng:77.840165900000002, lat: 9.236239100000001}, { lng:77.863804500000001, lat: 9.232225}, { lng:77.869602599999993, lat: 9.2183986}, { lng:77.858898400000001, lat: 9.2157225}, { lng:77.862912499999993, lat: 9.195652000000001}, { lng:77.884129999999999, lat: 9.191744099999999}, { lng:77.898593399999996, lat: 9.188961900000001}, { lng:77.912419700000001, lat: 9.211262400000001}, { lng:77.926692099999997, lat: 9.2076943}, { lng:77.929814199999996, lat: 9.218844600000001}, { lng:77.937842399999994, lat: 9.2183986}, { lng:77.938734400000001, lat: 9.2389151}, { lng:77.966833100000002, lat: 9.2433753}, { lng:77.9730773, lat: 9.2589857}, { lng:77.992701800000006, lat: 9.2621077}, { lng:77.994485800000007, lat: 9.2937745}, { lng:78.034180899999996, lat: 9.293328499999999}, { lng:78.017678399999994, lat: 9.3200892}, { lng:78.034180899999996, lat: 9.331685500000001}, { lng:78.041317000000006, lat: 9.349971999999999}, { lng:78.063171600000004, lat: 9.3446198}, { lng:78.1309653, lat: 9.3597842}, { lng:78.151481899999993, lat: 9.356662200000001}, { lng:78.149697799999998, lat: 9.341943799999999}, { lng:78.156834000000003, lat: 9.325887399999999}, { lng:78.192068899999995, lat: 9.3138451}, { lng:78.195637000000005, lat: 9.2910985}, { lng:78.206341300000005, lat: 9.284408300000001}, { lng:78.264768799999999, lat: 9.2745961}, { lng:78.263430700000001, lat: 9.2634458}, { lng:78.312938000000003, lat: 9.2496194}, { lng:78.3157614, lat: 9.156544200000001}, { lng:78.392413500000004, lat: 9.0979598}, { lng:78.544844600000005, lat: 8.847432400000001}, { lng:78.462984399999996, lat: 8.3509013}, { lng:78.361229600000001, lat: 8.160451699999999}, { lng:78.103627900000006, lat: 8.0409615}, { lng:77.960848799999994, lat: 8.325357}, { lng:77.963265000000007, lat: 8.3290518}, { lng:77.8936329, lat: 8.3134915}, { lng:77.883429000000007, lat: 8.311211399999999}, { lng:77.870940700000006, lat: 8.3138874}, { lng:77.865142500000005, lat: 8.3384181}, { lng:77.863173599999996, lat: 8.3386722}, { lng:77.851316199999999, lat: 8.340202100000001}, { lng:77.8423959, lat: 8.3303899}, { lng:77.837935799999997, lat: 8.333065899999999}, { lng:77.840165900000002, lat: 8.3460003}, { lng:77.8320109, lat: 8.344451299999999}, { lng:77.828123599999998, lat: 8.3437702}, { lng:77.829461600000002, lat: 8.3526904}, { lng:77.822325399999997, lat: 8.3535825}, { lng:77.835259800000003, lat: 8.3620567}, { lng:77.815189200000006, lat: 8.371868900000001}, { lng:77.837935799999997, lat: 8.375437}, { lng:77.839719900000006, lat: 8.389263400000001}, { lng:77.829461600000002, lat: 8.410671900000001}, { lng:77.813851200000002, lat: 8.420930200000001}, { lng:77.8200954, lat: 8.4396627}, { lng:77.812513199999998, lat: 8.444122800000001}, { lng:77.822325399999997, lat: 8.460179200000001}, { lng:77.8200954, lat: 8.4731135}, { lng:77.8111751, lat: 8.477573599999999}, { lng:77.802700900000005, lat: 8.507456400000001}, { lng:77.788428600000003, lat: 8.5208367}, { lng:77.800916900000004, lat: 8.531095000000001}, { lng:77.792888700000006, lat: 8.5587477}, { lng:77.777278300000006, lat: 8.5533956}, { lng:77.783968400000006, lat: 8.564991900000001}, { lng:77.763451900000007, lat: 8.571681999999999}, { lng:77.768804099999997, lat: 8.612715100000001}, { lng:77.775940199999994, lat: 8.602456800000001}, { lng:77.785752500000001, lat: 8.6033489}, { lng:77.800024899999997, lat: 8.621189299999999}, { lng:77.800024899999997, lat: 8.638583799999999}, { lng:77.787982499999998, lat: 8.6354617}, { lng:77.786644499999994, lat: 8.6399218}, { lng:77.797794800000005, lat: 8.660438299999999}, { lng:77.806269, lat: 8.6617763}, { lng:77.805823000000004, lat: 8.668912499999999}, { lng:77.792888700000006, lat: 8.670250599999999}, { lng:77.808053099999995, lat: 8.7215419}, { lng:77.798240800000002, lat: 8.7607909}, { lng:77.828123599999998, lat: 8.7759553}, { lng:77.833921700000005, lat: 8.791119699999999}, { lng:77.801362900000001, lat: 8.8268006}, { lng:77.791996600000004, lat: 8.861143500000001}, { lng:77.777724300000003, lat: 8.8722937}, { lng:77.754531700000001, lat: 8.869617699999999}, { lng:77.743827400000001, lat: 8.877645899999999}, { lng:77.743381400000004, lat: 8.9128808}, { lng:77.728217000000001, lat: 8.922247}, { lng:77.713052599999997, lat: 8.9115427}, { lng:77.686291900000001, lat: 8.9106507}, { lng:77.676033700000005, lat: 8.9186789}, { lng:77.673357600000003, lat: 8.9458856}, { lng:77.663099299999999, lat: 8.956143900000001}, { lng:77.674249599999996, lat: 8.9695242}, { lng:77.686291900000001, lat: 8.9579279}, { lng:77.702794400000002, lat: 8.954359800000001}, { lng:77.7034515, lat: 8.9565786}, { lng:77.703747699999994, lat: 8.9608072}, { lng:77.704338699999994, lat: 8.9651672}, { lng:77.713052599999997, lat: 8.9735383}, { lng:77.708420200000006, lat: 8.9833181}, { lng:77.705024399999999, lat: 8.990486799999999}, { lng:77.686104200000003, lat: 8.993558999999999}, { lng:77.683992099999998, lat: 8.99339}, { lng:77.682718100000002, lat: 8.9934197}, { lng:77.680493799999994, lat: 8.9913788}, { lng:77.672741799999997, lat: 8.996223799999999}, { lng:77.669789499999993, lat: 8.998068999999999}, { lng:77.678709699999999, lat: 9.0069892}, { lng:77.675141699999998, lat: 9.019477500000001}, { lng:77.694320099999999, lat: 9.0337499}, { lng:77.684061900000003, lat: 9.051144300000001}, { lng:77.687184000000002, lat: 9.061848599999999}, { lng:77.718404800000002, lat: 9.0600646}, { lng:77.727324999999993, lat: 9.0663087}, { lng:77.722864900000005, lat: 9.093515399999999}, { lng:77.705024399999999, lat: 9.0961915}, { lng:77.677371699999995, lat: 9.0899473}, { lng:77.660423300000005, lat: 9.0948534}, { lng:77.657747200000003, lat: 9.1256282}, { lng:77.683615900000007, lat: 9.1256282}, { lng:77.673803599999999, lat: 9.142130699999999}, { lng:77.688075999999995, lat: 9.158633099999999}, { lng:77.689413999999999, lat: 9.1760275}, { lng:77.720188800000003, lat: 9.1751355}, { lng:77.727771000000004, lat: 9.150604899999999}, { lng:77.771034099999994, lat: 9.1528349}, { lng:77.787982499999998, lat: 9.165769299999999}, { lng:77.824109500000006, lat: 9.156402999999999}, { lng:77.824555500000002, lat: 9.173351500000001}, { lng:77.836151799999996, lat: 9.171121400000001}, { lng:77.842841899999996, lat: 9.1845017}, { lng:77.829907599999999, lat: 9.231779}];
flightPath = new google.maps.Polyline({
path: TutyCoordinates,
geodesic: true,
strokeColor: '#0c82ff',
strokeOpacity: 1.0,
strokeWeight: 1
});
flightPath.setMap(map);
bermudaTriangle = new google.maps.Polygon({ paths: TutyCoordinates });
google.maps.event.addListener(map, 'click', function (e) {
var clickedLocation = e.latLng;
//If the marker hasn't been added.
if (marker === false) {
//Create the marker.
var Containsflag = google.maps.geometry.poly.containsLocation(e.latLng,
bermudaTriangle) ? true : false;
if (Containsflag) {
marker = new google.maps.Marker({
position: clickedLocation,
map: map,
draggable: true //make it draggable
});
marker.setVisible(true);
}
else
{
//your code
}
//Listen for drag events!
google.maps.event.addListener(marker, 'dragend', function (event) {
var Containsflag =
google.maps.geometry.poly.containsLocation(event.latLng, bermudaTriangle) ?
true : false;
if (Containsflag)
{
marker.setVisible(true);
var geocoder = geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'latLng': event.latLng }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
$('#ModalAddress').val(results[1].formatted_address);
}
}
});
markerLocation();
document.getElementById("ModalOkButton").disabled = false;
}
else
{
marker.setVisible(false);
document.getElementById('us2-lat').value = ""; //latitude
document.getElementById('us2-lon').value = ""; //longitude
$('#ModalAddress').val("");
alert("Please Select a Location inside the city limit!");
}
function markerLocation() {
//Get location.
var currentLocation = marker.getPosition();
//Add lat and lng values to a field that we can save.
document.getElementById('us2-lat').value = currentLocation.lat(); //latitude
document.getElementById('us2-lon').value = currentLocation.lng(); //longitude
}
它工作得很完美。