这是我的代码实际工作,但现在我想要创建该地图的副本,完全相同,但它会稍微小一点并隐藏在某个窗口大小。
如何更改代码以实现该目标?
(也可以在#google-map-mobile
容器中创建完全重复的地图)
$(function(window, document, $) {
var map,
lat = XXX,
lng = XXX,
$location = $('#google-map-desktop');
//$location2 = $('#google-map-mobile');
// Google Map init
$(document).ready(function() {
$location
.parent()
.fadeIn(500, function() {
locationInitialize($location);
// Disable map drag on touch devices
if (Modernizr.touch) {
map.setOptions({ draggable: false });
}
});
});
// Google Map reposition center
var resizeTimeout;
this.pageReady = function(e) {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function() {
locationSetCenter($location);
}, 250);
}
if (window.addEventListener) {
window.addEventListener('resize', this.pageReady, false);
window.addEventListener('orientationchange', this.pageReady, false);
} else if (window.attachEvent) {
window.attachEvent('resize', this.pageReady);
window.attachEvent('orientationchange', this.pageReady);
}
// Google Map
function locationInitialize($this) {
// Map Location
var mapCenter = new google.maps.LatLng( lat, lng );
// Style Map
var styles = [{
stylers: [{ saturation: -90 }]
}]
var styledMap = new google.maps.StyledMapType( styles, { name: '{{ siteName }}' } );
// Map Options
var mapOptions = {
zoom: 16,
center: mapCenter,
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_TOP
},
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
map = new google.maps.Map( document.getElementById( $this.attr('id') ), mapOptions );
// Add Map style
map.mapTypes.set( 'map_style', styledMap );
map.setMapTypeId( 'map_style' );
// Change map center position
locationSetCenter($this);
// Add Map marker
var marker = new google.maps.Marker({
position: mapCenter,
map: map
});
}
function locationSetCenter($this) {
var mapCenter = new google.maps.LatLng( lat, lng );
google.maps.Map.prototype.setCenterWithOffset = function( mapCenter, offsetX, offsetY ) {
var map = this;
var ov = new google.maps.OverlayView();
ov.onAdd = function() {
var proj = this.getProjection();
var aPoint = proj.fromLatLngToContainerPixel( mapCenter );
aPoint.x = aPoint.x + offsetX;
aPoint.y = aPoint.y + offsetY;
map.panTo( proj.fromContainerPixelToLatLng( aPoint ) );
};
ov.draw = function() {};
ov.setMap( this );
};
from_left = ($this.width() < 940) ? 0 : $this.width() / 4;
map.setCenterWithOffset( mapCenter, from_left, 0 );
}
}(this, this.document, this.jQuery));
答案 0 :(得分:1)
你需要创建第二个变量,例如。 var map2而不是创建第二个对象:
map2 = new google.maps.Map...