vue amap

1. Pengenalan proyek

Berdasarkan vue-admin-template sebagai template, versi vue Amap JSAPI2.0 dikembangkan. Alasan penulisan ini adalah karena saya menemui banyak masalah selama pengembangan, serta beberapa kendala yang ditemui selama pengembangan (saat itu saya menggunakan Baidu Maps, dan kemudian juga menggunakan Amap). Oleh karena itu, saya menggunakan waktu luang saya untuk menulis pusat sampel Amap versi Vue. Karena saya seorang pengembang Java dan memiliki keterampilan front-end yang terbatas, saya berharap semua pakar front-end akan mengasihani keterampilan menulis saya yang buruk.

Proyek ini dikembangkan dengan mengacu pada pusat contoh JSAPI2.0 di Amap. Alamat contohnya adalah: https://lbs.amap.com/demo/list/jsapi-v2 : [email protected] untuk menghapusnya.

Manual referensi situs web resmi AMAP: https://lbs.amap.com/api/jsapi-v2/documentation

2. Pengalaman daring

• admin/111111

Alamat demo: https://amap.java521.com

3. Gunakan

3.1.Bangun Pengaturan

 # 克隆项目
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

Akses peramban http://localhost:9528

3.2.Lepaskan

 # 构建测试环境
npm run build:stage

# 构建生产环境
npm run build:prod

3.3.Lainnya

 # 预览发布环境效果
npm run preview

# 预览发布环境效果 + 静态资源分析
npm run preview -- --report

# 代码格式检查
npm run lint

# 代码格式检查并自动修复
npm run lint -- --fix

4. Peta Gaode

4.1. Daftar sebagai pengembang

1. Alamat pendaftaran: https://lbs.amap.com/dev/id/choose

2. Pilih jenis pengembang

• pengembang individu
• Pengembang Perusahaan

3. Meningkatkan informasi pengembang

4.2. Masuk ke konsol

1. Alamat konsol: https://console.amap.com/dev/index

2. Pilih Manajemen Aplikasi--Aplikasi Saya

3. Buat aplikasi baru, masukkan nama aplikasi dan pilih jenis aplikasi

4. Tambahkan kunci, masukkan nama kunci, dan pilih Web (JS API) sebagai platform layanan.

4.3. Gunakan dalam proyek

1. Temukan file public/index.html dan ganti dengan kunci Anda sendiri

2. Jika Anda memerlukan peta khusus

• Alamat templat peta khusus: https://lbs.amap.com/dev/mapstyle/index
• Ada dua jenis peta khusus
  • Gunakan gaya peta resmi
  • Buat dan gunakan peta khusus
  • Atur konten tampilan peta

4.4. Gunakan gaya peta resmi

Ada dua cara untuk mengatur gaya peta:

• Atur kapan peta diinisialisasi:

  JavaScript

   var map = new AMap . Map ( 'container' , {
      mapStyle : 'amap://styles/whitesmoke' , //设置地图的显示样式
  } ) ;

• Setelah peta dibuat, gunakan metode setMapStyle dari objek Peta untuk memodifikasinya:

  JavaScript

   var map = new AMap . Map ( 'container' , {
      zoom : 10 , //设置地图的缩放级别
  } ) ;
  map . setMapStyle ( 'amap://styles/whitesmoke' ) ; 

4.5. Gunakan peta khusus

Pertama, daftar menjadi pengembang platform terbuka AMAP. Kemudian, setelah membuat, mengedit, dan menerbitkan pada platform peta khusus, dapatkan ID gaya peta .

Ada dua cara untuk menyiapkan peta khusus:

• Saat peta diinisialisasi, atur peta khusus:

  JavaScript

   var map = new AMap . Map ( 'container' , {
      mapStyle : 'amap://styles/地图样式ID' , //设置地图的显示样式
  } ) ;

• Setelah peta dibuat, gunakan metode setMapStyle pada objek Map untuk mengubah gaya peta:

  JavaScript

   var map = new AMap . Map ( 'container' ,{
      zoom : 10 , //设置地图的缩放级别
  });
  map . setMapStyle ( 'amap://styles/地图样式ID' );

4.6. Mengatur tampilan konten peta

Atur bagian tampilan elemen peta dasar melalui metode setFeatures :

JavaScript

 map.setFeatures("road");  // 单一种类要素显示
map.setFeatures(['road','point']); // 多个种类要素显示

Saat ini, empat jenis fitur peta berikut didukung untuk tampilan selektif:

nama	menjelaskan
bg	bidang daerah
titik	tempat menarik
jalan	Jalan dan marka jalan
bangunan	bangunan