<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Adding a Custom Overlay</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
<link rel="stylesheet" media="screen" href="class.css">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
// [START region_initialization]
// This example creates a custom overlay called USGSOverlay, containing
// a U.S. Geological Survey (USGS) image of the relevant area on the map.
// Set the custom overlay object's prototype to a new instance
// of OverlayView. In effect, this will subclass the overlay class.
// Note that we set the prototype to an instance, rather than the
// parent class itself, because we do not wish to modify the parent class.
var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();
// Initialize the map and the custom overlay.
function initialize() {
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(24.164577, 120.637874),
scrollwheel: false,
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var swBound = new google.maps.LatLng(24.164577, 120.637874);
var neBound = new google.maps.LatLng(24.164577, 120.637874);
//var swBound = new google.maps.LatLng(24.167000, 120.636000);
//var neBound = new google.maps.LatLng(24.167000, 120.638000);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
//var srcImage = 'https://developers.google.com/maps/documentation/javascript/';
//srcImage += 'examples/full/images/talkeetna.png';
//overlay = new USGSOverlay(bounds, srcImage, map);
overlay = new USGSOverlay(bounds, map);
//google.maps.event.addListener(map, 'zoom_changed', function () {
// zoomLevel = map.getZoom();
// if (zoomLevel == 16) {
// $("#circle").show();
// } else {
// $("#circle").hide();
// }
//});
}
function USGSOverlay(bounds, map) {
//this.bounds_ = bounds;
//this.image_ = image;
//this.map_ = map;
//this.div_ = null;
this.setMap(map);
}
USGSOverlay.prototype.onAdd = function() {
var div = document.getElementById('circle');
//this.div_ = document.getElementById('circle');
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
USGSOverlay.prototype.draw = function() {
var overlayProjection = this.getProjection();
//var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
//var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
var sw = new google.maps.LatLng(24.186077, 120.637874);
var ne = new google.maps.LatLng(24.166077, 120.637874);
};
//USGSOverlay.prototype.onRemove = function() {
// this.div_.parentNode.removeChild(this.div_);
// this.div_ = null;
//};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="circle" class="clusterer-root" style="padding: 14.0984538459778px; top: 182.153059892356px; left: 990.440223284066px; width: 117.487115383148px; height: 117.487115383148px;">
<div style="font-size: 33.4603304611206px; padding-top: 29.4952813014778px;">Amy</div>
</div>
</body>
</html>
留言列表
