vue amap

1. การแนะนำโครงการ

อิงตาม vue-admin-template เป็นเทมเพลต เวอร์ชัน vue ของ Amap JSAPI2.0 ได้รับการพัฒนา เหตุผลในการเขียนเป็นเพราะฉันพบปัญหามากมายในระหว่างการพัฒนา เช่นเดียวกับข้อผิดพลาดบางอย่างที่พบในระหว่างการพัฒนา (ตอนนั้นฉันใช้ Baidu Maps และต่อมาก็ใช้ Amap ด้วย) ดังนั้นฉันจึงใช้เวลาว่างเขียนเวอร์ชัน Vue ของศูนย์ตัวอย่าง Amap เนื่องจากฉันเป็นนักพัฒนา Java และมีทักษะส่วนหน้าที่จำกัด ฉันหวังว่าผู้เชี่ยวชาญส่วนหน้าทุกคนจะแสดงความเมตตาต่อทักษะการเขียนที่ไม่ดีของฉัน

โครงการได้รับการพัฒนาโดยอ้างอิงถึงศูนย์ตัวอย่าง JSAPI2.0 ของ Amap ที่อยู่ตัวอย่างคือ: https://lbs.amap.com/demo/list/jsapi-v2 หากมีการละเมิดใด ๆ โปรดติดต่อที่อยู่อีเมล : [email protected] เพื่อลบมัน

คู่มืออ้างอิงเว็บไซต์อย่างเป็นทางการของ AMAP: https://lbs.amap.com/api/jsapi-v2/documentation

2. ประสบการณ์ออนไลน์

• ผู้ดูแลระบบ/111111

ที่อยู่การสาธิต: https://amap.java521.com

3. การใช้งาน

3.1.สร้างการตั้งค่า

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

3.2. การเปิดตัว

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

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

3.3. อื่นๆ

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

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

# 代码格式检查
npm run lint

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

4. แผนที่เกาเต๋อ

4.1. ลงทะเบียนเป็นนักพัฒนา

1. ที่อยู่การลงทะเบียน: https://lbs.amap.com/dev/id/choose

2. เลือกประเภทนักพัฒนา

• นักพัฒนารายบุคคล
• นักพัฒนาองค์กร

3. ปรับปรุงข้อมูลของนักพัฒนา

4.2. เข้าสู่คอนโซล

1. ที่อยู่คอนโซล: https://console.amap.com/dev/index

2. เลือก การจัดการแอปพลิเคชัน - แอปพลิเคชันของฉัน

3. สร้างแอปพลิเคชันใหม่ กรอกชื่อแอปพลิเคชัน และเลือกประเภทแอปพลิเคชัน

4. เพิ่มคีย์ ป้อนชื่อคีย์ และเลือกเว็บ (JS API) เป็นแพลตฟอร์มบริการ

4.3. ใช้ในโครงการ

1. ค้นหาไฟล์ public/index.html และแทนที่ด้วยรหัสของคุณเอง

2. หากคุณต้องการแผนที่ที่กำหนดเอง

• ที่อยู่เทมเพลตแผนที่แบบกำหนดเอง: https://lbs.amap.com/dev/mapstyle/index
• แผนที่ที่กำหนดเองมีสองประเภท
  • ใช้รูปแบบแผนที่อย่างเป็นทางการ
  • สร้างและใช้แผนที่ที่กำหนดเอง
  • ตั้งค่าเนื้อหาที่แสดงของแผนที่

4.4. ใช้รูปแบบแผนที่อย่างเป็นทางการ

มีสองวิธีในการตั้งค่ารูปแบบแผนที่:

• ตั้งค่าเมื่อเริ่มต้นแผนที่:

  จาวาสคริปต์

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

• หลังจากสร้างแผนที่แล้ว ให้ใช้เมธอด setMapStyle ของออบเจ็กต์ Map เพื่อแก้ไข:

  จาวาสคริปต์

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

4.5. ใช้แผนที่แบบกำหนดเอง

ขั้นแรก ลงทะเบียนเป็นผู้พัฒนาแพลตฟอร์มแบบเปิด AMAP จากนั้น หลังจากสร้าง แก้ไข และเผยแพร่บนแพลตฟอร์มแผนที่ที่กำหนดเองแล้ว ให้รับ รหัสรูปแบบแผนที่

มีสองวิธีในการตั้งค่าแผนที่ที่กำหนดเอง:

• เมื่อแผนที่เริ่มต้นแล้ว ให้ตั้งค่าแผนที่ที่กำหนดเอง:

  จาวาสคริปต์

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

• หลังจากสร้างแผนที่แล้ว ให้ใช้เมธอด setMapStyle ของออบเจ็กต์ Map เพื่อเปลี่ยนรูปแบบแผนที่:

  จาวาสคริปต์

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

4.6. ตั้งค่าการแสดงเนื้อหาแผนที่

ตั้งค่าส่วนแสดงผลขององค์ประกอบแผนที่ฐานผ่านเมธอด setFeatures :

จาวาสคริปต์

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

ปัจจุบัน คุณลักษณะแผนที่สี่ประเภทต่อไปนี้ได้รับการรองรับสำหรับการแสดงผลแบบเลือก:

ชื่อ	แสดงให้เห็น
บีจี	เครื่องบินพื้นที่
จุด	จุดที่น่าสนใจ
ถนน	ถนนและเครื่องหมายถนน
อาคาร	อาคาร