|
 |
| |
รีห้อง ขอความอนุเคราห์แนะนำการปักหมุดบน google map ครับติดมาหลายวันแล้ว T T |
| |
 |
|
|
 |
 |
|
Code (PHP)
<html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<head>
<title>Google Maps JavaScript API v3 Example: ProjectedOverlayTest </title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/ProjectedOverlay.js"></script>
<script type="text/javascript">
var overlay ;
var map ;
function initialize() {
var myLatlng = new google.maps.LatLng(40,-95);
var myOptions = {
key: 'ABQIAAAAByb5oO5JbZLYH7IiTtAHXxTbfPxAN9krmPiv-9pLuQOcizdM4RSXGaDADHRCrxdscYLOPZ4LEupvKA',
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
sensor: 'true'
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
overlayAdd() ;
}
// Add the overlay
function overlayAdd()
{
var sw = new google.maps.LatLng(25,-126) ;
var ne = new google.maps.LatLng(50,-66) ;
var bounds = new google.maps.LatLngBounds(sw,ne) ;
overlay = new ProjectedOverlay(map,'http://www.usnaviguide.com/ws-2008-02/images/us_counties_projected.png', bounds, {}) ;
document.getElementById("overlayToggle").innerHTML = '<a href="javascript:overlayRemove()">Remove Overlay</a>' ;
}
// Remove the overlay
function overlayRemove()
{
if ( !overlay )
{
return ;
}
overlay.remove() ;
overlay = null ;
document.getElementById("overlayToggle").innerHTML = '<a href="javascript:overlayAdd()">Add Overlay</a>' ;
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width:100%; height:90%"></div>
Opacity:
<a href="javascript:overlay.setOpacity(25)">25%</a>
<a href="javascript:overlay.setOpacity(50)">50%</a>
<a href="javascript:overlay.setOpacity(100)">100%</a>
<span id="overlayToggle"></span>
</body>
</html>
จากโคดข้างบนจะได้ผลลัพธ์ http://www.usnaviguide.com/v3maps/ProjectedOverlayTest.htm
จากนั้นผมต้องการปักหมุดบนแผนที่ ที่ดราฟขึ้นมา เมื่อเอาเมาส์ไปชี้ก็แสดง infowindow เพื่อแสดง detail ครับ
ช่วยแนะนำหน่อยคับ
Tag : PHP, HTML/CSS, JavaScript, jQuery, JAVA
|
|
|
 |
 |
 |
 |
| Date :
2013-01-28 11:08:19 |
By :
demokoe |
View :
1054 |
Reply :
1 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
โคดไฟล์ที่ชื่อ ProjectedOverlay
Code (PHP)
function ProjectedOverlay(map, imageUrl, bounds, opts)
{
google.maps.OverlayView.call(this);
this.map_ = map;
this.url_ = imageUrl ;
this.bounds_ = bounds ;
this.addZ_ = opts.addZoom || '' ; // Add the zoom to the image as a parameter
this.id_ = opts.id || this.url_ ; // Added to allow for multiple images
this.percentOpacity_ = opts.percentOpacity || 50 ;
this.setMap(map);
}
ProjectedOverlay.prototype = new google.maps.OverlayView();
ProjectedOverlay.prototype.createElement = function()
{
var panes = this.getPanes() ;
var div = this.div_ ;
if (!div)
{
div = this.div_ = document.createElement("div");
div.style.position = "absolute" ;
div.setAttribute('id',this.id_) ;
this.div_ = div ;
this.lastZoom_ = -1 ;
if( this.percentOpacity_ )
{
this.setOpacity(this.percentOpacity_) ;
}
panes.overlayLayer.appendChild(div);
}
}
// Remove the main DIV from the map pane
ProjectedOverlay.prototype.remove = function()
{
if (this.div_)
{
this.setMap(null);
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
}
// Redraw based on the current projection and zoom level...
ProjectedOverlay.prototype.draw = function(firstTime)
{
// Creates the element if it doesn't exist already.
this.createElement();
if (!this.div_)
{
return ;
}
var c1 = this.get('projection').fromLatLngToDivPixel(this.bounds_.getSouthWest());
var c2 = this.get('projection').fromLatLngToDivPixel(this.bounds_.getNorthEast());
if (!c1 || !c2) return;
// Now position our DIV based on the DIV coordinates of our bounds
this.div_.style.width = Math.abs(c2.x - c1.x) + "px";
this.div_.style.height = Math.abs(c2.y - c1.y) + "px";
this.div_.style.left = Math.min(c2.x, c1.x) + "px";
this.div_.style.top = Math.min(c2.y, c1.y) + "px";
// Do the rest only if the zoom has changed...
if ( this.lastZoom_ == this.map_.getZoom() )
{
return ;
}
this.lastZoom_ = this.map_.getZoom() ;
var url = this.url_ ;
if ( this.addZ_ )
{
url += this.addZ_ + this.map_.getZoom() ;
}
this.div_.innerHTML = '<img src="' + url + '" width=' + this.div_.style.width + ' height=' + this.div_.style.height + ' >' ;
}
ProjectedOverlay.prototype.setOpacity=function(opacity)
{
if (opacity < 0)
{
opacity = 0 ;
}
if(opacity > 100)
{
opacity = 100 ;
}
var c = opacity/100 ;
if (typeof(this.div_.style.filter) =='string')
{
this.div_.style.filter = 'alpha(opacity:' + opacity + ')' ;
}
if (typeof(this.div_.style.KHTMLOpacity) == 'string' )
{
this.div_.style.KHTMLOpacity = c ;
}
if (typeof(this.div_.style.MozOpacity) == 'string')
{
this.div_.style.MozOpacity = c ;
}
if (typeof(this.div_.style.opacity) == 'string')
{
this.div_.style.opacity = c ;
}
}
|
| |
|
|
| |
| Date :
2013-01-28 15:58:54 |
By :
demokoe |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 04
|
