JavaScript 및 Tencent Maps를 활용하여 지도에서 주변 시설물 조회 기능 구현-JS 튜토리얼-php.cn

JavaScript 및 Tencent Maps를 활용하여 지도에서 주변 시설물 조회 기능 구현

PHPz

풀어 주다： 2023-11-21 15:53:14

원래의

1102명이 탐색했습니다.

JavaScript 및 Tencent Maps를 활용하여 지도에서 주변 시설물 조회 기능 구현

JavaScript와 Tencent Maps를 사용하여 주변 시설물의 조회 기능을 지도에 구현

최근 인터넷과 모바일 기기의 급속한 발전으로 지도 서비스는 사람들의 삶에서 점점 더 중요해지고 있습니다. 여행 내비게이션, 주변 시설 문의, 위치 공유 등 지도 서비스는 빼놓을 수 없는 역할을 합니다. 많은 지도 서비스 중에서 Tencent Maps는 정확한 위치 지정과 풍부한 기능으로 대다수 사용자에게 사랑을 받고 있습니다. 이 글에서는 JavaScript와 Tencent Maps를 사용하여 지도 주변 시설 쿼리 기능을 구현하는 방법을 소개하고 해당 코드 예제를 제공합니다.

1. 사전 준비
지도에서 주변 시설물 조회 기능을 구현하기 전에 먼저 준비해야 할 것이 있습니다. 먼저 Tencent Maps 오픈 플랫폼에 개발자 계정을 등록하고 애플리케이션을 만들어야 합니다. 등록 주소는 https://lbs.qq.com/입니다. 등록이 완료되면 Tencent Map API 호출 시 인증에 사용되는 개발자 키(key)를 얻을 수 있습니다.

2. HTML 페이지 구축
HTML 페이지를 구축할 때 Tencent Maps JavaScript API의 관련 코드를 도입해야 합니다. HTML 페이지에 다음 코드를 추가하세요:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>地图周边设施查询</title>
</head>
<body>
    <div id="map" style="width: 100%; height: 400px;"></div>
    <script src="https://map.qq.com/api/js?v=2.exp&key=开发者密钥"></script>
    <script src="script.js"></script>
</body>
</html>

로그인 후 복사

그 중 개발자 키는 Tencent Map Open Platform에서 얻은 실제 키로 교체해야 합니다. 开发者密钥 需要替换为你在腾讯地图开放平台上获取的实际密钥。

三、JavaScript代码的编写
在 JavaScript 代码中，我们将通过调用腾讯地图 API 实现地图的初始化、定位以及周边设施查询功能。创建一个 script.js 文件，将以下代码复制进去：

// 创建地图实例
var map = new qq.maps.Map(document.getElementById("map"), {
    zoom: 13, // 设置地图缩放级别
});

// 获取用户当前位置
navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude; // 获取纬度
    var lng = position.coords.longitude; // 获取经度

    // 将地图中心点设置为用户当前位置
    map.setCenter(new qq.maps.LatLng(lat, lng));

    // 在地图上添加当前位置的标记
    new qq.maps.Marker({
        position: new qq.maps.LatLng(lat, lng),
        map: map,
    });
});

// 在地图上进行周边设施查询
function searchNearby(keyword) {
    var service = new qq.maps.SearchService({
        map: map,
    });

    // 根据关键词进行周边查询
    service.searchNearBy(keyword, map.getCenter(), 1000);
}

// 为搜索按钮绑定事件
document.getElementById("search-btn").addEventListener("click", function() {
    var keyword = document.getElementById("search-input").value;
    searchNearby(keyword);
});

로그인 후 복사

在这段代码中，首先创建了一个地图实例，并将其显示在页面上的 map 容器中。接着，通过调用 navigator.geolocation.getCurrentPosition() 方法获取用户的当前位置，并将地图中心点定位于用户所在位置。然后，在地图上添加了一个标记，标记用户当前位置。

最后，定义了一个 searchNearby() 函数，该函数接收一个关键词作为参数，并通过调用 qq.maps.SearchService 的 searchNearBy() 方法进行周边设施查询。查询范围为当前地图中心点附近1千米的区域。

为了触发地图查询，我们添加了一个搜索按钮，并通过 addEventListener 方法为其绑定了一个点击事件，该事件会调用 searchNearby()

3. JavaScript 코드 작성

JavaScript 코드에서는 Tencent Map API를 호출하여 지도 초기화, 위치 확인 및 주변 시설 쿼리 기능을 구현합니다. script.js 파일을 생성하고 다음 코드를 파일에 복사하세요.
rrreee

이 코드에서는 지도 인스턴스가 먼저 생성되어 페이지의 지도에 표시됩니다. 코드> 컨테이너. 다음으로, navigator.geolocation.getCurrentPosition() 메서드를 호출하여 사용자의 현재 위치를 얻고 지도 중심점을 사용자 위치에 배치합니다. 그런 다음 사용자의 현재 위치를 표시하는 마커가 지도에 추가됩니다.

마지막으로 키워드를 매개변수로 받아 qq.maps.SearchService의 searchNearBy()를 호출하는 searchNearby() 함수가 정의되었습니다. > 주변 시설물을 조회하는 방법입니다. 쿼리 범위는 현재 지도 중심에서 가까운 1km 영역입니다.

🎜지도 쿼리를 실행하기 위해 검색 버튼을 추가하고 searchNearby() 쿼리 함수를 호출하는 addEventListener 메서드를 통해 클릭 이벤트를 바인딩했습니다. 운영. 동시에 검색 버튼에 검색 키워드를 입력할 수 있는 입력 상자를 설정했습니다. 🎜🎜4. 효과 시연🎜위의 코드 작성을 완료한 후 페이지를 새로 고치면 페이지에 표시된 Tencent Maps 기반 지도를 볼 수 있습니다. 또한 지도의 중심점이 현재 사용자의 위치에 자동으로 위치하게 됩니다. 이때, 입력창에 키워드(식당, 은행, 학교 등)를 입력한 후, 검색 버튼을 클릭하면 해당 키워드와 함께 주변 시설물 마커를 지도에서 볼 수 있습니다. 🎜🎜요약🎜이 글에서는 JavaScript와 Tencent Maps를 사용하여 지도 주변 시설 쿼리 기능을 구현하는 방법을 소개합니다. Tencent Map API를 호출하면 페이지에 지도를 쉽게 표시할 수 있으며, 사용자의 현재 위치 파악 및 주변 시설 검색을 통해 사용자에게 편리한 지도 서비스를 제공할 수 있습니다. 이 글이 여러분에게 도움이 되기를 바라며, 누구나 이 글을 시험해보고 자신의 프로젝트에 적용해 보시기 바랍니다. 🎜

위 내용은 JavaScript 및 Tencent Maps를 활용하여 지도에서 주변 시설물 조회 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!