Javascript программа для ограничения масштабирования на карте Google

Question

Я собираюсь включить карту Google в свое веб-приложение и буду использовать маркеры. Карта работает отлично, проблема в том, что я хочу ограничить уровень масштабирования для полигонов, таких как квадрат, звезда, треугольник, а не для круга, пиндропа. Я не знаю, как сделать это в JavaScript, кто-нибудь может помочь?

Это скрипт, который я использую:

 `<script type="text/javascript">
  success: function (data)

{
   {

        var markers = data;
        if (markers.length == 0)
        {
            var mapProp =
                {

                    center: new google.maps.LatLng(29.318598, 47.954674),
                   zoom: gZoom, 
                    mapTypeId: google.maps.MapTypeId.HYBRID
               };
       }


        else {
            var mapProp = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),


              zoom: gZoom, 
                maxZoom: 17,
              mapTypeId: google.maps.MapTypeId.HYBRID 
            };
        }


      var infoWindow = new google.maps.InfoWindow(); 
        var _gmap = {};
        if (gMap == null)
       {
            gMap = new google.maps.Map(document.getElementById("googleMap"), mapProp);


       } 
       else 
        {

           for (var i = 0; i < markersPoint.length; i++) 
            {
              markersPoint[i].setMap(null);  
            }

           gMap.setOptions('center', new google.maps.LatLng(markers[0].lat, markers[0].lng)); 
       } 

        gZoom = gMap.getZoom();
      mZoom = gMap.setZoom(17); 
       var bounds = new google.maps.LatLngBounds(); 

       markersPoint = []; 
       for (i = 0; i < markers.length; i++) 
        {
            var marker;
            var CurrData = markers[i]
            var colour = CurrData.Colour;
            if (colour == "NULL")
                colour = "#000000";
            var CurrLatlong = new google.maps.LatLng(CurrData.lat, CurrData.lng);

            var pathShape = GetCordShape(CurrData.lat, CurrData.lng, CurrData.Shape);

            var pinSVGFilled = "M 12,2 C 8.1340068,2 5,5.1340068 5,9 c 0,5.25 7,13 7,13 0,0 7,-7.75 7,-13 0,-3.8659932 -3.134007,-7 -7,-7 z";
            _path = google.maps.SymbolPath.CIRCLE;

            if (CurrData.Shape == "Circle" || CurrData.Shape == "Pindrop")

            {
                if (CurrData.Shape == "Pindrop")
                {
                    marker = new google.maps.Marker({
                        position: CurrLatlong,
                        map: gMap,
                        title: CurrData.Bhname,
                        icon: {
                            path: pinSVGFilled,
                            scale: 1,
                            fillColor: colour,
                            fillOpacity: 0.8,
                            strokeWeight: 0.9
                        }
                    });
                }

                else {

                    marker = new google.maps.Marker({
                        position: CurrLatlong,
                        map: gMap,
                        title: CurrData.Bhname,
                        icon: {
                            path: _path,
                            scale: 5,
                            fillColor: colour,
                            fillOpacity: 0.8,
                            strokeOpacity: 0.8,
                            strokeWeight: 0.9
                        }
                    });
                }

            }

            else {
                marker = new google.maps.Polygon
                    ({
                        map: gMap,
                        paths: pathShape,
                        scale: 5,
                        strokeOpacity: 0.3,
                        title: CurrData.Bhname,
                        strokeWeight: 1,
                        fillColor: colour,
                        fillOpacity: 0.8,
                        radius: 10,
                        position: CurrLatlong,
                        hover: CurrData.Bhname

                    });
            }


            bounds.extend(CurrLatlong);
            markersPoint.push(marker); 

`

Answer 1

проверьте это jsfiddle пример

html:

    <h1>Map</h1>

<div id="map_canvas"></div>

jquery + javascript:

    var infowindow = null;
var gmarkers = [];

var defaultIcon = {url: 'http://maps.google.com/mapfiles/ms/micons/red-dot.png',
// This marker is 32 pixels wide by 32 pixels tall.
                   size: new google.maps.Size(32, 32),
// The origin for this image is 0,0.
                   origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at 0,32.
                   anchor: new google.maps.Point(16, 32)};

var activeIcon = {url: 'http://maps.google.com/mapfiles/ms/micons/yellow-dot.png',
// This marker is 20 pixels wide by 32 pixels tall.
                  size: new google.maps.Size(32, 32),
// The origin for this image is 0,0.
                  origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at 0,32.
                  anchor: new google.maps.Point(16, 32)};

                  // Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var shape = {
    coord: [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 7, 23, 8, 26, 9, 30, 9, 34, 11, 34, 11, 30, 12, 26, 13, 24, 14, 21, 16, 18, 18, 16, 20, 12, 20, 8, 18, 4, 16, 2, 15, 1, 13, 0],
    type: 'poly'
};

$(document).ready(function () {
    initialize();
});

function initialize() {

    var centerMap = new google.maps.LatLng(39.828175, -98.5795);

    var myOptions = {
        zoom: 4,
        center: centerMap,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    setMarkers(map, sites);
    infowindow = new google.maps.InfoWindow({
        content: "loading..."
    });

    var bikeLayer = new google.maps.BicyclingLayer();
    bikeLayer.setMap(map);
}

var sites = [
    ['Mount Evans', 39.58108, -105.63535, 4, 'This is Mount Evans.','custom'],
    ['Irving Homestead', 40.315939, -105.440630, 2, 'This is the Irving Homestead.','normal'],
    ['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park','normal'],
    ['Flatirons in the Spring', 39.99948, -105.28370, 3, 'These are the Flatirons in the spring.','normal']
];



function setMarkers(map, markers) {

    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var marker1 = "";
        var marker = "";
        console.log(sites);
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        if(sites[3] == 1){
        var marker1 = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            title: sites[0],
            icon: defaultIcon,
            zIndex: sites[3],
            html: sites[4],
            class:sites[5]
        });
         var contentString = "Some content";
         google.maps.event.addListener(marker1, "click", function () {
            for (var i = 0; i < gmarkers.length; i++) {
                gmarkers[i].setIcon(defaultIcon);  
            }
            this.setIcon(activeIcon);
            map.setZoom(7);
            map.setCenter(marker1.getPosition()); 
        });
        gmarkers.push(marker1);
        }else{

         var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            title: sites[0],
            icon: defaultIcon,
            zIndex: sites[3],
            html: sites[4],
            class:sites[5]
        });
         var contentString = "Some content";
          google.maps.event.addListener(marker, "click", function () {
            for (var i = 0; i < gmarkers.length; i++) {
                gmarkers[i].setIcon(defaultIcon);  
            }
            this.setIcon(activeIcon);
            map.setZoom(2);
            map.setCenter(marker.getPosition()); 
        });
         gmarkers.push(marker);
        }
    }
}

css:

html,body,#map_canvas{
height:100%;
    margin:0;
}
img[src^='http://www.google.com/mapfiles/marker.png?i=']{
  opacity: 0.5
}

В этом примере показано увеличение до 7 уровня для национального парка бесплодных земель, для других мест уровень масштабирования равен 2. Так что нажмите на маркер и увидите разные уровни увеличения для другого маркера.