vue-baidu-map 페이지 진입 후 자동 위치 지정 방법에 대한 자세한 설명

이번에는 vue-baidu-map이 페이지 진입 후 자동 위치 지정을 구현하는 방법에 대해 자세히 설명합니다. vue-baidu-map이 페이지 진입 후 자동 위치 지정을 구현하는 주의 사항은 무엇입니까? 살펴보자.

전에 쓴 글 : 저는 프론트엔드 초보일 뿐이고, 글에 언급된 내용은 부족한 부분이 있을 수 있어 참고용으로만 제공합니다. 부족한 부분이 있으면 지적해주시면 감사하겠습니다! , 도움이 되길 바랍니다!

좋아요, 본론으로 들어가겠습니다. 사실 예전에도 이 문제로 고민을 하다가 온라인으로 검색해 보았으나 해결 방법을 찾지 못했습니다. 오늘이 되어서야 나는 GitHub에서 상사에게 문제를 제기할 자유를 얻었고, 그것이 나를 깨웠습니다. 사실 제가 너무 빠른 성공을 바라는 마음에 vue-baidu-map에서 제공하는 참조 문서를 주의 깊게 읽지 않았기 때문일 수도 있습니다. 아니면 읽고 잊어버렸을 수도 있습니다!

우선 명확히 해두자면(문서의 원본 단어) Baidu Map JS API에는 JSONP라는 하나의 로드 방법만 있으므로 BaiduMap 구성 요소와 모든 하위 구성 요소의 렌더링은 비동기식으로만 수행될 수 있습니다. 따라서 맵 API가 로드된 후에만 실행할 수 있는 코드를 실행하려면 구성 요소의 준비 이벤트를 사용하세요. 이때 모델 레이어를 수정하는 것은 물론, vue 자체 lifecycle에서 BMap 클래스를 호출하지 마세요.

잘못된 사용법

시도해 보았는데 위의 방법도 가능하고 효과도 볼 수 있을 것 같지만, 저자가 제시한 올바른 방법을 사용하는 것이 좋을 것 같습니다!

올바른 사용법

이 방법을 추천드려요! 페이지 진입시 자동 위치 지정 문제를 해결하기 위해 다음과 같은 방법도 있습니다.

다음은 제 작문 방법입니다. 참고용으로 부족한 점이 있으면 지적해주세요. 저는 그냥 초보입니다. 하하!

템플릿:

<template>
  <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler" @load="loadding" :scroll-wheel-zoom="true"
    :mapStyle="{styleJson: styleJson}">
    <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="false" :autoLocation="true"
      :locationIcon="{url: require(&#39;../../svg/location.svg&#39;), size: {width: 18, height: 18}}" 
      @locationSuccess="getLoctionSuccess" @locationError="getLocationError">
    </bm-geolocation>
    <!-- 自定义定位图标覆盖物 -->
    <bm-marker :position="autoLocationPoint"
      :icon="{url: require(&#39;../../svg/location.svg&#39;), size: {width: 18, height: 18}}" v-if="initLocation">
    </bm-marker>
  </baidu-map>
</template>

JS 구현:

<script>
  export default {
    data () {
      return {
        // 省略一部分
        autoLocationPoint: {lng: 0, lat: 0},
        initLocation: false,
      }
    },
    methods: {
      handler ({BMap, map}) {
        let _this = this;  // 设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例；
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
          console.log(r);
          _this.center = {lng: r.longitude, lat: r.latitude};   // 设置center属性值
          _this.autoLocationPoint = {lng: r.longitude, lat: r.latitude};   // 自定义覆盖物
          _this.initLocation = true; 
          console.log(&#39;center:&#39;, _this.center)  // 如果这里直接使用this是不行的
        },{enableHighAccuracy: true})
        // 下面注释是百度地图API官方实现方法，因为我使用自定义图标覆盖物，所以没有使用这种方法！
        // 如使用以下这种方法，那么我Template里所写的自定义定位图标代码是不需要的
        // var geolocation = new BMap.Geolocation();
        // geolocation.getCurrentPosition(function(r){
        // if(this.getStatus() == BMAP_STATUS_SUCCESS){
        //   var mk = new BMap.Marker(r.point);
        //   map.addOverlay(mk);
        //   map.panTo(r.point);
        //   alert(&#39;您的位置：&#39;+r.point.lng+&#39;,&#39;+r.point.lat);
        // }
        // else {
        //   alert(&#39;failed&#39;+this.getStatus());
        // }
        // },{enableHighAccuracy: true})
      }
    }
  }
</script>

코드를 직접 복사하는 경우 코드를 모두 게시하지 않았으므로 선택적으로 복사해야 하며, 프로젝트에 직접 복사하면 문제가 발생할 수 있으니 주의하세요! 하지만 이 코드는 비교적 간단해서 조금만 노력하면 이해할 수 있습니다. 하하!

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

vue 팝업 메시지 구성 요소를 사용하는 단계에 대한 자세한 설명

Angular 라우팅 강조 표시 구현 단계에 대한 자세한 설명

위 내용은 vue-baidu-map 페이지 진입 후 자동 위치 지정 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!