PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum


Google map maker หลายๆสี

Google map maker หลายๆสี
ขอสอบถามคะ พอดีคือจะทำแผนที่ goole map เกี่ยวกับข้อมูลสิ่งมีชีวิตคะ ผู้ใช้จะกรอกข้อมูลสิ่งมีชีวิตลงไป ใน TextFiled และจะให้ผู้ใช้เลือกชนิดสิ่งมีชีวิตลงไปโดย ใช้เป็น dropdown ในการเลือกชนิด เช่น สัตว์บก สัตว์นำ้ สัตว์เลื้อยคลาน  โดยในการเลือกชนิดของสิ่งมีชีวิตในแต่ละกลุ่มนั้นจะปักหมุด คนละสีกัน พอจะมีแนวทางบ้างไหมคะ


โดย:  Jsk IP: 183.89.31.xxx วันที่: 20-04-2017 เวลา: 15:00:13

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 1
 หน้านี้จะเป็นในส่วนของการเลือกข้อมูล

<div class="form-group">
    <label for="type_animal">ประเภทของสัตว์</label>
     <select name="type_animal" id="type_animal" class="form-control">
     <?php
    $type_animal = 
array("สัตว์มีกระดูกสันหลัง","สัตว์ไม่มีกระดูกสันหลัง");
foreach($type_animal as $animal){
echo "<option value=$animal>$animal</option>";
 
}
 
    ?>
    
    </select>  


โดย:  Jsk IP: 122.154.60.xxx วันที่: 20-04-2017 เวลา: 20:02:43
 ความคิดเห็นที่ 2
จะนำมาดัดแปลงกับหน้านี้ยังไงคะ



<?php
require_once 'Connect.php';
$sql = "select * from $animal" ;
$dbquery = mysql_db_query($dbname,$sql);
$result = mysql_fetch_array($dbquery);
$i = 0 ;
while($result = mysql_fetch_array($dbquery)){
$data[$i] = $result["Relate"];
//echo $data[$i]."<br/>";
$i++;
}
?>
    
  <br>  
  <div class="embed-responsive embed-responsive-16by9">
   <div style="margin:auto:width:80%;">  
   <div id="map_canvas"></div>    
   </div>
   </div>     
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>      
<script type="text/javascript">     
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้    
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น    
var my_Marker=[]; // สำหรับปักหมุด 
var my_leant=[]; 
var obj_marker;  // สำหรับเก็บค่าพิกัดและข้อมูลจากฐานข้อมูล  
var limit_show=100; // กำหนดแสดงรายการไม่เกิน  
var infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่    
var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด        
function initialize() { // ฟังก์ชันแสดงแผนที่    
    GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM    
    // กำหนดจุดเริ่มต้นของแผนที่    
    var my_Latlng  = new GGM.LatLng(9.0968957,99.3617589);    
    // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas    
    var my_DivObj=$("#map_canvas")[0];     
    // กำหนด Option ของแผนที่    
    var myOptions = {    
        zoom: 8, // กำหนดขนาดการ zoom    
        center: my_Latlng , // กำหนดจุดกึ่งกลาง    
        mapTypeId:GGM.MapTypeId.ROADMAP, // กำหนดรูปแบบแผนที่    
        mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่    
            position:GGM.ControlPosition.TOP, // จัดตำแหน่ง    
            style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style     
        }    
    };    
    map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map    
    // ดึงข้อมูลจากฐานข้อมูลที่สร้างมาในรูปแบบไฟล์ json  
    $.getJSON( "Pullgps.php", function( data ) {   
        obj_marker=data; // เก็บค่าไว้ในตัวแปร ไว้ใช้งาน
var m=0;  
         $.each(obj_marker,function(i,k){  // วนลูปแสดงการปักหมุด  
                 if(m<limit_show){ // ปักหมดได้ไม่เกิน limit_show  
                    var markerLatLng=new GGM.LatLng(obj_marker[i].latitude,obj_marker[i].longitude);
 
  my_Marker[i] = new GGM.Marker({ // สร้างตัว marker    
                        position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง    
                        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map    
                        title:obj_marker[i].province_name // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ    
                    });       
                       
                     // ส่วนของ infowindow สำหรับทดสอบ ดึงจากชื่อ titile  
                     infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array    
                        content: my_Marker[i].getTitle() // ดึง title ในตัว marker มาแสดงใน infowindow    
                    });
 var mapCircle = new GGM.Circle({ // สร้างตัว circle  
                      strokeColor: "#CC0000", // สีของเส้นสัมผัส หรือสีขอบโดยรอบ  
                      strokeOpacity: 0.3, // ความโปร่งใส ของสีขอบโดยรอบ กำหนดจาก 0.0  -  0.1  
                      strokeWeight: 1, // ความหนาของสีขอบโดยรอบ เป็นหน่วย pixel  
                      fillColor: "#FF0000", // สีของวงกลม circle  
                      fillOpacity: 0.08, // ความโปร่งใส กำหนดจาก 0.0  -  0.1  
                      map: map, // กำหนดว่า circle นี้ใช้กับแผนที่ชื่อ instance ว่า map  
                      center: markerLatLng, // ตำแหน่งศูนย์กลางของวลกลม ในที่นี้ใช้ตำแหน่งเดียวกับ ตัว marker 
 radius: 0,
   });               
                    //  กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง    
//                        infowindow[i] = new GGM.InfoWindow({       
//                          content:$.ajax({       
//                              url:'placeDetail.php',//ใช้ ajax ใน jQuery ดึงข้อมูล       
//                              data:'placeID='+obj_marker[i].province_id,  // ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล    
//                              async:false       
//                          }).responseText       
//                        });                             
                     // ส่วนของการกำหนด ให้เมื่อคลิกแต่ละ marker  
                    GGM.event.addListener(my_Marker[i],"click", function(){ // เมื่อคลิกตัว marker แต่ละตัว    
                        if(infowindowTmp){ // ให้ตรวจสอบว่ามี infowindow ตัวไหนเปิดอยู่หรือไม่    
                            infowindow[infowindowTmp].close();  // ถ้ามีให้ปิด infowindow ที่เปิดอยู่    
                        }    
                        infowindow[i].open(map,my_Marker[i]); // แสดง infowindow ของตัว marker ที่คลิก    
                        infowindowTmp=i; // เก็บ infowindow ที่เปิดไว้อ้างอิงใช้งาน    
                    });                                  
                    m++;  
                 }  
                  
         });                
    });    
    // กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom    
    GGM.event.addListener(map, 'zoom_changed', function() {    
        // วนลูปล้างค่าเก่า ก่อนสร้างปักหมุดใหม่  
        if(my_Marker.length>0){    
            for(i=0;i<my_Marker.length;i++){    
                my_Marker[i].setMap(null);    
            }    
        }    
        var m=0;  
        var map_zoom=map.getZoom();  
        // zoom เท่าไหร่ แสดงเท่าไหร่ เงื่อนไขกำหนดตามต้องการ  
        if(map_zoom<=6){  
            limit_show=10;  
        }else if(map_zoom<=7){  
            limit_show=30;  
        }else if(map_zoom<=8){  
            limit_show=40;  
        }else if(map_zoom<=20){  
            limit_show=100;  
        }else{  
            limit_show=10;  
        }  
         $.each(obj_marker,function(i,k){  // วนลูปแสดงการปักหมุด  
                 if(m<limit_show){ // ปักหมดได้ไม่เกิน limit_show  
                    var markerLatLng=new GGM.LatLng(obj_marker[i].latitude,obj_marker[i].longitude);    
                    my_Marker[i] = new GGM.Marker({ // สร้างตัว marker    
                        position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง    
                        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map    
                        title:obj_marker[i].province_name // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ    
                    });      
                    // ส่วนของ infowindow สำหรับทดสอบ ดึงจากชื่อ titile  
                     infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array    
                        content: my_Marker[i].getTitle() // ดึง title ในตัว marker มาแสดงใน infowindow    
                    });                               
                    //  กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง    
                        infowindow[i] = new GGM.InfoWindow({       
                          content:$.ajax({       
                              url:'placeDetail.php',//ใช้ ajax ใน jQuery ดึงข้อมูล       
                              data:'placeID='+obj_marker[i].ID,  // ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล    
                              async:false       
                          }).responseText       
                        });                             
 
                       // ส่วนของการกำหนด ให้เมื่อคลิกแต่ละ marker  
                    GGM.event.addListener(my_Marker[i],"click", function(){ // เมื่อคลิกตัว marker แต่ละตัว    
                        if(infowindowTmp){ // ให้ตรวจสอบว่ามี infowindow ตัวไหนเปิดอยู่หรือไม่    
                            infowindow[infowindowTmp].close();  // ถ้ามีให้ปิด infowindow ที่เปิดอยู่    
                        }    
                        infowindow[i].open(map,my_Marker[i]); // แสดง infowindow ของตัว marker ที่คลิก    
                        infowindowTmp=i; // เก็บ infowindow ที่เปิดไว้อ้างอิงใช้งาน    
                    });                                  
                    m++;  
                 }  
         });            
          
    });    
}    
$(function(){
    $("<script/>", {  
      "type": "text/javascript",  
      src: "http://maps.google.com/maps/api/js?key=jhdgdl4qV1iJPuYEI7MGI1Fzvh7A&language=th&region=TH&v=3.2&sensor=false&callback=initialize" 
    }).appendTo("body");        
});
</script>  
 
</center>
</div>
</div><!--/.container-->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>


โดย:  Jsk IP: 122.154.60.xxx วันที่: 20-04-2017 เวลา: 20:04:18
 ความคิดเห็นที่ 3
 ขึ้นอยู่กับรูปแบบขั้นตอนในการทำงาน การเปลี่ยนสีหมุด ไม่ใช่ปัญหาเท่าไหร่ 

ดูเนื้อหาเกี่ยวกับ google map 
จากลิ้งค์นี้เป็นแนวทาง
 
 
ลิงค์สร้าง icon ไว้ใช้งาน
https://mapicons.mapsmarker.com
http://map-icons.com/
 
หรือดูการปักหมุดจากบทความนี้
การใช้งาน polyline และ polygon ใน google map api v3 


โดย:  Ninenik IP: 1.46.103.xxx วันที่: 20-04-2017
 ความคิดเห็นที่ 4
คือตอนนี้สามารถปักหมุดต่างๆได้เรียบร้อยแล้ว แต่ยังประยุกต์ใช้กับหมุดหลายสีเพื่อแยกประเภทสิ่งมีชีวิตที่ต่างกันยังไม่ได้ พอจะมีแนวทางบ้างไหมคะ


โดย:  Jsk IP: 122.154.60.xxx วันที่: 20-04-2017 เวลา: 22:05:14
 ความคิดเห็นที่ 5
ในการกำหนด marker เราสามารถใส่ icon property เพิ่มเข้าไปได้
โดย icon เป็น path ของไฟล์รูปภาพที่เราจะแยกประเภท 
เราสามารถใส่เงื่อนไข เพื่อแยกประเภทของรูป icon ตามต้องการได้
 
	var image="http://example.com/mapicons/notype.png";
	if(obj_marker[i].typeanimal=='xxx'){
		image="http://example.com/mapicons/xxx.png";
	}else if(obj_marker[i].typeanimal=='yyy'){
		image="http://example.com/mapicons/yyy.png";
	}
	marker[i] = new GGM.Marker({
		position: event.latLng,
		map: map,
		icon: image
	});
 
อย่างแนวทางด้านบน เราส่งค่า typeanimal เข้ามาด้วย โดยให้เพิ่มฟิลด์ในไฟล์ที่ดึงข้อมูลหมุดมาแสดง
เราก็เอาค่าประเภทเข้ามาด้วย สมมติกำหนดในชื่อ typeanimal จากนั้นตอนแสดง marker ก็ให้เอาค่านั้น
มาทำเป็นเงื่อนไขการแสดงรูปแทน marker แยกตามประเภทของสัตว์ น่าจะประมาณนี้
 
ลิ้งค์ด้านบนมีทุกอย่างครอบคลุมพอสมควร อันนี้ต้องไล่ดูว่าตัวไหน ให้ผลมายังไง แล้วเราสามารถเอาส่วนไหน
มาประยุกต์กับแนวทางของเราได้


โดย:  Ninenik IP: 1.46.103.xxx วันที่: 20-04-2017
 ความคิดเห็นที่ 6
ขอสอบถามอีกนิดคะ คือเราต้องแทรกไปในบรรทัดไหนเหรอคะ คือแทรกไปแล้วก็ยังไม่ขึ้นอะคะ


โดย:  Jsk IP: 122.154.60.xxx วันที่: 21-04-2017 เวลา: 00:35:00
 ความคิดเห็นที่ 7
ขอบคุณคะได้แล้วคะ


โดย:  Jsk IP: 122.154.60.xxx วันที่: 21-04-2017 เวลา: 22:21:38