vue amap

1. Projekteinführung

Basierend auf vue-admin-template als Vorlage wurde die Vue-Version von Amap JSAPI2.0 entwickelt. Der Grund für das Schreiben liegt darin, dass ich während der Entwicklung auf viele Probleme und einige Fallstricke während der Entwicklung gestoßen bin (ich habe damals Baidu Maps und später auch Amap verwendet). Deshalb habe ich meine Freizeit genutzt, um eine Vue-Version des Amap-Beispielzentrums zu schreiben. Da ich Java-Entwickler bin und nur über begrenzte Front-End-Kenntnisse verfüge, hoffe ich, dass alle Front-End-Experten Mitleid mit meinen schlechten Schreibfähigkeiten haben.

Das Projekt wurde unter Bezugnahme auf das JSAPI2.0-Beispielzentrum von Amap entwickelt. Die Beispieladresse lautet: https://lbs.amap.com/demo/list/jsapi-v2. Bei Verstößen wenden Sie sich bitte an die E-Mail-Adresse : [email protected], um es zu löschen.

Referenzhandbuch zur offiziellen AMAP-Website: https://lbs.amap.com/api/jsapi-v2/documentation

2. Online-Erlebnis

• admin/111111

Demo-Adresse: https://amap.java521.com

3. Verwendung

3.1.Build-Setup

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

Browserzugriff http://localhost:9528

3.2. Freigabe

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

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

3.3. Sonstiges

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

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

# 代码格式检查
npm run lint

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

4. Gaode-Karte

4.1. Registrieren Sie sich als Entwickler

1. Registrierungsadresse: https://lbs.amap.com/dev/id/choose

2. Entwicklertyp auswählen

• Einzelentwickler
• Unternehmensentwickler

3. Entwicklerinformationen verbessern

4.2. Betreten Sie die Konsole

1. Konsolenadresse: https://console.amap.com/dev/index

2. Wählen Sie Anwendungsverwaltung – Meine Anwendungen

3. Erstellen Sie eine neue Anwendung, geben Sie den Anwendungsnamen ein und wählen Sie den Anwendungstyp aus

4. Schlüssel hinzufügen, Schlüsselnamen eingeben und Web (JS API) als Dienstplattform auswählen.

4.3. Verwendung in Projekten

1. Suchen Sie die Datei public/index.html und ersetzen Sie sie durch Ihren eigenen Schlüssel

2. Wenn Sie eine benutzerdefinierte Karte benötigen

• Adresse der benutzerdefinierten Kartenvorlage: https://lbs.amap.com/dev/mapstyle/index
• Es gibt zwei Arten von benutzerdefinierten Karten
  • Verwenden Sie offizielle Kartenstile
  • Erstellen und verwenden Sie benutzerdefinierte Karten
  • Legen Sie den Anzeigeinhalt der Karte fest

4.4. Verwenden Sie den offiziellen Kartenstil

Es gibt zwei Möglichkeiten, den Kartenstil festzulegen:

• Wird bei der Initialisierung der Karte festgelegt:

  JavaScript

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

• Nachdem die Karte erstellt wurde, verwenden Sie die setMapStyle-Methode des Map-Objekts, um sie zu ändern:

  JavaScript

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

4.5. Benutzerdefinierte Karten verwenden

Registrieren Sie sich zunächst, um Entwickler der offenen AMAP-Plattform zu werden. Rufen Sie dann nach dem Erstellen, Bearbeiten und Veröffentlichen auf der benutzerdefinierten Kartenplattform die Kartenstil-ID ab.

Es gibt zwei Möglichkeiten, eine benutzerdefinierte Karte einzurichten:

• Wenn die Karte initialisiert wird, legen Sie eine benutzerdefinierte Karte fest:

  JavaScript

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

• Nachdem die Karte erstellt wurde, verwenden Sie die setMapStyle -Methode Map Objekts, um den Kartenstil zu ändern:

  JavaScript

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

4.6. Stellen Sie den Anzeigeinhalt der Karte ein

Legen Sie den Anzeigeteil der Grundkartenelemente über die setFeatures -Methode fest:

JavaScript

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

Derzeit werden die folgenden vier Arten von Kartenfunktionen für die selektive Anzeige unterstützt:

Name	veranschaulichen
bg	Flächenebene
Punkt	Sehenswürdigkeiten
Straße	Straßen und Fahrbahnmarkierungen
Gebäude	Gebäude