in CODE4ALL

Tạo web map google (phần 1)

Cấu trúc 1 file HTML gồm 3 phần chính:

  1. Khai báo thuộc tính cho file html;
  2. Khai báo thẻ head gồm có CSS <style>: định dạng CSS cho website;
  3. Thẻ Body cần khai báo 3 thành phần {
    1. Thẻ meta div cho id = “map”
    1. Script định nghĩa cho các thuộc tính bản đồ: data Geojson, map
    1. Script async defer: khai báo API cho google

}

Chi tiết các phần:

  1. HTML cần khai báo
    1. Thẻ doctype: <!DOCTYPE html>
    1. Thẻ html: <html> </html>
    1. Thẻ <head> </head> và <body> </body>
  2. Thẻ head khai báo CSS trong thẻ <style> .. </style>:
    1. #map {height:100%;}
    1. Html,body { height: 100%;

margin:0;
      padding: 0;

}

  • Thẻ body khai báo <body>  … </body>:
  • Thẻ div: <div id=”map”></div>
  • Đoạn script API: <script async defer  src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap”>
        </script>
  • Đoạn script khai báo hiển thị Geojson:

<script>

var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById(‘map’), {
          zoom: 2,
          center: new google.maps.LatLng(2.8,-187.3),
          mapTypeId: ‘terrain’
        });

//Đoạn này khai báo nền map.

var script = document.createElement(‘script’);
        // khai báo 1 đối tượng script
        // Khai báo file Geojson
        script.src = ‘https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js’;
        document.getElementsByTagName(‘head’)[0].appendChild(script);
      }

// Vòng lặp trả về kết quả của json

     window.eqfeed_callback = function(results) {
        for (var i = 0; i < results.features.length; i++) {
          var coords = results.features[i].geometry.coordinates;
          var latLng = new google.maps.LatLng(coords[1],coords[0]);
         //Lưu ý: khai báo cho points //Khai báo market để tạo map có thể thêm thuộc tính icon sẽ hướng dẫn dưới // để dùng được icon thì cần khai báo image và thêm thuộc tính icon vào đây  var marker = new google.maps.Marker({
            position: latLng,
            map: map
          });
        }}

</script>
– File JSON sẽ gồm tên file ();

Bên trong () sẽ là tập hợp các Object {} phân tách nhau bởi dấu ,; dấu {} còn được dùng khi muốn khai báo object lồng nhau.

Ví dụ

Name_json(

{‘Object1’:’huy’, ‘value1’:1000,’value2’:2000},

{‘Object2’:’huy2’, ‘value3’:1000,’value4’:2000},

{‘Object3’:’huy3’, ‘value5’:1000,’value6’:2000});

File dome.html và file NuocM.js là OK

File điểm NuocM.js được tạo thành bằng Qgis và thêm tên cho cả file thành 1 đối tượng

eqfeed_callback ({});

Write a Comment

Comment