استنادًا إلى قالب vue-admin كقالب، تم تطوير إصدار vue من Amap JSAPI2.0. سبب الكتابة هو أنني واجهت الكثير من المشاكل أثناء التطوير، بالإضافة إلى بعض الأخطاء التي واجهتها أثناء التطوير (استخدمت خرائط Baidu في ذلك الوقت، واستخدمت 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
العنوان التجريبي: 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 -- --fix
1. عنوان التسجيل: https://lbs.amap.com/dev/id/choose
2. حدد نوع المطور
3. تحسين معلومات المطور
1. عنوان وحدة التحكم: https://console.amap.com/dev/index
2. حدد إدارة التطبيقات--تطبيقاتي
3. أنشئ تطبيقًا جديدًا، وأدخل اسم التطبيق وحدد نوع التطبيق
4. أضف مفتاحًا، وأدخل اسم المفتاح، ثم حدد Web (JS API) كنظام أساسي للخدمة.
1. ابحث عن الملف public/index.html واستبدله بالمفتاح الخاص بك
2. إذا كنت بحاجة إلى خريطة مخصصة
هناك طريقتان لتعيين نمط الخريطة:
اضبط عند تهيئة الخريطة:
جافا سكريبت
var map = new AMap . Map ( 'container' , {
mapStyle : 'amap://styles/whitesmoke' , //设置地图的显示样式
} ) ;
بعد إنشاء الخريطة، استخدم طريقة setMapStyle لكائن الخريطة لتعديلها:
جافا سكريبت
var map = new AMap . Map ( 'container' , {
zoom : 10 , //设置地图的缩放级别
} ) ;
map . setMapStyle ( 'amap://styles/whitesmoke' ) ;
أولاً، قم بالتسجيل لتصبح مطورًا لمنصة 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' );
قم بتعيين جزء العرض لعناصر خريطة الأساس من خلال طريقة setFeatures
:
جافا سكريبت
map.setFeatures("road"); // 单一种类要素显示
map.setFeatures(['road','point']); // 多个种类要素显示
حاليًا، يتم دعم الأنواع الأربعة التالية من ميزات الخريطة للعرض الانتقائي:
اسم | يوضح |
---|---|
بغ | طائرة المنطقة |
نقطة | النقاط المثيرة للاهتمام |
طريق | الطرق وعلامات الطريق |
مبنى | مبنى |