Baidu Map API를 사용하여 PHP에서 지도 마커와 정보 창 간의 상호 작용 실현-PHP 튜토리얼-php.cn

Baidu Map API를 사용하여 PHP에서 지도 마커와 정보 창 간의 상호 작용 실현

王林

풀어 주다： 2023-07-31 18:18:02

원래의

948명이 탐색했습니다.

PHP에서 Baidu Map API를 사용하여 지도 마커와 정보 창 간의 상호 작용을 실현

Baidu Map API는 풍부한 기능과 인터페이스를 제공하는 강력한 지도 서비스 플랫폼으로, 지도 기능을 자체 웹사이트나 애플리케이션에 통합할 수 있습니다. 이 기사에서는 지도 표시와 정보 창 간의 상호 작용을 실현하기 위해 PHP와 Baidu Map API를 사용하는 방법을 소개합니다.

먼저 Baidu 지도 개발자 플랫폼에 개발자 계정을 등록하고, 애플리케이션을 만들고, API 키를 받아야 합니다. 그런 다음 Baidu Map JavaScript API의 라이브러리 파일을 PHP 프로젝트에 도입할 수 있습니다.

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=YOUR_API_KEY"></script>

로그인 후 복사

다음으로 HTML 페이지에 지도 컨테이너를 만들어야 합니다.

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

로그인 후 복사

그런 다음 PHP에서 JavaScript 코드를 작성할 수 있습니다. Baidu를 사용하세요. 지도를 만들고 지도의 중심점과 확대/축소 수준을 설정하는 Map API:

<script type="text/javascript">
  var map = new BMap.Map("map");
  var point = new BMap.Point(116.404, 39.915);
  map.centerAndZoom(point, 15);
</script>

로그인 후 복사

그런 다음 PHP에서 JavaScript 코드를 작성하여 Baidu Map API를 통해 마커를 만들고 지도에 추가할 수 있습니다.

<script type="text/javascript">
  var marker = new BMap.Marker(point);
  map.addOverlay(marker);
</script>

로그인 후 복사

다음으로, 우리는 PHP에서 JavaScript 코드를 작성하고 마커에 클릭 이벤트를 추가하면 마커를 클릭할 때 정보 창이 팝업됩니다.

<script type="text/javascript">
  marker.addEventListener("click", function () {
    var infoWindow = new BMap.InfoWindow("这是一个信息窗口");
    this.openInfoWindow(infoWindow);
  });
</script>

로그인 후 복사

위 코드는 PHP에서 Baidu Map API를 사용하여 지도 마커 간의 상호 작용을 구현하는 방법을 보여줍니다. 그리고 정보 창. 지도의 마커를 클릭하면 주어진 텍스트 내용을 보여주는 정보 창이 팝업됩니다.

클릭 이벤트 외에도 Baidu Map API는 기타 풍부한 이벤트와 인터페이스를 제공하므로 지도 마커와 정보 창의 상호 작용을 보다 유연하게 제어할 수 있습니다. 예를 들어, 사용자가 마커의 위치를 드래그할 수 있도록 마커에 드래그 이벤트를 추가할 수 있습니다.

이 외에도 필요에 따라 마크의 아이콘 스타일, 정보 창의 내용 및 스타일 등을 설정할 수도 있습니다. Baidu Map API 문서는 Baidu Map API를 더 깊이 이해하고 사용하는 데 도움이 되는 자세한 인터페이스 설명과 샘플 코드를 제공합니다.

요약하자면, Baidu Map API를 사용하여 PHP 프로젝트에서 지도 표시와 정보 창 간의 상호 작용을 실현하는 것은 주로 다음 단계로 구성됩니다.