改變谷歌依賴於縮放級別地圖自定義圖像標記

Question

我使用mosne地圖（www.mosne.it/playground/mosne_map）

我想要做的是，每當用戶改變縮放級別< 10圖像將被改變。這是我現在得到： 目前只要用戶改變縮放級別

$.fn.mosne_map = function (options) { 

    var baseconf = { 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var s_infobox = { 
     content: "", 
     disableAutoPan: false, 
     maxWidth: 0, 
     pixelOffset: new google.maps.Size(-110, 5), 
     zIndex: null, 
     boxStyle: { 
      background: "url('images/infobox_top.png') top center no-repeat", 
      opacity: 1, 
      color: '#fff', 
      padding: '0', 
      width: "300px" 
     }, 
     closeBoxMargin: "16px 4px", 
     closeBoxURL: "images/infobox_close_hd2.png", 
     infoBoxClearance: new google.maps.Size(1, 1), 
     isHidden: false, 
     pane: "floatPane", 
     enableEventPropagation: false 
    }; 

    defaults = { 

     elements: '#list .maplocation', //links selector 
     map_opt: baseconf, // custom map options object 
     clat: -9.460181, // set the lat default map center 
     clng: 100.988281, // set the lng default map center 
     mapstyle_name: '', // custom map style label and id 
     mapstyle: '', // mapstyle object 
     cluster_styles: {}, // custom cluster icons object 
     marker_icon: {}, // custom marker icon url,width,height 
     infowindows: true, // shows infoWindows grabing html from the .infobox element 
     infobox: false, // enable custom infoWindows using infobox class 
     infobox_s: s_infobox, // default color scheme for custom infobox container 
     trigger: 'map_open', // you can set a event trigger for each link/marker 
     clickedzoom: 15, // set the zoom level when you click the single marker 
     timeout: 100, // delay between click and zoom on the single marker 
     mode: 'latlng', // switch mode 
     wait: 500, // timeout between geocode requests 
     maxtry: 10, // limit of time to bypass query overlimit 
     cat_style: {}, // costum icons and click zoom level 
     fitbounds: false, // on|off fit bounds 
     defzoom: 3, // default zoom level if fitbounds is off 
     showzoom: false, // bind current map zoom level event 
     before: function() {}, // before create map callback 
     after: function() {}, // after create map callback 
     afterUpdate: function() {} // after update map callback 
    }; 

    var settings = $.extend({}, defaults, options); 
    this.each(function() { 

     var map_el = $(this); 
     var the_map_el = $(this).get(0); 

     //on before 
     settings.before.apply(map_el); 





     //init map 
     var center = new google.maps.LatLng(settings.clat, settings.clng); 





     var map = new google.maps.Map(the_map_el, settings.map_opt); 
     var bounds = new google.maps.LatLngBounds(); 
     var markerCluster = new MarkerClusterer(map, null, settings.cluster_styles); 

     map.setCenter(center); 


     bounds.extend(center); 


     map.setZoom(settings.defzoom); 
     map.setCenter(center); 

     //apply map style 
     if (settings.mapstyle_name != '') { 
      var styledMapOptions = { 
       name: settings.mapstyle_name 
      }; 
      var m_MapType = new google.maps.StyledMapType(settings.mapstyle, styledMapOptions); 
      map.mapTypes.set(settings.mapstyle_name, m_MapType); 
      map.setMapTypeId(settings.mapstyle_name); 
     } 

     // set markers icons  
      var markerIcon = new google.maps.MarkerImage("http://googlemaps.googlermania.com/img/google-marker-big.png"); 



     // init infowindow 
     if (settings.infowindows) { 
      var infowindow = new google.maps.InfoWindow({ 
       maxWidth: 200 
      }); 
     } 

     // init infobox 
     if (settings.infobox) { 
      var boxText = document.createElement("div"); 
      boxText.style.cssText = settings.infobox_s_txt 
      boxText.innerHTML = "hello world"; 
      var m_box = new InfoBox(settings.infobox_s); 
     } 

     // function create marker 

     var _createMarker = function (el, latLng, markerIcon, m_name, cat) { 

      if (cat) { 
       var c_icon = settings.cat_style[cat]['icon']; 
       var c_icon_w = settings.cat_style[cat]['width']; 
       var c_icon_h = settings.cat_style[cat]['height']; 

       if (c_icon) { //var markerIcon = c_icon; 
        var markerIcon = new google.maps.MarkerImage(c_icon, null, null, null, new google.maps.Size(c_icon_w, c_icon_h)); 
       } 

      } 

      var marker = new google.maps.Marker({ 
       position: latLng, 
       icon: markerIcon, 
       flat: true, 
       title: m_name 
      }); 

      //extend bounds 
      bounds.extend(latLng); 

      // bind click on map trigger event fill infowindow/infobox content on demand 
      if (settings.infowindows || settings.infobox) { 
       var content = el.find('.infobox').html(); 
      } 

      google.maps.event.addListener(marker, 'click', function() { 

       if (settings.infowindows) { 
        infowindow.close(); 
        infowindow.setContent(content); 
        infowindow.open(map, marker); 
        map.setCentexxxr(marker.getPosition()); 
       } 
       if (settings.infobox) { 
        m_box.close(); 
        $(boxText).hide(); 
        m_box.setContent(content); 
        m_box.open(map, marker); 
        $(boxText).show("slow"); 
        map.setCentesr(marker.getPosition()); 
       } 

       el.trigger(settings.trigger); 

       $(el).parent().find('.active').removeClass('active'); 
       $(el).addClass('active'); 


       setTimeout(function() { 
        map.setZoom(settings.clickedzoom); 
        map.panTo(latLng); 
        marker.setAnimation(google.maps.Animation.DROP); 
       }, settings.timeout); 

      }); 

      // trigger click on list 
      $(el).find('.maplink').unbind("click").bind("click", function (e) { 
       e.preventDefault(); 
       google.maps.event.trigger(marker, "click"); 
       return false; 
      }); 

      markerCluster.addMarker(marker); 

     }; 

     var _m_geocode = function (el, geocoder, address, name, cat, j) { 

      geocoder.geocode({ 
       'address': address 
      }, function (results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
        latLng = results[0].geometry.location; 

        _createMarker(el, latLng, markerIcon, name, cat); 
        if (settings.fitbounds === true) { 
         map.fitBounds(bounds); 

        } 
       } else { 

        if (status === "OVER_QUERY_LIMIT") { 
         setTimeout(function() { 
          //console.log("trying again "+g_address); 
          j++; 
          if (j <= settings.maxtry) { 
           _m_geocode(el, geocoder, address, name, cat, j); 
          } else { 
           $(el).css({ 
            opacity: .35 
           }); 
          } 
         }, settings.wait); 

        } else if (status === "ZERO_RESULTS") { 
         $(el).css({ 
          opacity: .35 
         }); 
        } 

       } 
      }); 
     } 

     // 

     $(map_el).bind('update', function() { 

      //reset cluster and bounds 
      markerCluster.clearMarkers(); 
      bounds = null; 
      bounds = new google.maps.LatLngBounds(); 

      // markers loop  
      var markers = []; 
      var w_delay = 0; 

      if (settings.mode === 'address') { 
       var geocoder = new google.maps.Geocoder(); 
      } 


      var totel = $(settings.elements).length; 


      $(settings.elements).each(function (i) { 

       // create marker 
       var el = $(this); 

       //mode geocoding 
       if (settings.mode === 'address') { 

        var mkr = el.data(); 
        var name = $(this).find(".name").text(); 
        var address = $(this).find(".address").text(); 
        setTimeout(function() { 
         _m_geocode(el, geocoder, address, name, mkr.cat, 0); 
        }, settings.wait * i); 

       } else { 

        // mode latlng 
        var mkr = el.data(); 
        var latLng = new google.maps.LatLng(mkr.lat, mkr.lng); 
        _createMarker(el, latLng, markerIcon, mkr.name, mkr.cat); 

       } 

       //end of the elements loop 
      }); 

      if (settings.fitbounds === true) { 

       // log(bounds); 
       map.fitBounds(bounds); 
       if (totel == 1) { 
        map.setZoom(settings.clickedzoom); 
       } 
       if (totel == 0) { 
        map.setZoom(settings.defzoom); 
        map.setCenter(center); 
       } 
       // map.setCenter(center); 
      } else { 
       //map.setZoom(settings.defzoom); 
       //map.setCenter(center); 
      }; 


      //callbak afterUpdate 
      settings.afterUpdate.apply(map_el); 

     }).trigger('update'); 

     $(map_el).bind('bounds', function() { 
      map.fitBounds(bounds); 
     }); 

     // nice zoom status 
     if (settings.showzoom) { 

      google.maps.event.addListener(map, 'zoom_changed', function() { 
       $(map_el).trigger("showzoom", [map.getZoom()]); 
      }); 

     }; 




     //on after 
     settings.after.apply(map_el); 

     return true; 

     //change markerIcon 
     google.maps.event.addListener(map, 'zoom_changed', function() { 
      var zoom = map.getZoom(); 

      if (zoom <= 10) { 
       var markerIcon = new google.maps.MarkerImage("http://i.stack.imgur.com/B2Vg5.png"); 
      } 
      else { 
       var markerIcon = new google.maps.MarkerImage ("http://googlemaps.googlermania.com/img/google-marker-big.png") 
      } 
     }); 


    }); 




}; 

Answer 1

單個圖標（不是一個單一的標記簡單的解決方法，此方法將改變所有標記的圖標標記不會改變，但也有定義類別的標記）

這是目前定義了默認圖標的代碼的選項：

// set markers icons  
    var markerIcon = new google.maps.MarkerImage("http://googlemaps.googlermania.com/img/google-marker-big.png"); 

與此代碼替換它：

// set markers icons  
    var markerIcon = new google.maps.MVCObject(); 


    google.maps.event.addListener(map,'zoom_changed',function(){ 
    markerIcon.set('icon',(this.getZoom()<10) 
    ? 'http://www.google.com/mapfiles/marker.png'//url for zoom<10 
    : 'http://googlemaps.googlermania.com/img/google-marker-big.png'//url for zoom>=10 
    ); 
    }); 
    google.maps.event.trigger(map,'zoom_changed',{}); 

的markerIcon的URL現在當變焦改變

要更改應用到這些標記將這段代碼進行更新：

 var marker = new google.maps.Marker({ 
      position: latLng, 
      icon: markerIcon, 
      flat: true, 
      title: m_name 
     }); 

與.....

  var marker = new google.maps.Marker({ 
       position: latLng, 
       icon: markerIcon.icon, 
       flat: true, 
       title: m_name 
      }); 
      marker.bindTo('icon',markerIcon,'icon') ;