JSは、ラベルを追加するためにマップ上にBaiduマップAPIとドットを呼び出します

著者：Eve Cole 更新時間：2025-08-23 05:16:01

最近Webページを作成したいのですが、特定のコンテンツは次のとおりです。上部にタイトルがあり、下部は2つのピースに分割され、左はマップです。また、マップには2つのポイントがあります。 2つのポイントをクリックすると、対応する迅速な情報が提供され、データベースに最新の2つのデータ情報が表示されます。右側にはいくつかのテキストの説明があります。私は勉強を始めたばかりで、あまりうまくいきませんでした。

全体的な効果は次のとおりです。

最初に新しいmap.phpファイルを作成します、コードは次のとおりです

コードコピーは次のとおりです。

<！doctype html>

<？php

データベースへの接続を作成します

$ conn = mysql_connect（ "" "、" "、" "）またはdie（" server "に接続できません）;

mysql_select_db（ "hdm0410292_db"、$ conn）;

mysql_query（ "set names utf8"）;

// 2台の車によって挿入された最新のデータを選択し、2つのステートメントを配列に保存します

$ sql0 = "select * from car_info where carid = '20140508'order by id desc limit 1";

$ sql1 = "select * from car_info where carid = '20140510' id desc limit 1";

$ sql = array（$ sql0、$ sql1）;

？>

<html>

<head>

<Title>車両情報のインターネット表示</title>

html {

高さ：99％}

体{

高さ：99.9％;

幅：99％;

フォントファミリー：kaiti_gb2312;

フォントサイズ：25px}

#container {height：100％}

</style>

src = "http://api.map.baidu.com/api?v=1.5&ak=適用した秘密の鍵"> </script>

</head>

var lon_center = 0;

var lat_center = 0;

var map = new bmap.map（ "container"）;

<！ - アノテーション関数を追加し、パラメーターにはポイント座標、車のID、およびデータベース内のその他の情報が含まれます - >

function addmarker（point、index、s）{

var ficon = new bmap.icon（ "car1.png"、new bmap.size（55、43）、{

}）;

var sicon = new bmap.icon（ "car2.png"、new bmap.size（55、43）、{

}）;

var myicon = "";

//注釈オブジェクトを作成し、マップに追加します

if（index == 20140508）

myicon = ficon;

それ以外

myicon = sicon;

var marker = new bmap.marker（point、{icon：myicon}）;

map.addoverlay（マーカー）;

marker.addeventlistener（ "click"、function（）{

var opts = {width：450、height：500、title： "details"};

var infowindow = new bmap.infowindow（s、opts）;

map.openinfowindow（infowindow、point）;

}）;

}

<？php

//配列に2つのSQLステートメントを転送します

foreach（$ sql as＆$ value）{

$ query = mysql_query（$ value）;

$ row = mysql_fetch_array（$ query）;

？>

var lon = <？php echo $ row [経度]？>;

var lat = <？php echo $ row [latitude]？>;

<！ - 2つのポイントの中心点を計算し、マップが初期化されたときに中心位置として使用します - >

lon_center += lon;

lat_center += lat;

var id = <？php echo $ row [id]？>;

var info = "<br/>" + "carid：" + "<？php echo $ row [carid]？>" + "<br/>" +

"経度：" + "<？php echo $ row [経度]？>" + "<br/>" +

「緯度： " +" <？php echo $ row [latitude]？> " +" <br/> " +

"speed：" + "<？php echo $ row [speed]？>" + "km/h" + "<br/>" +

「加速： " +" <？php echo $ row [acceleration]？> " +" <br/> " +

"方向：" + "<？php echo $ row [direction]？>" + "<br/>" +

「オイル量： " +" <？php echo $ row [oil]？> " +" <br/> " +

"アドレス：" + "<？php echo $ row [Street]？>";

var point = new bmap.point（lon、lat）;

AddMarker（point、<？php echo $ row [carid]？>、info）;

<？php

}

？>

<！ - 2つのポイントの中心点を計算し、マップが初期化されたときに中心位置として使用します - >

var center = new bmap.point（lon_center/2、lat_center/2）;

map.centerandzoom（センター、17）;

map.enablescrollwheelzoom（）;

</script>

</body>

</html>

map.phpファイルは、主にデータベースに2つの情報を表示し、マップ上の対応する場所にこれら2つの情報を表示します。

次に、title.phpを作成します、これは非常に簡単です、それはタイトルを表示することです

コードコピーは次のとおりです。

<！doctype html>

<html>

<head>

html {

高さ：100％;}

体{

高さ：10％;

幅：99％;

フォントファミリー：kaiti_gb2312;

フォントサイズ：25px}

</style>

</head>

</body>

</html>

次に、詳細情報説明module info.phpを作成します

コードコピーは次のとおりです。

<！doctype html>

<？php

$ conn = mysql_connect（ "" "、" "、" "）またはdie（" server "に接続できません）;

mysql_select_db（ ""、$ conn）;

mysql_query（ "set names utf8"）;

$ sql0 = "select * from car_info where carid = '20140508'order by id desc limit 1";

$ sql1 = "select * from car_info where carid = '20140510' id desc limit 1";

$ sql = array（$ sql0、$ sql1）;

関数htmtocode（$ content）{

$ content = str_replace（ "/n"、 "<br>"、str_replace（ ""、 ""、$ content））;

$ contentを返します。

}

？>

<html>

<head>

html {

高さ：90％;}

体{

高さ：90％;

幅：90％;

フォントファミリー：kaiti_gb2312;

フォントサイズ：20px}

</style>

</head>

<？php foreach（$ sql as＆$ value）{

$ query = mysql_query（$ value）;

$ row = mysql_fetch_array（$ query）;

？>

<hr>

車ID：<？php echo $ row [carid]？> <br>

経度：<？php echo $ row [経度]？> <br>

緯度：<？php echo $ row [latitude]？> <br>

速度：<？php echo $ row [speed]？> km/h <br>

加速：<？php echo $ row [acceleration]？> <br>

方向：<？php echo $ row [方向]？> <br>

オイル量：<？php echo $ row [oil]？> <br>

アドレス：<？php echo $ row [Street]？> <br>

時間：<？php echo $ row [date]？>

<？php}？>

</body>

</html>

最後に、主に最初の3つのファイルを呼び出すvanet.phpファイルを書いています

コードコピーは次のとおりです。

<！doctype html>

<html>

<head>

</head>

<フレームセット行= "10％、90％"フレームセット行= "10％、90％"フレームボーダー= 1>

<フレームセットcols = "70％、30％">

</frameset>

</html>