vue amap

1. Présentation du projet

Basée sur vue-admin-template comme modèle, la version vue d'Amap JSAPI2.0 a été développée. La raison de l'écriture est que j'ai rencontré beaucoup de problèmes lors du développement, ainsi que quelques pièges rencontrés lors du développement (j'utilisais Baidu Maps à l'époque, et plus tard également Amap). Par conséquent, j'ai utilisé mon temps libre pour écrire une version Vue du centre d'exemples Amap. Étant donné que je suis un développeur Java et que mes compétences front-end sont limitées, j'espère que tous les experts front-end feront preuve de pitié envers mes faibles compétences en rédaction.

Le projet a été développé en référence au centre d'exemples JSAPI2.0 d'Amap. L'adresse d'exemple est : https://lbs.amap.com/demo/list/jsapi-v2. : [email protected] pour le supprimer.

Manuel de référence du site officiel de l'AMAP : https://lbs.amap.com/api/jsapi-v2/documentation

2. Expérience en ligne

• admin/111111

Adresse de démonstration : https://amap.java521.com

3. Utiliser

3.1.Configuration de la construction

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

Accès au navigateur http://localhost:9528

3.2. Libération

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

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

3.3.Autres

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

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

# 代码格式检查
npm run lint

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

4. Carte de Gaode

4.1. Inscrivez-vous en tant que développeur

1. Adresse d'inscription : https://lbs.amap.com/dev/id/choose

2. Sélectionnez le type de développeur

• développeur individuel
• Développeur d'entreprise

3. Améliorer les informations sur les développeurs

4.2. Entrez dans la console

1. Adresse de la console : https://console.amap.com/dev/index

2. Sélectionnez Gestion des applications - Mes applications

3. Créez une nouvelle application, entrez le nom de l'application et sélectionnez le type d'application

4. Ajoutez une clé, entrez le nom de la clé et sélectionnez Web (API JS) comme plate-forme de service.

4.3. Utilisation dans les projets

1. Recherchez le fichier public/index.html et remplacez-le par votre propre clé

2. Si vous avez besoin d'une carte personnalisée

• Adresse du modèle de carte personnalisé : https://lbs.amap.com/dev/mapstyle/index
• Il existe deux types de cartes personnalisées
  • Utiliser les styles de carte officiels
  • Créer et utiliser des cartes personnalisées
  • Définir le contenu d'affichage de la carte

4.4. Utiliser le style de carte officiel

Il existe deux manières de définir le style de la carte :

• Définir quand la carte est initialisée :

  Javascript

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

• Une fois la carte créée, utilisez la méthode setMapStyle de l'objet Map pour la modifier :

  Javascript

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

4.5. Utiliser des cartes personnalisées

Tout d’abord, inscrivez-vous en tant que développeur de la plateforme ouverte AMAP. Ensuite, après avoir créé, modifié et publié sur la plateforme de carte personnalisée, obtenez l'ID de style de carte .

Il existe deux manières de configurer une carte personnalisée :

• Une fois la carte initialisée, définissez une carte personnalisée :

  Javascript

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

• Une fois la carte créée, utilisez la méthode setMapStyle de Map pour modifier le style de la carte :

  Javascript

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

4.6. Définir le contenu d'affichage de la carte

Définissez la partie d'affichage des éléments du fond de carte via la méthode setFeatures :

Javascript

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

Actuellement, les quatre types de fonctionnalités cartographiques suivants sont pris en charge pour l’affichage sélectif :

nom	illustrer
bg	plan de zone
indiquer	points d'intérêt
route	Routes et marquages ​​routiers
bâtiment	bâtiment