Google map maker หลายๆสี

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา Google map maker หลายๆสี

Google map maker หลายๆสี

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

Jsk 20-04-2017 15:00:13

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

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

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

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

หน้านี้จะเป็นในส่วนของการเลือกข้อมูล

<div class="form-group">

<label for="type_animal">ประเภทของสัตว์</label>

<?php

$type_animal =

array("สัตว์มีกระดูกสันหลัง","สัตว์ไม่มีกระดูกสันหลัง");

foreach($type_animal as $animal){

echo "<option value=$animal>$animal</option>";

}

</select>

Jsk 20-04-2017 20:02

ความคิดเห็นที่ 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>

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: "//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>

Jsk 20-04-2017 20:04

ความคิดเห็นที่ 3

ขึ้นอยู่กับรูปแบบขั้นตอนในการทำงาน การเปลี่ยนสีหมุด ไม่ใช่ปัญหาเท่าไหร่

ดูเนื้อหาเกี่ยวกับ google map

จากลิ้งค์นี้เป็นแนวทาง

https://www.ninenik.com/google_search.php?tags=google map

ลิงค์สร้าง icon ไว้ใช้งาน

https://mapicons.mapsmarker.com

http://map-icons.com/

หรือดูการปักหมุดจากบทความนี้

การใช้งาน polyline และ polygon ใน google map api v3

https://www.ninenik.com/content.php?arti_id=380 via @ninenik

ninenik 20-04-2017

ความคิดเห็นที่ 4

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

Jsk 20-04-2017 22:05

ความคิดเห็นที่ 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 20-04-2017

ความคิดเห็นที่ 6

ขอสอบถามอีกนิดคะ คือเราต้องแทรกไปในบรรทัดไหนเหรอคะ คือแทรกไปแล้วก็ยังไม่ขึ้นอะคะ

Jsk 21-04-2017 00:35

ความคิดเห็นที่ 7

ขอบคุณคะได้แล้วคะ

Jsk 21-04-2017 22:21

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน