Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

HOME > PHP > PHP Forum > รีห้อง ขอความอนุเคราห์แนะนำการปักหมุดบน google map ครับติดมาหลายวันแล้ว T T



 

รีห้อง ขอความอนุเคราห์แนะนำการปักหมุดบน google map ครับติดมาหลายวันแล้ว T T

 



Topic : 089881



โพสกระทู้ ( 3 )
บทความ ( 0 )



สถานะออฟไลน์




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> &nbsp; 
  <a href="javascript:overlay.setOpacity(50)">50%</a> &nbsp; 
  <a href="javascript:overlay.setOpacity(100)">100%</a> &nbsp;

  <span id="overlayToggle"></span>
</body>

</html>





จากโคดข้างบนจะได้ผลลัพธ์ http://www.usnaviguide.com/v3maps/ProjectedOverlayTest.htm

จากนั้นผมต้องการปักหมุดบนแผนที่ ที่ดราฟขึ้นมา เมื่อเอาเมาส์ไปชี้ก็แสดง infowindow เพื่อแสดง detail ครับ
ช่วยแนะนำหน่อยคับ



Tag : PHP, HTML/CSS, JavaScript, jQuery, JAVA







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2013-01-28 11:08:19 By : demokoe View : 1008 Reply : 1
 

 

No. 1



โพสกระทู้ ( 3 )
บทความ ( 0 )



สถานะออฟไลน์


โคดไฟล์ที่ชื่อ 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
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : รีห้อง ขอความอนุเคราห์แนะนำการปักหมุดบน google map ครับติดมาหลายวันแล้ว T T
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 02
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่