JS 및 Baidu Maps를 사용하여 지도 영역 내 검색 기능을 구현하는 방법-JS 튜토리얼-php.cn

JS 및 Baidu Maps를 사용하여 지도 영역 내 검색 기능을 구현하는 방법

PHPz

풀어 주다： 2023-11-21 10:53:17

원래의

1171명이 탐색했습니다.

JS 및 Baidu Maps를 사용하여 지도 영역 내 검색 기능을 구현하는 방법

JS와 바이두 지도를 활용해 지도 영역 내 검색 기능을 구현하는 방법

모바일 인터넷의 급속한 발전으로 지도 애플리케이션은 사람들의 일상생활에 없어서는 안 될 도구 중 하나가 되었습니다. 수많은 지도 애플리케이션 중에서 Baidu Maps는 가장 인기 있는 애플리케이션 중 하나입니다. Baidu 지도는 풍부한 지도 데이터와 강력한 API 인터페이스를 제공하여 개발자에게 많은 가능성을 제공합니다. 이 기사에서는 JS 및 Baidu Map API를 사용하여 지도 영역 내에서 검색 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

먼저 Baidu Map API의 JS 라이브러리를 소개해야 합니다. HTML의 태그에 다음 코드를 삽입하세요. 标签中引入以下代码：

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

로그인 후 복사

这里的 ak 是您在百度地图开放平台申请的密钥，如果您还没有申请，可以去[百度地图开放平台](http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey)申请一个。

接下来，我们需要创建一个地图容器来显示地图。在HTML的 <body> 标签中创建一个 <div> 元素，并为其设置一个唯一的 id ，如下所示：

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

로그인 후 복사

然后，我们可以在JS代码中通过获取该 id 来创建一个地图对象，并设置地图显示的初始中心点和缩放级别，如下所示：

var map = new BMap.Map("map");
var point = new BMap.Point(116.404, 39.915); // 设置地图初始中心点
map.centerAndZoom(point, 15); // 设置地图初始缩放级别

로그인 후 복사

这里的 BMap.Map 是百度地图API提供的地图构造函数，通过 BMap.Point 创建一个地图中心点对象，然后通过 map.centerAndZoom 方法设置地图的中心点和缩放级别。

接下来，我们需要添加一个搜索输入框和搜索按钮，用于用户输入搜索关键词和触发搜索操作。在HTML的 <body> 标签中添加以下代码：

<input type="text" id="keyword" placeholder="请输入搜索关键词">
<button onclick="search()">搜索</button>

로그인 후 복사

然后，在JS代码中获取用户输入的搜索关键词，并通过百度地图API的 searchInBounds 方法进行区域内的搜索，如下所示：

function search() {
  var keyword = document.getElementById("keyword").value;
  var bounds = map.getBounds(); // 获取地图可视区域范围
  var searchOptions = {
    onSearchComplete: function(results) {
      // 处理搜索结果
      console.log(results);
    }
  };
  var localSearch = new BMap.LocalSearch(map, searchOptions);
  localSearch.searchInBounds(keyword, bounds);
}

로그인 후 복사

这里的 map.getBounds() 方法返回地图当前可视区域的范围，BMap.LocalSearch 是百度地图API提供的本地搜索构造函数，通过 localSearch.searchInBounds 方法进行区域内的关键词搜索。

最后，我们可以在搜索结果的回调函数中处理搜索结果，比如在地图上显示搜索结果的标记点。可以使用 BMap.Marker 构造函数来创建标记点，并通过 map.addOverlay

var searchOptions = {
  onSearchComplete: function(results) {
    map.clearOverlays(); // 清除地图上的所有标记点
    for (var i = 0; i < results.getCurrentNumPois(); i++) {
      var poi = results.getPoi(i);
      var point = poi.point;
      var marker = new BMap.Marker(point); // 创建标记点
      map.addOverlay(marker); // 添加标记点到地图上
    }
  }
};

로그인 후 복사

여기 ak는 Baidu Map Open Platform에 신청한 키입니다. 아직 적용되지 않은 경우 [Baidu Map Open Platform](http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey)에서 신청할 수 있습니다.

다음으로 지도를 표시할 지도 컨테이너를 만들어야 합니다. 아래와 같이 HTML 태그에

<div> 요소를 생성하고 여기에 고유한 id를 설정합니다.rrreee 
 그런 다음 아래와 같이 id를 가져와서 JS 코드로 지도 객체를 생성하고 지도 표시의 초기 중심점과 확대/축소 수준을 설정할 수 있습니다. 
rrreee🎜여기 BMap. Map은 Baidu Map API에서 제공하는 지도 생성자입니다. BMap.Point를 통해 지도 중심점 객체를 생성한 후 map.centerAndZoom 메서드를 전달하여 중심을 설정합니다. 지도의 지점 및 확대/축소 수준. 🎜🎜다음으로 사용자가 검색 키워드를 입력하고 검색 작업을 실행할 수 있도록 검색 입력 상자와 검색 버튼을 추가해야 합니다. HTML의  태그에 다음 코드를 추가합니다. 🎜rrreee🎜 그런 다음 사용자가 JS 코드에 입력한 검색 키워드를 가져와 Baidu Map API의 searchInBounds를 사용합니다. code > 아래와 같이 영역 내에서 검색하는 메서드: 🎜rrreee🎜여기서 <code>map.getBounds() 메서드는 지도의 현재 표시 영역인 BMap의 범위를 반환합니다. LocalSearch는 Baidu Map API에서 제공하는 지역 검색 생성자로서 localSearch.searchInBounds 메소드를 사용하여 해당 지역에서 키워드 검색을 수행합니다. 🎜🎜마지막으로 검색결과의 표시된 지점을 지도에 표시하는 등 검색결과의 콜백 함수에서 검색결과를 처리할 수 있습니다. 마커는 아래와 같이 BMap.Marker 생성자를 사용하여 생성하고 map.addOverlay 메서드를 통해 지도에 추가할 수 있습니다. 🎜rrreee🎜이 시점에서 우리는 모든 코드를 JS와 Baidu Map API를 이용하여 지도 영역 내 검색 기능 구현이 완료되었습니다. 다음으로, 사용자 정의 스타일을 추가하거나 마커를 클릭하여 더 많은 정보를 표시하는 등 필요에 따라 추가로 최적화하고 확장할 수 있습니다. 🎜🎜요약: 🎜이 글에서는 JS와 Baidu Map API를 사용하여 지도 영역 내에서 검색 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. Baidu Map API를 사용하면 지도 위 지역의 키워드를 쉽게 검색하고 검색 결과를 표시할 수 있습니다. 이 글이 도움이 되었길 바라며, 귀하의 개발 성공을 기원합니다! 🎜

위 내용은 JS 및 Baidu Maps를 사용하여 지도 영역 내 검색 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!