Page 1 of 1

อยากทราบว่า มีตัวอย่าง OpenstreetMap ในการใช้งานร่วมกับ MySQL , PHP บ้างไหมครับ

Posted: 16/10/2020 7:25 pm
by makup
อยากทราบว่าพอมีตัวอย่าง การใช้ Openstreetmap ร่วมกับ MySQL , PHP บ้างไหมครับ , พอดีหาจากตัวอย่าง Google ไม่ค่อยเจอครับ

Re: อยากทราบว่า มีตัวอย่าง OpenstreetMap ในการใช้งานร่วมกับ MySQL , PHP บ้างไหมครับ

Posted: 16/10/2020 7:39 pm
by mindphp
โหลด OpenLayers.js จาก
https://openlayers.org/two/
แล้วทดลองใช้
ทดลอง แบบ แสดงแผนที่บน html ธรรมดาดูก่อน ตามตัวอย่าง
https://wiki.openstreetmap.org/wiki/Ope ... le_Example

ส่วนค่าตรงไหนต้องการดึงจากฐานข้อมูล ก็ใช้ query ออกมาใส่ในตำแหน่งที่ต้องการเช่น

Code: Select all

<!DOCTYPE HTML>
<html>
<head>
<title>OpenLayers Simplest Example</title>
</head>
<body>
<div id="Map" style="height:250px"></div>
<script src="OpenLayers.js"></script>
<script>
    var lat            = 47.35387;
    var lon            = 8.43609;
    var zoom           = 18;

    var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
    var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
    var position       = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);

    map = new OpenLayers.Map("Map");
    var mapnik         = new OpenLayers.Layer.OSM();
    map.addLayer(mapnik);

    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);
    markers.addMarker(new OpenLayers.Marker(position));

    map.setCenter(position, zoom);
</script>
</body>
</html>
ค่า
var lat = 47.35387;
var lon = 8.43609;
แทนที่ค่าจากฐานข้อมูลของเราลงไปแทน

Re: อยากทราบว่า มีตัวอย่าง OpenstreetMap ในการใช้งานร่วมกับ MySQL , PHP บ้างไหมครับ

Posted: 16/10/2020 7:48 pm
by makup
mindphp wrote: 16/10/2020 7:39 pm โหลด OpenLayers.js จาก
https://openlayers.org/two/
แล้วทดลองใช้
ทดลอง แบบ แสดงแผนที่บน html ธรรมดาดูก่อน ตามตัวอย่าง
https://wiki.openstreetmap.org/wiki/Ope ... le_Example

ส่วนค่าตรงไหนต้องการดึงจากฐานข้อมูล ก็ใช้ query ออกมาใส่ในตำแหน่งที่ต้องการเช่น

Code: Select all

<!DOCTYPE HTML>
<html>
<head>
<title>OpenLayers Simplest Example</title>
</head>
<body>
<div id="Map" style="height:250px"></div>
<script src="OpenLayers.js"></script>
<script>
    var lat            = 47.35387;
    var lon            = 8.43609;
    var zoom           = 18;

    var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
    var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
    var position       = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);

    map = new OpenLayers.Map("Map");
    var mapnik         = new OpenLayers.Layer.OSM();
    map.addLayer(mapnik);

    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);
    markers.addMarker(new OpenLayers.Marker(position));

    map.setCenter(position, zoom);
</script>
</body>
</html>
ค่า
var lat = 47.35387;
var lon = 8.43609;
แทนที่ค่าจากฐานข้อมูลของเราลงไปแทน
รับทราบครับ , จะลองเอาค่า lat , lon ไปทำการ Query ข้อมูลดูครับ