MySQL と JavaScript を使用して簡単な地図マーキング機能を実装する方法

MySQL と JavaScript を使用して単純なマップ マーキング関数を実装する方法

マップ マーキング関数は、最新の Web アプリケーションで非常に一般的です。場所、位置情報の表示または地理データの表示など。この記事では、MySQL データベースと JavaScript を使用して簡単なマップ マーカー関数を作成する方法を説明し、具体的なコード例を示します。

1. 準備
始める前に、いくつかの基本的な環境とツールを準備する必要があります:

1. MySQL データベース: 地図上にマークされた位置情報を保存するために使用されます。
2. HTML、CSS、JavaScript などのいくつかの基本的なフロントエンド テクノロジ ツール。
3. コードの実行には、Apache や Nginx などの基本的なサーバー環境が使用されます。

2. データベースとテーブルの作成
まず、マップ マーカーの位置情報を保存するテーブルを MySQL データベースに作成する必要があります。次の SQL ステートメントを使用して、「markers」という名前のテーブルを作成できます。

CREATE TABLE `markers` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `name` VARCHAR(50) NOT NULL,
  `lat` FLOAT(10,6) NOT NULL,
  `lng` FLOAT(10,6) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

このテーブルには、id、name、lat、lng の 4 つのフィールドが含まれています。 id フィールドは自動インクリメントされる主キーで、name フィールドはタグの名前を格納するために使用され、lat フィールドと lng フィールドはそれぞれタグの緯度と経度を格納するために使用されます。

3. フロントエンド コードを作成する
次に、マップ マーキング機能を実装するためのフロントエンド HTML および JavaScript コードを作成します。

1. HTML コード
   HTML コードでは、地図を表示し、新しいマーカーを追加するための [マーカーの追加] ボタンを追加するためのマップ コンテナーが必要です。例:

<div id="map"></div>

<button onclick="addMarker()">添加标记</button>

2. JavaScript コード
   JavaScript コードでは、地図 API を使用して地図を読み込み、マーカーを追加する機能を実装する必要があります。ここでは、Google Maps API を使用してデモを行います。まず、Google Maps API を含む HTML ファイルに <script> タグを追加する必要があります。 </script>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

次に、JavaScript コードで次のコードを記述できます:

// 初始化地图
function initMap() {
  // 创建地图对象
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 0, lng: 0},
    zoom: 2
  });
  
  // 加载标记
  loadMarkers(map);
}

// 加载标记
function loadMarkers(map) {
  // 发送异步请求获取标记数据
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 解析并显示标记
      var markers = JSON.parse(xhr.responseText);
      for (var i = 0; i < markers.length; i++) {
        var marker = new google.maps.Marker({
          position: {lat: markers[i].lat, lng: markers[i].lng},
          map: map,
          title: markers[i].name
        });
      }
    }
  };
  xhr.open('GET', 'get_markers.php', true);
  xhr.send();
}

// 添加标记
function addMarker() {
  // 获取标记的名称、纬度和经度
  var name = prompt('请输入标记的名称：');
  var lat = parseFloat(prompt('请输入标记的纬度：'));
  var lng = parseFloat(prompt('请输入标记的经度：'));
  
  // 创建地图对象
  var map = new google.maps.Map(document.getElementById('map'));
  
  // 创建标记对象
  var marker = new google.maps.Marker({
    position: {lat: lat, lng: lng},
    map: map,
    title: name
  });
  
  // 将标记保存到数据库
  saveMarker(name, lat, lng);
}

// 保存标记
function saveMarker(name, lat, lng) {
  // 发送异步请求将标记保存到数据库
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'save_marker.php', true);
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  xhr.send('name=' + name + '&lat=' + lat + '&lng=' + lng);
}

上記のコードでは、まず initMap() 関数を使用してマップを初期化し、loadMarkers を呼び出します。 () 関数は既存のタグを読み込みます。 loadMarkers() 関数は、サーバーに非同期リクエストを送信し、マーカー データを取得し、Google Maps API を使用して地図上にマーカーを表示します。

addMarker() 関数では、prompt() 関数を使用してユーザーが入力したマーカー名、緯度、経度を取得し、Google Maps API を使用して地図上にマーカーを追加します。次に、saveMarker() 関数を呼び出して、マーカーをデータベースに保存する非同期リクエストを送信します。

4. サーバー側コードを作成する
最後に、クライアントのリクエストを処理し、タグ データをデータベースに保存するためのサーバー側コードを作成する必要があります。

1. マーカーの保存
   PHP を使用してサーバー側コードを記述し、マーカーを保存できます。 「save_marker.php」という名前のファイルを作成し、次のコードを記述します:

<?php
// 获取标记的名称、纬度和经度
$name = $_POST['name'];
$lat = $_POST['lat'];
$lng = $_POST['lng'];

// 连接数据库
$mysqli = new mysqli('localhost', 'username', 'password', 'your_database_name');

// 插入数据到数据库
$query = "INSERT INTO markers (name, lat, lng) VALUES ('$name', '$lat', '$lng')";
$mysqli->query($query);

// 关闭数据库连接
$mysqli->close();
?>

2. マーカーを取得
   同様に、PHP を使用してサーバー側のコードを記述してマーカーを取得できます。データ。 「get_markers.php」という名前のファイルを作成し、次のコードを記述します。

<?php
// 连接数据库
$mysqli = new mysqli('localhost', 'username', 'password', 'your_database_name');

// 查询数据库中的标记数据
$query = "SELECT * FROM markers";
$result = $mysqli->query($query);

// 构建标记数组
$markers = array();
while ($row = $result->fetch_assoc()) {
  $markers[] = $row;
}

// 返回标记数据
echo json_encode($markers);

// 关闭数据库连接
$mysqli->close();
?>

上記のコードでは、まず MySQL データベースに接続し、次に「save_marker.php」と「get_markers」をそれぞれ記述します。 .php」を使用してマーカーをデータベースに保存し、マーカー データを取得します。

5. テスト実行
上記の準備が完了したら、関連ファイルをサーバーにデプロイし、ブラウザで HTML ファイルにアクセスすると、地図マーキング機能を備えたページが表示されます。

[マーカーを追加] ボタンをクリックし、名前、緯度、経度を入力すると、地図上に新しいマーカーを正常に追加できます。同時に、マークされたデータが MySQL データベースに保存されます。

概要
この記事では、MySQL データベースと JavaScript を使用して簡単なマップ マーカー関数を作成する方法を紹介し、具体的なコード例を示しました。この例を通じて、MySQL を使用して地理データを保存する方法と、JavaScript と Google Maps API を使用して地図マーキング関数を実装する方法を学ぶことができます。地図関連アプリケーションの開発に役立てていただければ幸いです。

以上がMySQL と JavaScript を使用して簡単な地図マーキング機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。