Content Marketingเครื่องมือการตลาด

อัปเดต Google Maps ด้วยไฟล์ GeoJSON หรือ KML โดยใช้ JavaScript API

KML (ภาษามาร์กอัปรูกุญแจ) และ GeoJSON (ภูมิศาสตร์ JSON) คือรูปแบบไฟล์สองรูปแบบที่ใช้สำหรับจัดเก็บข้อมูลทางภูมิศาสตร์ในลักษณะที่มีโครงสร้าง แต่ละรูปแบบเหมาะสมกับการใช้งานประเภทต่างๆ และสามารถนำไปใช้ในบริการแผนที่ต่างๆ ได้แก่ Google Maps. มาเจาะลึกรายละเอียดของแต่ละรูปแบบและยกตัวอย่าง:

ไฟล์ KML

KML เป็นรูปแบบ XML สำหรับแสดงข้อมูลทางภูมิศาสตร์ ซึ่งพัฒนาขึ้นเพื่อใช้กับ Google Earth เหมาะอย่างยิ่งสำหรับการแสดงจุด เส้น รูปหลายเหลี่ยม และรูปภาพบนแผนที่ ไฟล์ KML สามารถมีคุณลักษณะต่างๆ เช่น หมุด เส้นทาง รูปหลายเหลี่ยม สไตล์ และอื่นๆ

ตัวอย่างไฟล์ KML:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Document>
    <name>Example KML</name>
    <Placemark>
      <name>New York City</name>
      <description>New York City</description>
      <Point>
        <coordinates>-74.006,40.7128,0</coordinates>
      </Point>
    </Placemark>
  </Document>
</kml>

ตัวอย่าง KML นี้กำหนดหมุดเดียวสำหรับนิวยอร์กซิตี้ ที่ <coordinates> แท็ก ระบุลองจิจูด ละติจูด และระดับความสูง (ตามลำดับ) โดยไม่จำเป็นต้องระบุระดับความสูงก็ได้

ไฟล์ GeoJSON

GeoJSON เป็นรูปแบบสำหรับการเข้ารหัสโครงสร้างข้อมูลทางภูมิศาสตร์ที่หลากหลายโดยใช้ JSON รองรับประเภทเรขาคณิต เช่น Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon และ GeometryCollection

ตัวอย่างของไฟล์ GeoJSON:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "New York City",
        "description": "New York City"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-74.006, 40.7128]
      }
    }
  ]
}

ตัวอย่าง GeoJSON นี้ยังกำหนดจุดเดียวสำหรับนิวยอร์กซิตี้ คล้ายกับตัวอย่าง KML ที่ coordinates อาร์เรย์ประกอบด้วยลองจิจูดและละติจูด

ความแตกต่างและการใช้งาน

  • KML มักใช้กับ Google Earth และแอปพลิเคชันอื่นๆ ที่ต้องมีคำอธิบายประกอบและการจัดรูปแบบทางภูมิศาสตร์ที่สมบูรณ์ เหมาะมากสำหรับการเล่าเรื่องหรือการนำเสนอทางภูมิศาสตร์โดยละเอียด
  • GeoJSON มีน้ำหนักเบากว่าและโดยทั่วไปจะใช้ในแอปพลิเคชันเว็บ โดยเฉพาะแอปพลิเคชันที่ใช้ JavaScript เป็นรูปแบบที่ต้องการสำหรับแอปพลิเคชันแผนที่บนเว็บและ GIS ซอฟต์แวร์เนื่องจากความเรียบง่ายและเข้ากันได้กับ JavaScript Object Notation

ทั้งสองรูปแบบมีความสำคัญในกลยุทธ์การขายและการตลาดต่างๆ โดยเฉพาะอย่างยิ่งเมื่อทำแผนที่ข้อมูลลูกค้าทางภูมิศาสตร์ วิเคราะห์แนวโน้มของตลาด หรือวางแผนแคมเปญการตลาดตามสถานที่ตั้ง ความสามารถในการแสดงข้อมูลบนแผนที่ด้วยภาพสามารถเป็นเครื่องมือที่มีประสิทธิภาพในบริบทเหล่านี้ ซึ่งช่วยในการตัดสินใจและการพัฒนากลยุทธ์ได้ดีขึ้น

วิธีฝัง KML หรือ GeoJSON ใน Google Map ของคุณ

หากต้องการฝังไฟล์ KML หรือ JSON ด้วยข้อมูลทางภูมิศาสตร์โดยใช้ Google Maps JavaScript API คุณต้องทำตามขั้นตอนเหล่านี้สำหรับไฟล์แต่ละประเภท:

การฝังไฟล์ KML

  1. เตรียมไฟล์ KML: ตรวจสอบให้แน่ใจว่าไฟล์ KML ของคุณสามารถเข้าถึงได้ทางออนไลน์ Google Maps จะต้องเข้าถึงได้แบบสาธารณะจึงจะเรียกคืนได้
  2. สร้างแผนที่: เริ่มต้น Google Map ใหม่ในแอปพลิเคชันของคุณ
  3. โหลดเลเยอร์ KML: ใช้ google.maps.KmlLayer คลาสเพื่อเพิ่มไฟล์ KML ของคุณลงในแผนที่

รหัสตัวอย่าง:

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        center: {lat: -34.397, lng: 150.644}
    });

    var kmlLayer = new google.maps.KmlLayer({
        url: 'http://yourdomain.com/path/to/yourfile.kml',
        map: map
    });
}

แทนที่ 'http://yourdomain.com/path/to/yourfile.kml' ด้วย URL ของไฟล์ KML ของคุณ

การฝังไฟล์ JSON

  1. เตรียมไฟล์ JSON: JSON ของคุณควรอยู่ในรูปแบบ GeoJSON ซึ่งเป็นรูปแบบมาตรฐานสำหรับการเข้ารหัสข้อมูลทางภูมิศาสตร์
  2. สร้างแผนที่: เช่นเดียวกับ KML ให้เริ่มต้น Google Map ในแอปพลิเคชันของคุณ
  3. โหลดเลเยอร์ GeoJSON: ใช้ map.data.loadGeoJson() วิธีการเพิ่มข้อมูล GeoJSON ของคุณลงในแผนที่

รหัสตัวอย่าง:

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: {lat: -28, lng: 137}
    });

    // Assuming your GeoJSON file is located at the specified URL
    map.data.loadGeoJson('http://yourdomain.com/path/to/yourfile.json');
}

แทนที่ 'http://yourdomain.com/path/to/yourfile.json' ด้วย URL ของไฟล์ GeoJSON ของคุณ

สิ่งที่ควรทราบ

  • ตรวจสอบให้แน่ใจว่าไฟล์ KML และ GeoJSON ของคุณอยู่ในรูปแบบที่ถูกต้องและเข้าถึงได้แบบสาธารณะ
  • จำเป็นต้องมีคีย์ JavaScript API ของ Google Maps รวมไว้ในของคุณ HTML ไฟล์ที่มีการโหลดสคริปต์ Google Maps
  • ปรับแผนที่ zoom และ center คุณสมบัติตามที่ตั้งทางภูมิศาสตร์ของข้อมูลของคุณ

ด้วยการรวมไฟล์ KML หรือ GeoJSON ในลักษณะนี้ คุณจะสามารถแสดงข้อมูลทางภูมิศาสตร์ที่สมบูรณ์บนเว็บแอปพลิเคชันของคุณได้อย่างมีประสิทธิภาพ โดยนำเสนอประสบการณ์แผนที่แบบไดนามิกและเชิงโต้ตอบสำหรับผู้ใช้ สิ่งนี้มีประโยชน์อย่างยิ่งในบริบทการขายและการตลาดที่หลากหลาย ซึ่งการแสดงข้อมูลทางภูมิศาสตร์เป็นภาพสามารถปรับปรุงความเข้าใจและการมีส่วนร่วมของผู้มีโอกาสเป็นลูกค้าหรือสมาชิกในทีม

Douglas Karr

Douglas Karr เป็น CMO ของ เปิดข้อมูลเชิงลึก และผู้ก่อตั้ง Martech Zone. Douglas ได้ช่วยเหลือสตาร์ทอัพ MarTech ที่ประสบความสำเร็จหลายสิบราย ได้ช่วยเหลือในการตรวจสอบสถานะมูลค่ากว่า 5 พันล้านดอลลาร์ในการซื้อกิจการและการลงทุนของ Martech และยังคงช่วยเหลือบริษัทต่างๆ ในการปรับใช้และทำให้กลยุทธ์การขายและการตลาดเป็นไปโดยอัตโนมัติ Douglas เป็นผู้เชี่ยวชาญด้านการเปลี่ยนแปลงทางดิจิทัลและ MarTech ที่ได้รับการยอมรับในระดับสากล ดักลาสยังเป็นผู้เขียนหนังสือ Dummie's Guide และหนังสือความเป็นผู้นำทางธุรกิจที่ได้รับการตีพิมพ์อีกด้วย

บทความที่เกี่ยวข้อง

กลับไปด้านบนปุ่ม
ปิดหน้านี้

ตรวจพบการบล็อกโฆษณา

Martech Zone สามารถจัดหาเนื้อหานี้ให้คุณโดยไม่มีค่าใช้จ่าย เนื่องจากเราสร้างรายได้จากไซต์ของเราผ่านรายได้จากโฆษณา ลิงก์พันธมิตร และการสนับสนุน เรายินดีอย่างยิ่งหากคุณจะลบตัวปิดกั้นโฆษณาของคุณเมื่อคุณดูไซต์ของเรา