vue 통합 텐 센트 맵 구현 api(DEMO 첨부)

창작 배경
.이전 프로젝트 는 텐 센트 지 도 를 사 용 했 기 때문에 사용 하기 좋 은 것 같 습 니 다.그러나 공식 적 인 demo 는 대부분이 원생 js 이 고 기초 가 있 으 며 많은 고급 Api 분포 가 분산 되 어 개발 자 들 이 찾 는 데 불리 하기 때문에 vue 를 사용 하여 인터넷 의 오픈 소스 프레임 워 크 vue-admin 과 결합 하여 공식 적 인 것 을 모방 하여 상 자 를 열 면 바로 사용 하 는 Demo 를 모 았 습 니 다.down 다음 항목 에 로그 인 인터페이스 가 있 습 니 다.여섯 글 자 를 마음대로 입력 하면 됩 니 다.(필 자 는 게 을 러 서 제거 하기 가 귀 찮 습 니 다.이미 가망 이 없습니다)
항목 미리 보기

여러분,이 주소 에서 코드 를 뽑 아서 복사 해서 붙 여 넣 으 시 면 됩 니 다.
항목 설명
필자 가 시간 이 촉박 하기 때문에 현재 네 개의 모듈 만 정리 했다.(효과 가 좋 으 면 계속 업데이트 할 것 이다.도 우 여러분 이 문 제 를 제기 하 시 는 것 을 환영 합 니 다.보시 면 신속하게 해결 할 것 입 니 다)

기초 지도 도입 및 전시 모듈

3D/2D 전환 과 효과 비교

위치 서비스 에 대한 기본 api 는 다음 과 같다.현재 위 치 를 정 하고 초기 화 위치 로 위치 하 며 중심 점 을 정 하고 마우스 클릭 이 벤트 를 추가 하 며 지도 텍스트 숨 기기 와 표시 전환

mark 태그 의 기본 사용 은 다음 과 같 습 니 다.태그 추가,태그 추가 이벤트 종료,mark 태그 점 끌 수 있 습 니 다.

전기 준비 작업
클릭이 연결텐 센트 맵 개발 자 계 정 등록
주의 점
Vue 가 텐 센트 지 도 를 통합 한 demo 입 니 다.
프로젝트 에 index.html 에 다음 내용 을 미리 도입 해 야 합 니 다.

 <script src="https://map.qq.com/api/gljs?v=1.exp&key=        key "></script>
 <script src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>
 <script charset="utf-8" src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=        key "></script>

그리고 main.js 파일 에 이 몇 줄 의 코드 를 기록 합 니 다.

Vue.prototype.$Map = window.TMap
Vue.prototype.$Location = new window.qq.maps.Geolocation('    key', '      -    ')

다시 한번 말씀 드 리 지만 클릭이 연결하면 텐 센트 맵 개발 자 계 정 을 등록 할 수 있 습 니 다.
책 이 이곳 에 도착 하면 대부분의 도 우 들 은 직접 복사 해서 붙 여 넣 으 면 텐 센트 지 도 를 완벽 하 게 달 릴 수 있다.
다음은 2021.1.16 월 업데이트.
이 서 비 스 를 호출 하려 면 개발 자 계 정 을 가지 고 자신 만 의 key여 기 는 신청 주소 입 니 다.를 신청 해 야 합 니 다.
구체 적 인 사용 방법:
get 방법 으로 호출:

{
rul:'http://localhost:9528/qq/ws/geocoder/v1/?location=lat,lng&key=  key&get_poi=1'}

위치 역 해석 에는 몇 개의 구덩이 가 여기에 진열 되 어 있다.
제일 큰 구덩이 크로스 필드
자신 만 그런 지 모 르 겠 습 니 다.로 컬 에서 프로젝트 를 시작 할 때 역 분석 주 소 를 호출 하면 도 메 인 문 제 를 보고 할 수 있 습 니 다.프로그램 에서 도 메 인 코드 를 설정 해 야 합 니 다.다음 과 같 습 니 다.
vue.config.js 에 크로스 도 메 인 을 설정 합 니 다(cli 저 버 전의 친구 라면 인터넷 에서 해결 방안 을 검색 하 는 것 이 비교적 건전 합 니 다.필 자 는 여기 서 군말 하지 않 겠 습 니 다)

devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: { //     
      '/qq': {
        target: 'https://apis.map.qq.com/', //           ;             
        ws: true,
        changOrigin: true, //     
        pathRewrite: {
          '^/qq': '' //          api   
        }}
    },

제2 대 구덩이 권한 수여 오류 보고
오류 유형 은 다음 과 같다.

 	{
    "status": 110,
    "message": "        ,         ：localhost9528"
	}

 	{
    "status": 112,
    "message": "IP    ，  IP：127.0.0.1"
	}

 {
    "status": 111,
    "message": "      "
  }

해결 방법 은 모두 텐 센트 위치 서비스 플랫폼 을 통 해 공식 문서 와 결합 하여 key 관 리 를 설정 하 는 것 이다.그림 과 같다.

자세 한 api 매개 변 수 는 참조 하 십시오공식 문서
vue 통합 텐 센트 맵 실현 api(DEMO 첨부)에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 통합 텐 센트 맵 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!