mindphp เขียน: ↑16/10/2020 7:39 pm
โหลด OpenLayers.js จาก
https://openlayers.org/two/
แล้วทดลองใช้
ทดลอง แบบ แสดงแผนที่บน html ธรรมดาดูก่อน ตามตัวอย่าง
https://wiki.openstreetmap.org/wiki/Ope ... le_Example
ส่วนค่าตรงไหนต้องการดึงจากฐานข้อมูล ก็ใช้ query ออกมาใส่ในตำแหน่งที่ต้องการเช่น
โค้ด: เลือกทั้งหมด
<!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 ข้อมูลดูครับ
[quote=mindphp post_id=200038 time=1602851965 user_id=2747]
โหลด OpenLayers.js จาก
https://openlayers.org/two/
แล้วทดลองใช้
ทดลอง แบบ แสดงแผนที่บน html ธรรมดาดูก่อน ตามตัวอย่าง
https://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example
ส่วนค่าตรงไหนต้องการดึงจากฐานข้อมูล ก็ใช้ query ออกมาใส่ในตำแหน่งที่ต้องการเช่น
[code]<!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>[/code]
ค่า
[quote] var lat = 47.35387;
var lon = 8.43609;[/quote]
แทนที่ค่าจากฐานข้อมูลของเราลงไปแทน
[/quote]
รับทราบครับ , จะลองเอาค่า lat , lon ไปทำการ Query ข้อมูลดูครับ