vue amap
1.0.0
vue-admin-template을 템플릿으로 기반으로 Amap JSAPI2.0의 vue 버전이 개발되었습니다. 글을 쓰게 된 이유는 개발 중에 많은 문제에 부딪혔고, 개발 중 몇 가지 함정에 부딪혔기 때문입니다(당시에는 Baidu Maps를 사용했고 나중에는 Amap도 사용했습니다). 그래서 남는 시간을 활용하여 Amap 샘플 센터의 Vue 버전을 작성했습니다. 저는 Java 개발자이고 프론트엔드 기술이 부족하기 때문에 모든 프론트엔드 전문가들이 제 부족한 글쓰기 실력을 자비로 여겨주시길 바랍니다.
본 프로젝트는 Amap의 JSAPI2.0 예제 센터를 참조하여 개발되었습니다. 예제 주소는 https://lbs.amap.com/demo/list/jsapi-v2입니다. 침해가 있는 경우 이메일 주소로 문의하시기 바랍니다. : [email protected]으로 삭제해주세요.
AMAP 공식 웹사이트 참조 매뉴얼: https://lbs.amap.com/api/jsapi-v2/documentation
데모 주소: https://amap.java521.com
# 克隆项目
git clone git clone https://gitee.com/java5219/vue-amap.git
# 进入项目目录
cd vue-amap
# 安装依赖
npm install
# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
# 启动服务
npm run dev브라우저 접속 http://localhost:9528
# 构建测试环境
npm run build:stage
# 构建生产环境
npm run build:prod # 预览发布环境效果
npm run preview
# 预览发布环境效果 + 静态资源分析
npm run preview -- --report
# 代码格式检查
npm run lint
# 代码格式检查并自动修复
npm run lint -- --fix1. 등록주소 : https://lbs.amap.com/dev/id/choose
2. 개발자 유형 선택
3. 개발자 정보 개선
1. 콘솔 주소: https://console.amap.com/dev/index
2. 애플리케이션 관리--내 애플리케이션을 선택합니다.
3. 새 애플리케이션을 생성하고 애플리케이션 이름을 입력한 후 애플리케이션 유형을 선택하세요.
4. 키를 추가하고 키 이름을 입력한 후 서비스 플랫폼으로 웹(JS API)을 선택합니다.
1. public/index.html 파일을 찾아 자신의 키로 바꿉니다.
2. 맞춤형 지도가 필요한 경우
지도 스타일을 설정하는 방법에는 두 가지가 있습니다.
지도가 초기화될 때 설정됩니다.
자바스크립트
var map = new AMap . Map ( 'container' , {
mapStyle : 'amap://styles/whitesmoke' , //设置地图的显示样式
} ) ;지도가 생성된 후 Map 객체의 setMapStyle 메서드를 사용하여 지도를 수정합니다.
자바스크립트
var map = new AMap . Map ( 'container' , {
zoom : 10 , //设置地图的缩放级别
} ) ;
map . setMapStyle ( 'amap://styles/whitesmoke' ) ; 먼저 AMAP 오픈 플랫폼 개발자로 등록합니다. 그런 다음 맞춤 지도 플랫폼에서 생성, 편집, 게시한 후 지도 스타일 ID를 가져옵니다.
맞춤 지도를 설정하는 방법에는 두 가지가 있습니다.
지도가 초기화되면 맞춤 지도를 설정합니다.
자바스크립트
var map = new AMap . Map ( 'container' , {
mapStyle : 'amap://styles/地图样式ID' , //设置地图的显示样式
} ) ; 지도가 생성된 후 Map 객체의 setMapStyle 메서드를 사용하여 지도 스타일을 변경합니다.
자바스크립트
var map = new AMap . Map ( 'container' ,{
zoom : 10 , //设置地图的缩放级别
});
map . setMapStyle ( 'amap://styles/地图样式ID' ); setFeatures 메소드를 통해 베이스맵 요소의 표시 부분을 설정합니다.
자바스크립트
map.setFeatures("road"); // 单一种类要素显示
map.setFeatures(['road','point']); // 多个种类要素显示
현재 선택적 표시를 위해 다음 네 가지 유형의 지도 기능이 지원됩니다.
| 이름 | 설명하다 |
|---|---|
| bg | 영역 평면 |
| 가리키다 | 관심 장소 |
| 도로 | 도로 및 도로 표시 |
| 건물 | 건물 |
