집 > 기사 > 웹 프론트엔드 > vue-baidu-map을 페이지에 입력하고 자동으로 배치하는 방법

vue-baidu-map을 페이지에 입력하고 자동으로 배치하는 방법

php中世界最好的语言원래의: 2018-06-01 17:25:461743검색

이번에는 페이지 진입 시 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('center:', _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('您的位置：'+r.point.lng+','+r.point.lat);
        // }
        // else {
        //   alert('failed'+this.getStatus());
        // }
        // },{enableHighAccuracy: true})
      }
    }
  }
</script>

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