PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


Google map maker หลายๆสี

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา 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