JS 및 Baidu 지도를 사용하여 지도에 사용자 정의 위치 마커를 추가하는 방법-JS 튜토리얼-php.cn

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

王林

풀어 주다： 2023-11-21 11:58:59

원래의

1296명이 탐색했습니다.

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

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

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

1단계: 준비

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

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

로그인 후 복사

페이지에 지도 컨테이너의 div 요소를 생성하고 아래와 같이 너비와 높이를 지정합니다.
```
<div id="map" style="width:800px;height:600px;"></div>
```
로그인 후 복사
이벤트를 트리거하는 버튼 또는 기타 요소를 추가합니다. , 아래와 같이 위치 마커 추가 기능을 실행하려면 다음을 사용하세요.
```
<button id="addMarkerBtn">添加标记</button>
```
로그인 후 복사

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

아래와 같이 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());       // 添加比例尺控件

로그인 후 복사

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

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

로그인 후 복사

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

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 파일을 열면 사용자 정의 위치 마커를 추가할 수 있는 지도 페이지가 표시됩니다. 지도의 아무 곳이나 클릭하면 지도에 새로운 위치 표시가 나타납니다.

참고: