찾다

집 >백엔드 개발 >PHP 튜토리얼 >PHP 및 Amap API를 사용하여 대화형 지도 마커 만들기

PHP 및 Amap API를 사용하여 대화형 지도 마커 만들기

王林
王林원래의
2023-07-31 17:06:211399검색

PHP 및 Amap API를 사용하여 대화형 지도 마커 만들기

소개:
현대 모바일 인터넷 시대에 지도 서비스는 사람들에게 없어서는 안 될 도구 중 하나가 되었습니다. 위치를 찾거나 경로를 계획하거나 주변 정보를 검색할 때 지도가 도움이 될 수 있습니다. Amap API는 PHP 언어의 강력한 처리 기능과 결합된 풍부한 지도 서비스를 제공하며, 이 두 가지를 사용하여 대화형 지도 마커를 만들 수 있습니다.

준비:

  1. Amap 개발자 계정을 등록하세요.
  2. 새 웹 서비스 애플리케이션을 만들고 개발자 키를 받으세요.

코드 구현:
먼저 지도와 해당 대화형 기능을 수용할 수 있는 기본 HTML 페이지 구조를 준비해야 합니다. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>交互式地图标记示例</title>
  <style>
    #map {
      width: 100%;
      height: 600px;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_KEY"></script>
  <script src="https://webapi.amap.com/ui/1.1/main.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script>
    // 创建地图对象
    var map = new AMap.Map("map", {
      zoom: 13, // 设置地图缩放级别
      center: [116.397428, 39.90923] // 设置地图中心点坐标
    });

    // 添加地图控件
    AMap.plugin(['AMap.ToolBar'], function() {
      map.addControl(new AMap.ToolBar());
    });

    // 点击地图事件
    map.on('click', function(e) {
      // 获取点击的经纬度坐标
      var lnglat = e.lnglat;
      var longitude = lnglat.getLng();
      var latitude = lnglat.getLat();

      // 创建 Marker 对象并添加到地图上
      var marker = new AMap.Marker({
        position: [longitude, latitude]
      });
      map.add(marker);

      // 弹窗显示经纬度信息
      var infoWindow = new AMap.InfoWindow({
        content: '经度：' + longitude + '<br>纬度：' + latitude
      });
      marker.on('click', function() {
        infoWindow.open(map, marker.getPosition());
      });
    });
  </script>
</body>
</html>

분석:

  1. Amap 및 jQuery 라이브러리의 리소스 링크를 도입하여 페이지에서 관련 API를 사용할 수 있습니다.
  2. 지도 개체를 만들고 확대/축소 수준과 중심점 좌표를 설정하세요.
  3. 확대/축소 도구 모음을 포함한 지도 컨트롤이 추가되었습니다.
  4. 지도의 클릭 이벤트를 듣고 클릭 위치의 위도 및 경도 좌표를 얻습니다.
  5. 마커 개체를 생성하여 지도에 추가합니다.
  6. 정보 양식 개체를 생성하고 마커 지점을 클릭하면 위도 및 경도 정보를 표시합니다.

참고: 코드의

  1. 을 자신의 개발자 키로 바꾸세요. YOUR_KEY
    2. Amap API는 HTTPS 프로토콜을 사용하므로 브라우저 오류를 방지하려면 HTTPS를 지원하는 서버에 웹 페이지를 배포하는 것이 좋습니다.
요약:

이 기사에서는 PHP 언어와 Amap API를 사용하여 간단한 대화형 지도 표시 예제를 구현합니다. 독자는 자신의 필요와 지도 API의 문서화에 따라 경로 계획, 검색 기능 추가 등과 같은 기능을 추가로 확장할 수 있습니다. 지도 서비스를 이용하면 사용자에게 보다 편리한 지리 정보 표시와 상호 작용 경험을 제공할 수 있습니다.

위 내용은 PHP 및 Amap API를 사용하여 대화형 지도 마커 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

php jquery html 对象 事件 https
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：PHP 데이터베이스 작업 기술: mysqli_num_rows 함수를 사용하여 쿼리 결과의 행 수를 얻는 방법다음 기사：PHP 데이터베이스 작업 기술: mysqli_num_rows 함수를 사용하여 쿼리 결과의 행 수를 얻는 방법

관련 기사

더보기