2017-01-14 2 views
0

Я хочу Google Maps маркер, чтобы быть на фиксированном размере на определенном уровне масштабирования, как в этом примере: http://jsfiddle.net/bryan_weaver/4rxqQ/Предотвратить маркер от масштабирования при уменьшенном масштабе на

function initialize() { 
var map; 
var centerPosition = new google.maps.LatLng(38.713107, -90.42984); 
var options = { 
    zoom: 9, 
    center: centerPosition, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
map = new google.maps.Map($('#map')[0], options); 

var icon = 'https://www.google.com/mapfiles/marker_black.png'; 
var iconBounds = constructBounds(38.713107, -90.42984); 
var staticOverlay = new google.maps.GroundOverlay(icon, iconBounds); 
staticOverlay.setMap(map); 
} 

function constructBounds(lat, lng){ 
var sw = new google.maps.LatLng(lat - .03, lng - .025) 
var ne = new google.maps.LatLng(lat + .03, lng + .025) 
return new google.maps.LatLngBounds(sw, ne); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

Но есть более гладкое решение, чем в над Jsfiddle?

+0

Что не гладко? И каково ваше определение «гладкое»? – MrUpsidown

+0

@MrUpsidown Я думал, что это возможно, например, в новом google.maps.Marker. – Kristoffer

ответ

2

Основано на ваших комментариях: Да, вы можете решить его с помощью маркера, но в MarkerOptions нет опции «готового к использованию». Вместо этого вы можете добавить слушателя с изменением масштаба и установить новый масштаб значка маркера. Вместо GroundOverlay

var icon = 'https://www.google.com/mapfiles/marker_black.png'; 
var iconBounds = constructBounds(38.713107, -90.42984); 
var staticOverlay = new google.maps.GroundOverlay(icon, iconBounds); 
staticOverlay.setMap(map); 

вы бы использовать маркер

var icon = 'https://www.google.com/mapfiles/marker_black.png'; 
var marker = new google.maps.Marker({ 
    position: { 
     lat: 38.713107, 
     lng: -90.42984 
    }, 
    map: map, 
    icon: icon 
}); 

Тогда вы просто добавить изменения масштаба слушателю и рассчитать новый размер на основе уровня масштабирования:

//add a zoom change listener, so you can resize the icon based on the zoom level 
google.maps.event.addListener(map, 'zoom_changed', function() { 

    var zoom = map.getZoom(); 
    markerWidth = (zoom/9)*20 
    markerHeight = (zoom/9)*34 

    //set the icon with the new size to the marker 
    marker.setIcon({ 
     url: icon, 
     scaledSize: new google.maps.Size(markerWidth, markerHeight) 
    }); 
}); 

Из Конечно, вы можете изменить расчет, чтобы размер значка изменился по-другому. Я просто создал быстрый пример. Я только что обновил your fiddle.

+0

Большое спасибо! Прекрасно работает! – Kristoffer

+1

Класс 'MarkerImage' был устаревшим в пользу анонимного объекта' Icon' a ** long ** времени назад (после версии 3.10). – geocodezip

+0

Вы правы. Я просто обновил устаревший класс «MarkerImage» до «Значок». – mxlse

 Смежные вопросы

  • Нет связанных вопросов^_^