vue amap
1.0.0
vue-admin-template をテンプレートとして、vue 版の Amap JSAPI2.0 が開発されました。書いた理由は、開発中に多くの問題に遭遇したことと、開発中に遭遇したいくつかの落とし穴に遭遇したためです（当時はBaidu Mapsを使用していましたが、その後Amapも使用しました）。そのため、私は空き時間を利用して Amap サンプル センターの Vue バージョンを作成しました。私は Java 開発者であり、フロントエンドのスキルが限られているため、フロントエンドの専門家の皆様が私の貧弱な執筆スキルを憐れんでくださることを願っています。
このプロジェクトは、Amap の JSAPI2.0 サンプル センターを参照して開発されました。サンプル アドレスは https://lbs.amap.com/demo/list/jsapi-v2 です。侵害がある場合は、電子メール アドレスにご連絡ください。 : [email protected] まで削除してください。
AMAP公式Webサイトリファレンスマニュアル：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 -- --fix1. 登録アドレス：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. カスタムマップが必要な場合
マップ スタイルを設定するには 2 つの方法があります。
マップの初期化時に設定されます。
JavaScript
var map = new AMap . Map ( 'container' , {
mapStyle : 'amap://styles/whitesmoke' , //设置地图的显示样式
} ) ;マップの作成後、Map オブジェクトの setMapStyle メソッドを使用してマップを変更します。
JavaScript
var map = new AMap . Map ( 'container' , {
zoom : 10 , //设置地图的缩放级别
} ) ;
map . setMapStyle ( 'amap://styles/whitesmoke' ) ; まず、AMAP オープン プラットフォームの開発者として登録します。次に、カスタム マップ プラットフォームで作成、編集、公開した後、マップ スタイル IDを取得します。
カスタム マップを設定するには 2 つの方法があります。
マップが初期化されたら、カスタム マップを設定します。
JavaScript
var map = new AMap . Map ( 'container' , {
mapStyle : 'amap://styles/地图样式ID' , //设置地图的显示样式
} ) ;マップの作成後、 MapオブジェクトのsetMapStyleメソッドを使用してマップ スタイルを変更します。
JavaScript
var map = new AMap . Map ( 'container' ,{
zoom : 10 , //设置地图的缩放级别
});
map . setMapStyle ( 'amap://styles/地图样式ID' );setFeaturesメソッドを使用して、ベースマップ要素の表示部分を設定します。
JavaScript
map.setFeatures("road"); // 单一种类要素显示
map.setFeatures(['road','point']); // 多个种类要素显示
現在、次の 4 種類のマップ フィーチャの選択表示がサポートされています。
| 名前 | 説明する |
|---|---|
| バックグラウンド | エリアプレーン |
| ポイント | 興味のあるポイント |
| 道 | 道路と道路標識 |
| 建物 | 建物 |
