Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,027

HOME > PHP > PHP Forum > เกี่ยวกับ Google map อยากให้ตัว marker สามารถลากได้แล้วบันทึกการแก้ไขได้

เกี่ยวกับ Google map อยากให้ตัว marker สามารถลากได้แล้วบันทึกการแก้ไขได้

เริ่มหัวข้อใหม่

moji125

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

อยากไห้ ตัว มาร์คเกอร์สามารถลากเพื่อแก้ไขตำแหน่งได้ ผมต้องใช้คำสั่งอะไรครับ ยกเลิกข้อมูลในฟิลนั้นทั้งหมดด้วยครับ

Code (PHP)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>แสดงแผนที่</title>
    <script src= "http://maps.google.com/maps?file=api&v=2&key=" type="text/javascript" ></script>
	<script src="file:///C|/Users/MOJI/Desktop/js/gmaps.CircleOverlay.js" type="text/javascript"></script>
    <script src="file:///C|/Users/MOJI/Desktop/js/gmaps.CircleOverlay.js" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    var circle = null;
    var circle2 = null;
    var map;
    var geocoder;

    var iconBlue = new GIcon(); 
    iconBlue.image = '../images/food.png';
    iconBlue.shadow = '../images/shadow.png';
    iconBlue.iconSize = new GSize(32, 37);
    iconBlue.shadowSize = new GSize(32, 37);
    iconBlue.iconAnchor = new GPoint(15, 45);
    iconBlue.infoWindowAnchor = new GPoint(5, 1);

    var icongreen = new GIcon(); 
    icongreen.image = '../images/home.png';
    icongreen.shadow = '../images/shadow.png';
    icongreen.iconSize = new GSize(32, 37);
    icongreen.shadowSize = new GSize(32, 37);
    icongreen.iconAnchor = new GPoint(15, 45);
    icongreen.infoWindowAnchor = new GPoint(5, 1);
	
    var iconred = new GIcon(); 
    iconred.image = '../images/measure.png';
    iconred.shadow = '../images/shadow.png';
    iconred.iconSize = new GSize(32, 37);
    iconred.shadowSize = new GSize(32, 37);
    iconred.iconAnchor = new GPoint(15, 45);
    iconred.infoWindowAnchor = new GPoint(5, 1);
	
	var iconwrite = new GIcon(); 
    iconwrite.image = '../images/shop.png';
    iconwrite.shadow = '../images/shadow.png';
    iconwrite.iconSize = new GSize(32, 37);
    iconwrite.shadowSize = new GSize(32, 37);
    iconwrite.iconAnchor = new GPoint(15, 45);
    iconwrite.infoWindowAnchor = new GPoint(5, 1);
	
	var iconblack = new GIcon(); 
    iconblack.image = '../images/drink.png';
    iconblack.shadow = '../images/shadow.png';
    iconblack.iconSize = new GSize(32, 37);
    iconblack.shadowSize = new GSize(32, 37);
    iconblack.iconAnchor = new GPoint(15, 45);
    iconblack.infoWindowAnchor = new GPoint(5, 1);
	
	var iconyellow = new GIcon(); 
    iconyellow.image = '../images/restaurant.png';
    iconyellow.shadow = '../images/shadow.png';
    iconyellow.iconSize = new GSize(32, 37);
    iconyellow.shadowSize = new GSize(32, 37);
    iconyellow.iconAnchor = new GPoint(15, 45);
    iconyellow.infoWindowAnchor = new GPoint(5, 1);
	
    var customIcons = [];
    customIcons["ร้านอาหาร"] = iconBlue;
    customIcons["โฮมสเตย์"] = icongreen;
	customIcons["วัด"] = iconred;
	customIcons["ร้านของที่ระลึก"] = iconwrite;
    customIcons["ร้านเครื่องดื่ม"] = iconblack;
	customIcons["ร้านของกิน"] = iconyellow;


     function load() {
      if (GBrowserIsCompatible()) {
	map = new GMap2(document.getElementById("map_canvas"));
	geocoder = new GClientGeocoder();
	map.addMapType(G_PHYSICAL_MAP);
	map.removeMapType(G_NORMAL_MAP);
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	map.setCenter(new GLatLng(13.42456,99.95671), 17);   

        GDownloadUrl("ajax_markers.php", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          var sidebar2 = document.getElementById('sidebar2');
    sidebar2.innerHTML = '';
    if (markers.length == 0) {
      sidebar2.innerHTML = 'No results found.';
      return;
    }

          var bounds = new GLatLngBounds();

          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")) ,
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, name, address, type);
            map.addOverlay(marker);
	
            var sidebarEntry = createSidebarEntry(marker, name, address);
            sidebar2.appendChild(sidebarEntry);
            bounds.extend(point);
          }
        });
    }
}

    function createMarker(point, name, address, type) {
      var marker = new GMarker(point, customIcons[type]);
	
	   GEvent.addListener(marker, "click", function() {
		
    		this.openInfoWindowHtml(" ชื่อสถานที่ : "+name+"<br>ที่อยู่: "+address+"<br>ประเภท: "+type+"<br>ละติจูด:"+this.getLatLng().lat()+"<br> ลองติจูด : "+this.getLatLng().lng()+"<br>QR Code:<br><img src='http://qrcode.kaywa.com/code/06FF0000/geo:"+this.getLatLng().lat()+","+this.getLatLng().lng()+"'/><br>");
	   
	   
      });
	  
      return marker;
    }
	
	
function createSidebarEntry(marker, name, address) {
  var div = document.createElement('div');
  var html = "<b>ชื่อ : " + name + "</b> <br/>ที่อยู่ : " + address +"<br/> ------------------------------";
  div.innerHTML = html;
  div.style.cursor = 'pointer';
  div.style.marginBottom = '5px';
  GEvent.addDomListener(div, 'click', function() {
    GEvent.trigger(marker, 'click');
  });
  GEvent.addDomListener(div, 'mouseover', function() {
    div.style.backgroundColor = '#eee';
  });
  GEvent.addDomListener(div, 'mouseout', function() {
    div.style.backgroundColor = '#fff';
  });
  return div;
}
    //]]>
  </script>
  <style type="text/css">
<!--
body {
	background-image: url(file:///C|/Users/MOJI/Desktop/picture/page1952.jpg);
}
.style1 {color: #FF0000}
.style2 {color: #FF9B9B}
.style3 {
	font-size: 14px;
	font-weight: bold;
}
.style4 {color: #0000FF}
.style5 {color: #00FF00}
-->
  </style></head>
 <body onload="load()" onunload="GUnload()">
  <table> 
    <tbody> 
      <tr id="cm_mapTR">
        <td height="402"> <div id="map_canvas" style="width: 600px; height: 400px"></div> </td>
		<td width="180" height="402" valign="top"><div align="center">สถานที่
		  </div>
	    <div id="sidebar2" style="overflow: auto; height: 362px; font-size: 11px; color: #000"></div> </td>
      </tr> 
    </tbody>
  </table>
  <form>
    <p class="style3">*
      <label for="label"></label>
      <img src="../images/restaurant.png" width="32" height="37" alt="" /> เป็น ร้านของกิน * <img src="../images/home.png" width="32" height="37" alt="" /> เป็น โฮมสเตย์ * <img src="../images/shop.png" width="32" height="37" alt="" />เป็น ร้านของที่ละลึก<br />
*
<label for="label2"></label>
<input type="image" name="imageField3" src="../images/food.png" id="label2" /> 
เป็น  ร้านอาหาร * <img src="../images/drink.png" width="32" height="37" alt="" /> เป็น ร้านเครื่องดื่ม * <img name="" src="../images/measure.png" width="32" height="37" alt="" /> เป็น วัด<br />
<label for="label2"></label>
    </p>
 </form>
 
?>
 
</body>
</html>

Tag : PHP

ประวัติการแก้ไข
2011-11-02 13:09:06

Date : 2011-11-02 13:02:45

By : siwarin125

View : 1086

Reply : 5

No. 1

moji125

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

.....

Date : 2011-11-02 21:35:34

By : siwarin125

No. 2

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

กำหนด event dragable ให้กับ marker ของเราครับ เพิ่มส่วนโค้ดตรงนี้

GEvent.addListener(marker, "click", function() {
this.openInfoWindowHtml(" ชื่อสถานที่ : "+name+"<br>ที่อยู่: "+address+"<br>ประเภท: "+type+"<br>ละติจูด:"+this.getLatLng().lat()+"<br> ลองติจูด : "+this.getLatLng().lng()+"<br>QR Code:<br><img src='http://qrcode.kaywa.com/code/06FF0000/geo:"+this.getLatLng().lat()+","+this.getLatLng().lng()+"'/><br>");
});
GEvent.addListener(marker, "dragable", function() {
// code

});

ผมจำไม่ได้แล้วว่า โค้ดมันเป็ฯอย่างไร แต่ลอง ค้นหาใน google ดูครับ เขามีเอกสาร เกี่ยวกับ dragable ไว้อยู่ ผมมีแต่ตัวอย่างของ google map version 3 เขียนไว้ ลองดุครับผม

https://www.thaicreate.com/php/forum/042628.html

Date : 2011-11-03 09:23:03

By : kalamell

No. 3

moji125

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

ขอบคุณครับจะลองศึกษาดูครับ

Date : 2011-11-04 10:04:55

By : siwarin125

No. 4

moji125

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

พี่พอจะมี code google map v2 ที่ใช้ค้นหาข้อมูลจากชื่อสถานที่ เช่นพิมไปว่า อัมพวา ก็จะมีมาร์คเกอร์ขึ้นที่อัมพวาแล้วมีป๊อบอัพโชว์ข้อมูล เช่น อำเภออัมพวา จังหวัดสมุทรสงคราม แล้วก็โชว์ละติจูดลองตูจูด หรือละติจูดลองติจูดอย่างเดียวก็ได้ พอจะมีไหมครับ

Date : 2011-11-04 10:12:33

By : siwarin125

No. 5

moji125

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

หรือ google map v3 ก็ได้ครับ

Date : 2011-11-04 10:16:15

By : siwarin125

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : เกี่ยวกับ Google map อยากให้ตัว marker สามารถลากได้แล้วบันทึกการแก้ไขได้

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก