So verwenden Sie Vue Amap

So verwenden Sie vue amap: Laden Sie zuerst die Vue-Webpack-Vorlage über „vue init webpack vueamap“ herunter und verwenden Sie dann „cnpm install vue-amap --save“, um schließlich diese Komponentenbibliothek zu verwenden.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue2.0-Version, Thinkpad T480-Computer.

Empfohlen: „vue-Tutorial“

1. Laden Sie eine Vue-Webpack-Vorlage herunter

vue init webpack vueamap

Wählen Sie in meinem Projekt den Router als „Ja“ und andere Test-Plug-Ins als „Nein“ aus ein Ordnername

Nachdem Sie die Vorlage heruntergeladen haben, installieren Sie die Abhängigkeiten

cnpm install

Nachdem die Abhängigkeitsinstallation abgeschlossen ist, führen Sie die Entwicklungsumgebung aus

npm run dev

Wenn Sie aufgefordert werden, den Effekt auf „localhost:8080“ anzuzeigen, überprüfen Sie den Effekt im Browser. Wenn der VUE-Effekt auftritt, ist der Vorlagen-Download erfolgreich. 2. Installieren Sie vue-amap. Installieren Sie vue-amap Hier muss ein SCHLÜSSEL angegeben werden. Sie können sich auf der Amap-Plattform bewerben später ist keine umfassende Konfiguration. Wenn Sie nicht verstehen oder mehr wissen möchten, gehen Sie bitte zu

Schritt vue-amap-Dokument: vue-amap-Dokument (https://elemefe.github.io/vue-amap/# /zh-cn/introduction/install)

Die Einführung in das Dokument ist relativ einfach. Es wird empfohlen, das Referenzhandbuch auf der offiziellen Amap-Website zu überprüfen. Zum Vergleich verwenden

Amap-Referenzhandbuch: Referenzhandbuch (http://lbs.amap .com/api/javascript-api/reference/map)

1. Erstellen Sie die Karte

Vorlage:

cnpm install vue-amap --save

Daten in Daten:

import VueAMap from "vue-amap";
Vue.use(VueAMap);

Führen Sie sie nach dem Speichern im Browser aus:

2. Fügen Sie einen Beschriftungspunkt hinzu (fügen Sie hier die Mitte der Karte als Standortpunkt hinzu).

Vorlage:

VueAMap.initAMapApiLoader({
  key: "e1dedc6bdd765d46693986ff7ff969f4",
  plugin: [
    "AMap.Autocomplete", //输入提示插件
    "AMap.PlaceSearch", //POI搜索插件
    "AMap.Scale", //右下角缩略图插件 比例尺
    "AMap.OverView", //地图鹰眼插件
    "AMap.ToolBar", //地图工具条
    "AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
    "AMap.PolyEditor", //编辑 折线多，边形
    "AMap.CircleEditor", //圆形编辑器插件
    "AMap.Geolocation" //定位控件，用来获取和展示用户主机所在的经纬度位置
  ],
  uiVersion: "1.0"
});

Fügen Sie Beschriftungsdaten als Punkt hinzu. Einführung zur Verwendung, Sie können sich auf das Dokument beziehen, um zu entscheiden ob hinzugefügt werden soll

    <div class="amap-wrapper">
      <el-amap class="amap-box" vid="map" 
        :zoom="zoom"
        :center="center">
      </el-amap>
    </div>

Das Ergebnis nach dem Speichern ist wie unten gezeigt. Der Marker wurde geladen. (Hier wird der Mittelpunkt immer noch als Mittelpunktradius von 100 verwendet.) : Beim Hinzufügen eines kreisförmigen Bereichs müssen Sie „AMap.CircleEditor“ im Initialisierungs-Plug-in initialisieren, andernfalls wird ein Fehler gemeldet

Vorlage:

zoom:16,
center:[121.406051,31.179695],

Erweiterung: Ändern Sie den Radius des verwendbaren kreisförmigen Bereichs dynamisch um den Bereich festzulegen

Hier verwende ich die Schaltfläche „Precision++“ als Beispiel. Fügen Sie jedes Mal, wenn Sie auf den Radius klicken, 10 hinzu , Bilder, Polygone usw. Die Verwendung ist ähnlich, siehe Das offizielle Dokument kann verwendet werden

Die Darstellung ist wie folgt:

3 Bei Verwendung von Plug-Ins

Wenn nur Plug-Ins verwendet werden Stellen Sie sicher, dass Sie sie im initAMapApiLoader initialisieren, andernfalls wird ein Fehler gemeldet. Vorlage:

<div class="amap-wrapper">
      <el-amap vid="amapDemo" 
        :center="center" 
        :zoom="zoom"
        class="amap-demo">
        <el-amap-marker vid="marker" 
          :position="center" 
          :label="label"
           >
        </el-amap-marker>
      </el-amap>
    </div>

folgt:

      label:{
        content:'钦汇园',
        offset:[10,12]
      },

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue Amap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!