vue.js에서 Baidu Map의 jsApi를 어떻게 소개하나요? Baidu Map의 jsApi를 도입하는 두 가지 방법 소개

이 기사에서는 vue.js?에서 Baidu Map의 jsApi를 소개하는 방법에 대한 기사 내용을 소개합니다. Baidu Map의 jsApi를 소개하는 두 가지 방법에 대한 이 소개가 도움이 필요한 친구들에게 도움이 되기를 바랍니다.

머리말

오늘은 바이두맵을 활용해야 하는 프로젝트가 있습니다. 일반적으로 모바일 단말기에서 바이두맵을 사용할 때 이런 식으로 바이두맵의 jsApi를 직접 소개합니다.

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=D9b45bc6f98deafc489e9ac1bc7f7612"></script>

이 방법의 원리는 BMap 객체를 전역 창 객체에 직접 추가하는 것인데, 이를 통해 API가 로드된 페이지 어디에서나 Baidu Map API를 사용할 수 있습니다. 그러나 단일 파일 구성 요소를 사용하여 vue+webpack으로 개발된 프로젝트에는 도입 방법만으로는 충분하지 않습니다. 그래서 인터넷으로 정보를 찾아봤습니다. 여기에는 두 가지 방법이 있습니다.

스크립트 태그 직접 도입

첫 번째 방법은 직접 도입하는 방법입니다. 물론, vue 파일에서 bmap 객체를 사용하려면 webpack 구성에서 외부 확장도 설정해야 합니다. 파일(외부 속성)

//webpack.dev.conf.js

externals: {
    'BaiduMap': 'BMap'
}

externales 속성은 공식 설명에서 유래합니다:

가져온 특정 패키지가 번들로 패키징되는 것을 방지하고 대신 런타임(런타임)에서 이러한 외부 종속성을 얻습니다.

웹팩 문서에는 패키징하는 대신 CDN에서 jQuery를 가져오는 예도 나와 있습니다.
index.html

<script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous">
</script>

webpack.config.js

externals: {
  jquery: 'jQuery'
}

import $ from 'jquery';

$('.my-element').animate(...);

이 예시를 참고하면 프로젝트에 js 파일을 도입하면 Baidu Map의 API를 직접 사용할 수 있습니다.

import BaiduMap from 'BaiduMap'
export default {
    name: 'Index',
    .....

mounted() {
        
    var map = new BaiduMap.Map('allmap')                        // 创建地图实例
    var point = new BaiduMap.Point(120.343373,31.540212)        // 创建中心点坐标
    var marker = new BaiduMap.Marker(point) // 创建标注

    map.centerAndZoom(point,15)                         // 初始化地图，设置中心点坐标和地图级别


    map.addOverlay(marker) // 将标注添加到地图中

}

여기서 지도 API 인스턴스화는 마운트된 단계에서 가장 잘 수행됩니다. DOM이

<p id="allmap"></p>

와 같은 공식 예제를 사용하는 경우 마운트된 단계에서만 DOM이 생성되고 마운트됩니다.

모듈화를 통해 도입된 방식

실제로 바이두 지도는 지난해 jsApi를 기반으로 해당 오픈소스 구성요소인 vue와 React를 공식적으로 오픈소스로 공개했으며, npm을 통해 직접 설치해 사용할 수 있다.
VUE:[https://github.com/Dafrok/vue...]
React:[https://github.com/huiyan-fe/...]
Github에서 해당 문서를 참조하여 사용할 수 있습니다. . 여기서는 vue만 소개합니다.
설치

npm i vue-baidu-map --save

초기화

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  ak: 'YOUR_APP_KEY'    //这个地方是官方提供的ak密钥
})

사용

<template>
  <baidu-map class="map">
  </baidu-map>
</template>

<style>
/* The container of BaiduMap must be set width & height. */
.map {
  width: 100%;
  height: 300px;
}
</style>

관련 권장 사항:

vue 패키지 구성 요소는 어떻게 구성되나요? Vue 탭 전환 구성 요소를 캡슐화하는 방법(코드 포함)

Vue 사용자 정의 명령어 및 명령어 정의 함수에 대한 자세한 분석(코드)

위 내용은 vue.js에서 Baidu Map의 jsApi를 어떻게 소개하나요? Baidu Map의 jsApi를 도입하는 두 가지 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!