Mapbox를 사용한 Google 지도 복제

개발자를 위한 매핑 및 위치 클라우드 플랫폼입니다.

그것은 최고의 사용자 정의 기능을 가지고 있으며 동시에 프로젝트에 통합하기가 매우 쉽습니다.

따라서 둘 중 하나를 선택하는 것이 프로젝트에 지도를 통합하는 첫 단계가 될 것입니다.


이 튜토리얼에서는 HTML 파일에 mapbox CDN을 추가했습니다.

다음 단계로 이동하면 코드 맵의 본문에 다음 코드를 추가하자마자 HTML 파일 본문에 추가하라는 코드가 제공됩니다. 그러면 프로젝트에 통합됩니다.

<div id='map' style='width: 400px; height: 300px;'></div>
<script>
  mapboxgl.accessToken = 'PRIVATE_KEY';
  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11'
  });
</script>

Access Token은 맵박스에 계정을 등록하는 즉시 사용자에게 생성되는 개인 키입니다.

라이브로 이동하면 다음 출력을 볼 수 있습니다.


### mapbox를 사용하여 간단한 프로젝트를 만들어 봅시다.

Google 지도 클론을 만들려면 먼저 기본 코드를 조작해야 합니다. 먼저 사용자 위치를 얻고 이를 위해 위치에 대한 웹 콘텐츠 액세스를 제공하는 지리적 위치 개체를 반환합니다navigator.geolocation.

사용자의 현재 위치를 얻기 위해 더 멀리 이동하면 사용할 것입니다navigator.geolocation.getCurrentPosition.

navigator.geolocation.getCurrentPosition(success, error, [options])

getCurrentPosition은 세 개의 인수를 먼저 사용합니다. 성공이면 위치를 인수로 사용하고 모든 것이 잘 진행되면 위치를 반환하고 오류는 기본 위치를 반환하는 데 사용되며 옵션에서 더 많은 매개 변수를 추가하여 위치를 수정할 수 있습니다.

이제 app.js는 다음과 같이 표시됩니다.

mapboxgl.accessToken = 'PRIVATE_KEY';

  navigator.geolocation.getCurrentPosition(succeslocation,errorlocation,{
    enableHighAccuracy:true
})

function succeslocation(position){
    console.log(position)

}
function errorlocation(){

}
function setupmap(){
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    zoom:15
})
}

콘솔에서 사용자 위치의 경도 및 위도 값을 추출할 수 있는 위치 개체를 가져옵니다.

경도와 위도의 값을 전달하려면 mapbox의 지도 객체에 중심의 또 다른 키-값 쌍을 추가해야 합니다.

 mapboxgl.accessToken = 'PRIVATE_KEY';

  navigator.geolocation.getCurrentPosition(succeslocation,errorlocation,{
    enableHighAccuracy:true
})

function succeslocation(position){
    console.log(position)
    setupmap([position.coords.longitude,position.coords.latitude])
}
function errorlocation(){
setupmap([77.20,28.708])
}
function setupmap(center){
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center:center,
    zoom:15
})
}

One thing to notice is that mapbox take longitude argument first instead of latitude

우리는 또한 경도와 위도의 기본값이 오류 함수에 제공된다는 것을 관찰할 수 있습니다. 이를 통해 지도를 로드하자마자 현재 위치에 있게 됩니다.

추가 mapbox를 이동하면 많은 기능을 제공하므로 탐색 컨트롤을 추가하려는 경우 addControl와 함께 NavigationControl 함수를 사용할 수 있습니다. 구문과 출력은 아래에 표시됩니다.

map.addControl(new mapboxgl.NavigationControl());

마지막으로 addcontrol와 함께 MapboxDirection를 사용해야 하는 구문을 달성하기 위해 지도에 방향 컨트롤을 추가하고 동일한 출력이 표시됩니다.

map.addControl(
    new MapboxDirections({
    accessToken: mapboxgl.accessToken
    }),
    'top-left'
    );

}