JS 및 Baidu 지도를 사용하여 지도에 사용자 정의 위치 마커를 추가하는 방법

JS 및 Baidu Maps를 사용하여 지도에 사용자 정의 위치 마커를 추가하는 기능을 구현하는 방법

소개: Baidu Maps는 매우 일반적으로 사용되는 지도 서비스로, 추가를 포함하여 풍부한 지도 표시 및 대화형 기능을 제공합니다. 사용자 정의 위치 표시. JS 및 Baidu Map API를 사용하면 지도에 사용자 정의 위치 마커를 추가하는 기능을 쉽게 구현할 수 있습니다. 다음은 구체적인 코드 예입니다.

1단계: 준비

1. 먼저, HTML 파일에서 Baidu를 가져옵니다.

   <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的百度地图API密钥"></script>

2. 페이지에 지도 컨테이너의 div 요소를 생성하고 아래와 같이 너비와 높이를 지정합니다.

   <div id="map" style="width:800px;height:600px;"></div>

3. 이벤트를 트리거하는 버튼 또는 기타 요소를 추가합니다. , 아래와 같이 위치 마커 추가 기능을 실행하려면 다음을 사용하세요.

   <button id="addMarkerBtn">添加标记</button>

2단계: 지도 및 마커 기능 추가

1. 아래와 같이 JS에서 지도 객체를 초기화합니다.

   var map = new BMap.Map("map");              // 创建地图实例
   var point = new BMap.Point(116.404, 39.915); // 创建一个初始坐标点
   map.centerAndZoom(point, 15);               // 初始化地图，设置中心点和缩放级别
   map.addControl(new BMap.NavigationControl());  // 添加平移缩放控件
   map.addControl(new BMap.ScaleControl());       // 添加比例尺控件

2. 지도 추가 클릭 이벤트, 아래와 같이 지도를 클릭하여 장소 마커를 추가하는 데 사용됩니다.

   map.addEventListener("click", function(e) {
    var point = e.point; // 获取点击的坐标点
    var marker = new BMap.Marker(point); // 创建新的地点标记
    map.addOverlay(marker); // 将标记添加到地图上
   });

3. 버튼 클릭 이벤트를 추가하고, 아래와 같이 지도 클릭 이벤트를 트리거하는 데 사용됩니다.

   var addMarkerBtn = document.getElementById("addMarkerBtn");
   addMarkerBtn.addEventListener("click", function() {
    map.addEventListener("click", function(e) {
        var point = e.point; // 获取点击的坐标点
        var marker = new BMap.Marker(point); // 创建新的地点标记
        map.addOverlay(marker); // 将标记添加到地图上
    });
   });

3단계: 효과 테스트
위 코드를 저장하고 브라우저에서 HTML 파일을 열면 사용자 정의 위치 마커를 추가할 수 있는 지도 페이지가 표시됩니다. 지도의 아무 곳이나 클릭하면 지도에 새로운 위치 표시가 나타납니다.

참고:

• Baidu Map API를 사용하기 전에 Baidu Map Open Platform에서 API 키를 신청하고 코드에서 "바이두 지도 API 키"를 바꿔야 합니다.
• 위 코드는 실제 적용 시 위치 표시의 스타일과 정보 내용을 사용자 정의해야 하는 간단한 예입니다.

요약:
위 단계를 통해 JS 및 Baidu Map API를 사용하여 지도에 사용자 지정 위치 마커를 추가하는 기능을 구현할 수 있습니다. 이는 특정 위치를 표시해야 하는 웹사이트나 애플리케이션에 유용합니다. 이 기사의 코드 예제가 도움이 되기를 바랍니다.

위 내용은 JS 및 Baidu 지도를 사용하여 지도에 사용자 정의 위치 마커를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!