如何将标记限制在 google 地图 Javascript api 中的特定城市？

Question

我正在开发一个示例应用程序，以使用 javascript 代码处理所有 google 地图 API。目前我需要使用 Google 地图 API.

中的标记将用户限制在 select 特定城市（比如印度金奈）内的区域

我怎样才能做到这一点？我有一个使用标记 select 特定区域的代码，而且我还可以将搜索自动完成限制在特定国家/地区。但我需要地图以允许用户仅 select 特定城市（比如金奈 - 印度）内的区域。

这是代码片段。

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);
}

Demo Link

Answer 1

我使用折线和包含位置将边界限制在边界限制内。

  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
   }

完美运行。

如何将标记限制在 google 地图 Javascript api 中的特定城市？

How to limit marker to a Specific City in google map Javascript api?

javascript

google-maps

google-maps-markers

google-places-api

googleplacesautocomplete