JS는 Baidu Map API를 호출하고지도에서 DOT를 호출하여 레이블을 추가합니다.

저자：Eve Cole 업데이트 시간：2025-08-23 05:16:01

최근 웹 페이지를 만들고 싶습니다. 특정 콘텐츠는 다음과 같습니다. 상단에 제목이 있고, 하단은 두 조각으로 나뉘며, 왼쪽은지도입니다. 그리고지도에는 두 가지 점이 있습니다. 두 지점을 클릭하면 해당 프롬프트 정보가 제공되어 데이터베이스에 최신 두 개의 데이터 정보가 표시됩니다. 오른쪽에는 텍스트 설명이 있습니다. 방금 공부를 시작했고 잘하지 못했습니다.

전반적인 효과는 다음과 같습니다.

먼저 새 map.php 파일을 만듭니다. 코드는 다음과 같습니다.

코드 사본은 다음과 같습니다.

<! doctype html>

<? php

데이터베이스에 대한 연결을 만듭니다

$ conn = mysql_connect ( "", "", "") 또는 다이 ( "서버에 연결할 수 없음");

mysql_select_db ( "hdm0410292_db", $ conn);

mysql_query ( "set names utf8");

// 두 차량에 삽입 된 최신 데이터를 선택하고 배열에 두 문장을 저장합니다.

$ SQL0 = "CAR_INFO에서 CARID = '20140508'ORDER BY ID DESC LIMIT 1"에서 선택 * 선택 *;

$ SQL1 = "CAR_INFO에서 CARID = '20140510'ID DESC LIMIT 1에 의한 주문 *에서 선택 *;

$ sql = 배열 ($ sql0, $ sql1);

<html>

<헤드>

<title> 차량 인터넷 정보 디스플레이 </title>

<스타일 유형 = "텍스트/CSS">

html {

높이 : 99%}

몸{

높이 : 99.9%;

너비 : 99%;

Font-Family : Kaiti_GB2312;

글꼴 크기 : 25px}

#Container {높이 : 100%}

</스타일>

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 ( "컨테이너");

<!-주석 함수 추가, 매개 변수에는 데이터베이스의 포인트 좌표, 자동차 ID 및 기타 정보가 포함됩니다->

기능 부가 마커 (포인트, 인덱스, 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 = {너비 : 450, 높이 : 500, 제목 : "세부 사항"};

var infowindow = new bmap.infowindow (s, opts);

map.openinfowindow (Infowindow, Point);

});

}

<? php

// 배열에서 두 개의 SQL 문을 전송합니다

foreach ($ sql as & $ value) {

$ query = mysql_query ($ value);

$ row = mysql_fetch_array ($ query);

var lon = <? php echo $ 행 [경도]?>;

var lat = <? php echo $ 행 [latitude]?>;

<!-두 지점의 중심 지점을 계산하고 맵이 초기화 될 때 중심 위치로 사용하십시오->

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/>" +

"속도 :" + "<? php echo $ row [speed]?>" + "km/h" + "<br/>" +

"가속도 :" + "<? php echo $ 행 [가속]?>" + "<br/>" +

"방향 :" + "<? php echo $ row [Direction]?>" + "<br/>" +

"오일 수량 :" + "<? php echo $ row [오일]?>" + "<br/>" +

"주소 :" + "<? php echo $ row [street]?>";

var point = new bmap.point (lon, lat);

Addmarker (Point, <? php echo $ row [carid]?>, info);

<? php

}

<!-두 지점의 중심 지점을 계산하고 맵이 초기화 될 때 중심 위치로 사용하십시오->

var center = new bmap.point (lon_center/2, lat_center/2);

Map.Centerandzoom (센터, 17);

map.enablescrollwheelzoom ();

</스크립트>

</body>

</html>

map.php 파일은 주로 데이터베이스에 두 가지 정보를 표시하여지도의 해당 위치 에이 두 가지 정보를 표시합니다.

그런 다음 title.php를 만들면 매우 간단합니다. 제목을 표시하는 것입니다.

코드 사본은 다음과 같습니다.

<! doctype html>

<html>

<헤드>

<스타일 유형 = "텍스트/CSS">

html {

높이 : 100%;}

몸{

높이 : 10%;

너비 : 99%;

Font-Family : Kaiti_GB2312;

글꼴 크기 : 25px}

</스타일>

</head>

</body>

</html>

그런 다음 자세한 정보 설명 모듈 info.php를 만듭니다

코드 사본은 다음과 같습니다.

<! doctype html>

<? php

$ conn = mysql_connect ( "", "", "") 또는 다이 ( "서버에 연결할 수 없음");

mysql_select_db ( "", $ conn);

mysql_query ( "set names utf8");

$ SQL0 = "CAR_INFO에서 CARID = '20140508'ORDER BY ID DESC LIMIT 1"에서 선택 * 선택 *;

$ SQL1 = "CAR_INFO에서 CARID = '20140510'ID DESC LIMIT 1에 의한 주문 *에서 선택 *;

$ sql = 배열 ($ sql0, $ sql1);

함수 htmtocode ($ content) {

$ content = str_replace ( "/n", "<br>", str_replace ( "", "", $ content);

$ 컨텐츠를 반환합니다.

}

<html>

<헤드>

<스타일 유형 = "텍스트/CSS">

html {

높이 : 90%;}

몸{

높이 : 90%;

너비 : 90%;

Font-Family : Kaiti_GB2312;

글꼴 크기 : 20px}

</스타일>

</head>

<? php foreach ($ sql as & $ value) {

$ query = mysql_query ($ value);

$ row = mysql_fetch_array ($ query);

<HR>

자동차 ID : <? php echo $ row [carid]?> <br>

경도 : <? php echo $ 행 [경도]?> <br>

위도 : <? php echo $ row [latitude]?> <br>

속도 : <? php echo $ 행 [속도]?> km/h <br>

가속도 : <? php echo $ 행 [가속]?> <br>

방향 : <? php echo $ 행 [방향]?> <br>

오일 수량 : <? php echo $ 행 [오일]?> <br>

주소 : <? php echo $ row [street]?> <br>

시간 : <? php echo $ row [date]?>

<? php}?>

</body>

</html>

마지막으로 Vanet.php 파일을 작성하고 있는데 주로 첫 세 파일을 호출합니다.

코드 사본은 다음과 같습니다.

<! doctype html>

<html>

<헤드>

</head>

<프레임 세트 행 = "10%, 90%"프레임 세트 행 = "10%, 90%"프레임 보더 = 1>

</frameset>

</html>