Vue에서 Baidu 지도를 사용하는 방법

이번에는 Vue에서 Baidu map을 사용하는 방법과 Vue에서 Baidu 지도를 사용할 때 어떤 주의사항이 있는지 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

최근 프로젝트에서는 특정 주소를 바이두 좌표계의 위도와 경도로 변환해야 했는데 요구사항이 비교적 간단해서 GitHub의 Baidu Vue 플러그인은 사용되지 않았습니다.

더 이상 고민하지 말고 코드를 게시하세요:

소개: 바이두 지도를 사용하는데 필요한 구성요소에

export default {
  methods: {
    loadBMapScript () {
      let script = document.createElement('script');
        script.src = 'http://api.map.baidu.com/api?v=3.0&ak=你的akKey&callback=bMapInit';
        document.body.appendChild(script);
    },
    qeuryLocation () {
      let myGeo = new BMap.Geocoder();
        // 地址转换成坐标系
        myGeo.getPoint('北京市海淀区上地10街10号', function (point) {
          if (point) {
            console.log(point);
          }
        },
        '北京市');
    }
  },
  mouted () {
    this.loadBMapScript();
    window['bMapInit'] = () => {
      this.qeuryLocation();
    };
  }
}

를 직접 소개합니다. 이제 Baidu 지도를 정상적으로 사용할 수 있습니다.

많은 조사 끝에 마침내 이 문제의 원인이 페이지 로딩 순서라는 사실을 발견했습니다. 자세한 내용은 공식 웹사이트에서도 확인하시기 바랍니다

저는 vue2.0을 사용하고 있기 때문에 마운트된 메소드에서 다음 두 가지 메소드를 호출했습니다.

var map = new BMap.Map("container");  //创建地图实例，注意在调用此构造函数时应确保容器元素已经添加到地图上
var point = new BMap.Point(116.404, 39.915); //创建点坐标， 地图必须经过初始化才可以执行其他操作

이 기사의 사례를 읽으신 후 메소드를 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 다른 관련 기사를 주목하시기 바랍니다. PHP 중국어 웹사이트!

추천 자료:

Vue가 CDN을 사용하여 첫 번째 화면 로딩을 최적화하는 방법

vuejs에서 v-show를 사용할 수 없는 이유는 무엇입니까

위 내용은 Vue에서 Baidu 지도를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!