【发布时间】：2016-06-14 09:35:32
【问题描述】：
我正在尝试在美国之上实现自定义图像。 基本上，我只需要美国显示+覆盖图像就可以了。
我可以得到的工作是，100% 完全符合我的需要，但芬兰除外。 我不明白如何调整它，以同样的方式工作，但对于美国。
var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();
// Initialize the map and the custom overlay.
var myLatlng = new google.maps.LatLng(64.8, 24.8)
var myLatlng2 = new google.maps.LatLng(60, 24);
function initialize() {
var mapOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
backgroundColor: '#FFF',
disableDefaultUI: true,
draggable: false,
scaleControl: false,
scrollwheel: false,
styles: [
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "landscape",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "road",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative",
"stylers": [
{ "visibility": "off" }
]
},{
"elementType": "labels",
"stylers": [
{ "visibility": "off" }
]
},{
}
]
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
geocoder = new google.maps.Geocoder();
function codeAddress(address) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
codeAddress('Turku')
codeAddress('Naantali')
codeAddress('Oulu')
codeAddress('Imatra')
codeAddress('Mannerheimintie 2, Helsinki')
var swBound = new google.maps.LatLng(59.8, 19.3);
var neBound = new google.maps.LatLng(69.0, 31.2);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
var srcImage = 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Finland_Regions_Map.svg/2000px-Finland_Regions_Map.svg.png';
overlay = new USGSOverlay(bounds, srcImage, map);
}
// [END region_initialization]
// [START region_constructor]
/** @constructor */
function USGSOverlay(bounds, image, map) {
// Initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
// Define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div_ = null;
// Explicitly call setMap on this overlay.
this.setMap(map);
}
// [END region_constructor]
// [START region_attachment]
/**
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
*/
USGSOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
// Create the img element and attach it to the div.
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
img.style.position = 'absolute';
div.appendChild(img);
this.div_ = div;
// Add the element to the "overlayLayer" pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
// [END region_attachment]
// [START region_drawing]
USGSOverlay.prototype.draw = function() {
// We use the south-west and north-east
// coordinates of the overlay to peg it to the correct position and size.
// To do this, we need to retrieve the projection from the overlay.
var overlayProjection = this.getProjection();
// Retrieve the south-west and north-east coordinates of this overlay
// in LatLngs and convert them to pixel coordinates.
// We'll use these coordinates to resize the div.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's div to fit the indicated dimensions.
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
};
// [END region_drawing]
// [START region_removal]
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
// [END region_removal]
google.maps.event.addDomListener(window, 'load', initialize);
https://jsfiddle.net/gvvy5vxz/2/
提前致谢！
【问题讨论】：
-
请尝试在问题本身中包含所有内容，您也可以对其进行编辑以包含小提琴。评论真的只针对“cmets”
-
您可以从美国的image 开始。
-
@geocodezip 这不是问题...
-
那有什么问题呢？
-
@LubomirLubenov 不要向我们展示适用于芬兰的代码，向我们展示不适用于美国的代码。
标签： javascript jquery google-maps google-maps-api-3