계정 등록
===========
먼저 가오더 지도 개발자가 되어야 합니다. 즉, 계정이 있어야 합니다. 물론 회사 계정을 갖는 것이 가장 좋지만, 계정이 없다면 일단 직접 등록해 두시기 바랍니다.
등록 후 콘솔을 클릭하고 오른쪽 상단에 새 애플리케이션을 생성하고 필요한 환경을 선택합니다. Vue의 경우 아마도 웹 측일 것이며 개발에 필요한 키를 볼 수 있습니다.
Amap 플러그인 설치
우선, 여기 예시 프로젝트에서는 vue-cli3 스캐폴딩을 사용하고 있는데, 익숙하지 않다면 먼저 vue-cli3 생성 프로젝트를 살펴보세요.
npm 설치 vue-amap
npm install vue-amap --save
페이지 소개 및 구성 요소 구성
여기 내 프로젝트에서는 지도를 여러 곳에 사용하기 때문에 지도를 분리해 별도의 컴포넌트로 만들었고, 페이지에서 쉽게 참조할 수 있도록 전역 컴포넌트로 만들었다.
전역 구성 요소 AMap 만들기
전역 맵 구성 요소 파일 AMap.vue 및 전역 구성 요소 구성 파일 globalComponents.js를 생성합니다.
프로젝트 디렉토리 구조는 그림과 같습니다.
main.js 페이지에는 vue-amap 및 globalComponents.js가 소개되어 있습니다.
'vue'에서 Vue 가져오기
'./App.vue'에서 앱 가져오기
'./router'에서 라우터 가져오기
'./store'에서 저장소 가져오기
'./assets/commonJs/globalComponents' //전역 구성 요소 구성 파일에서 globalComponents 가져오기
import VueAMap from 'vue-amap'; // Gaode 지도
import {AMapKey} from './assets/commonJs/constDatas'//AMapKey는 Amap 개발 키입니다. 여기 특수 파일 관리에 넣어 두었습니다. 이렇게 할 필요는 없습니다.
Vue.use(VueAMap) //플러그인 사용법 설명
Vue.use(globalComponents) //플러그인 사용법 설명
//다음은 vue-amap 초기화입니다. AMapKey를 자신의 키로 바꾸세요.
VueAMap.initAMapApiLoader({
key:AMapKey, plugin: \['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geolocation', \], v: '1.4.4'})
Vue.config.productionTip = 거짓
새로운 보기({
라우터,
가게,
렌더링: h => h(앱)
}).$mount('#앱')
AMap을 전역 구성 요소로 구성
globalComponents.js 파일에서
'.../.../globalComponents/AMap/AMap'에서 AMap 가져오기; //AMAP 구성 요소
기본값 내보내기 {
설치(보기) {
Vue.component('AMap', AMap)}
};
AMap 페이지 구현
**vue-amap을 잘 사용하려면 먼저 페이지에 AMap 지도 태그를 도입하여 지도 인스턴스를 생성한 후 해당 API를 사용할 수 있다는 점을 강조하고 싶습니다. 일부 친구는 필요하지 않을 수도 있습니다. 지도를 표시하고 싶지만 경도와 위도를 기준으로 주소를 얻는 것과 같은 특정 API를 사용하고 싶기 때문에 main.js에서 구성한 후 해당 페이지로 이동하여 이 섹션을 작성하고 싶습니다. .
AMap.plugin('AMap.Geocoder', ()=> {
let geocoder = new AMap.Geocoder({
// 도시는 쿼리 인코딩을 위한 도시를 지정하고 도시 이름, adcode 및 citycode 전달을 지원합니다.
도시:도시 코드
})
geocoder.getAddress([lng,lat], (상태, 결과)=> {
…
})
**
그러면 다음과 같은 내용을 볼 수 있습니다.
'vue-amap'에서 AMap을 가져오는 등 페이지에서 직접 가져올 수도 있으며, 그러면 다음과 같은 오류가 나타날 가능성이 높습니다.
더 이상 이야기할 것이 없습니다. 즉, 다른 API를 사용하려면 먼저 html 부분에 태그가 포함된 인스턴스를 생성해야 합니다. 더 이상 고민하지 말고 먼저 코드부터 시작하여 html 부분을 살펴보겠습니다.
<div class="amapBox" :style="{height}"> <el-amap class="amap-box" :vid="'amap-vue'" :plugin="plugin" :center="mapCenter" :events="events" ref="map"> <el-amap-marker vid="component-marker" :position="markPosition" :icon="require('../../assets/images/mapMark.png')" :draggable="true" :raiseOnDrag="true" :events="markEvents" ></el-amap-marker> </el-amap> </div>
el-amap은 vue-amap에 의해 생성된 인스턴스의 라벨입니다. 클래스는 말할 필요도 없이 지도 컴포넌트 ID인 vid를 복사하면 됩니다. 또한, 플러그인은 지도 플러그인 구성이고, center는 중앙 위치입니다. 지도의 이벤트이며 이벤트는 이벤트입니다.
el-amap-marker는 지도 마크 라벨로, position은 라벨 위치이고 icon은 마크 아이콘입니다. 네트워크 이미지나 로컬 이미지를 사용할 수 있습니다. 로컬 이미지를 도입하려면 require를 사용하세요. Draggable은 마커를 드래그할 수 있는지 여부를 나타냅니다. 이벤트는 이벤트다.
다음 CSS 부분에서 Gaode 맵 구성 요소 자체에는 기본적으로 너비와 높이가 없으며 상위 항목의 너비와 높이를 상속받아야 하므로 el-map 태그 상위 항목에 대한 너비와 높이를 설정해야 합니다.
> <style scoped lang="less">
>
> .amapBox{
>
> width:100%;
>
> }
>
> </style>
지도 구성 요소가 완성되었으며 행복하게 호출할 수 있습니다.
상위 구성 요소는 AMap 구성 요소를 호출합니다.
AMap은 글로벌 컴포넌트로 구성되어 있어 컴포넌트 소개 및 등록 없이 바로 본 페이지를 이용하실 수 있습니다.
<div class="mapBox columnStart"> <div class="mapSearchBox rowStart"> <input placeholder="搜索地点" class="mapInput" v-model="searchName" @input="searchAddress"/> </div> <AMap @getAddressInfo="getAddressInfo" ref="amapComponent"/> <ul class="mapAddressBox"> <li class="rowBtween mapAddressLi" v-for="(address,index) in addresses" :key="index" @click="chooseAddress(index)"> <div class="addressBox columnStart"> <div class="addressName">{ {address.name}}</div> <span class="detailAddress gray999">{ {address.formattedAddress}}</span> </div> <van-icon name="success" color="#4491FA" size="18" v-if="activeIndex===index"/> </li> </ul> </div>