-2
미국 위에 맞춤 이미지를 구현하려고합니다. 기본적으로 미국에서만 표시되는 + 오버레이 이미지가 필요합니다.USA gmaps map integration
내가 할 수있는 일은 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/
감사합니다!
질문 자체에 모든 것을 포함 시키십시오. 피들을 포함하도록 편집 할 수도 있습니다. 댓글은 실제로 "댓글"에만 해당합니다. –
[image] (https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Finland_Regions_Map.svg/2000px-Finland_Regions_Map.svg)와 동일한 것으로 시작할 수 있습니다. .png). – geocodezip
@geocodezip 그건 문제가 아니에요 ... –