介紹

AMapJS 是高德地圖加載模塊，幫助您輕松的加載高德地圖相關API。之后根據高德地圖API做你想做。它可以靈活便捷的在現代化的工具鏈以及前端框架中使用。

特性

• 異步加載。
• 支持Promise API。
• 支持預加載。

安裝

npm install --save amap-js 復制代碼

使用yarn:

yarn add amap-js 復制代碼

使用cdn:

<script type="text/javascript" src="https://unpkg.com/amap-js/dist/amap-js.min.js"></script> 復制代碼

Hello World

AMap JS API的加載:

一個簡單的AMapJS加載AMap JS API例子如下:

import AMapJS from "amap-js";// 創建AMapJSAPI Loader var aMapJSAPILoader = new AMapJS.AMapJSAPILoader({key: "您申請的key值",v: "1.4.12" // 版本號 });// 調用load方法加載AMap JSAPI并執行then回調。 aMapJSAPILoader.load().then(function(AMap) {// 其他邏輯 }); 復制代碼

AMap UI組件庫的加載:

一個簡單的AMapJS加載AMapUI API例子如下:

import AMapJS from "amap-js";// 創建AMapJSAPI Loader var aMapJSAPILoader = new AMapJS.AMapJSAPILoader({key: "您申請的key值",v: "1.4.12" // 版本號 });// 創建AMapUI Loader var aMapUILoader = new AMapJS.AMapUILoader({v: "1.0" // UI組件庫版本號 });aMapJSAPILoader.load().then(function(AMap) {aMapUILoader.load().then(function(initAMapUI) {var AMapUI = initAMapUI(); // 這里調用initAMapUI初始化并返回AMapUI// 其他邏輯}); }); 復制代碼

示例

了解AMapJS基本使用后，我們可能更關心在框架中是如何使用的，這里簡單演示兩個目前主流的框架React、Vue。如下：

Vue中使用

App.vue

<template><div class="app"><div ref="map" id="map"></div></div> </template><script> import AMapJS from "amap-js";export default {mounted() {const aMapJSAPILoader = new AMapJS.AMapJSAPILoader({v: "1.4.12",key: "您申請的key值"});const aMapUILoader = new AMapJS.AMapUILoader({v: "1.0" // UI組件庫版本號});aMapJSAPILoader.load().then(AMap => {aMapUILoader.load().then(initAMapUI => {const AMapUI = initAMapUI(); // 這里調用initAMapUI初始化并返回AMapUI// 其他邏輯console.log(AMap);console.log(AMapUI);new AMap.Map(this.$refs.map);});})} }; </script> 復制代碼

React中使用

App.js

import React, { Component } from "react"; import AMapJS from "amap-js";class App extends Component {componentDidMount() {const aMapJSAPILoader = new AMapJS.AMapJSAPILoader({v: "1.4.12",key: "您申請的key值"});const aMapUILoader = new AMapJS.AMapUILoader({v: "1.0" // UI組件庫版本號});aMapJSAPILoader.load().then(AMap => {aMapUILoader.load().then(initAMapUI => {const AMapUI = initAMapUI(); // 這里調用initAMapUI初始化并返回AMapUI// 其他邏輯console.log(AMap);console.log(AMapUI);new AMap.Map(this.refs.map);});})}render() {return (<div className="app"><div ref="map" id="map"></div></div>);} }export default App; 復制代碼

總結

AMapJS的使用不局限于一種方式，請可以結合自己實際業務邏輯進行方式變換。

AMApJS 更多示例及API請參見: amap-js

快速鏈接

Github: iDerekLi/amap-js

文檔：amap-js

高德開放平臺：javascript-api

總結

以上是生活随笔為你收集整理的使用amap-js引入高德地图AMap及其UI组件AMapUI的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。