Vue2+ Gaode マップの Web サイド開発 (使用と導入)
序文
私はプロではないフロントエンド開発者で、実際にはバックエンドに携わっていますが、スタック全体を担当する必要があるプロジェクトを引き継いだので、この一連の記事を書きました。今後オープンソース化する予定なので公開します今回はvue2
+GaodeマップのWeb開発を実装する予定です
ベース
この記事では、全員が Vue を体系的に学習し、Gaode マップを予備的に理解している必要があります。理解することは非常に手間がかかりません。
準備
Gaode マップの個人開発者登録
Gaode API URL
1. クリックして登録
2. 登録後、コンソールに入ります
3. 新しいアプリケーションを作成する
4.追加
WEB端末選択後
オートナビ2.0 new
以上の手順で登録が完了し、
登録キーとセキュリティキーが取得できます。
vue2 プロジェクトを作成する
プロジェクトを作成する際に手渡すことはあまりないと思います。
vue create XXXXxcd XXXXxnpm run serve
npm が Gaode を導入
公文書
https://lbs.amap.com/api/jsapi-v2/guide/webcli/map-vue1
1. インストール
Windows PowerShell 管理者権限を開く
2.プロジェクトに入る
3.ローダーを使用したNPMのインストール
npm i @amap/amap-jsapi-loader --save
4. コンポーネント ディレクトリに新しい MapContainer.vue を作成します。
5.基本的なページ構造を書く
div の id は、カスタマイズしたいものです。名前は何でも構いませんが、後でマップを初期化するときに使用されます。注意が必要です。
<template>
<div id="container"></div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
</style>
6. <script> に AMapLoader を導入する
6.1 インポート
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
}
</script>
6.2 セキュリティキーの導入
window._AMapSecurityConfig = {
securityJsCode: '你的安全密钥'
}
完全なコード
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
securityJsCode: '你的安全密钥'
}
export default {
}
</script>
7. マップを作成する
7.1データ データステートメント
data(){
return {
map:null
}
}
7.2初期化マップメソッドを構築するメソッド
methods:{
initMap(){
AMapLoader.load({
key:"", // 申请好的Web端开发者Key，首次调用 load 时必填
version:"2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap)=>{
this.map = new AMap.Map("container",{
//设置地图容器id
viewMode:"3D", //是否为3D地图模式
zoom:5, //初始化地图级别
center:[105.602725,37.076636], //初始化地图中心点位置
});
}).catch(e=>{
console.log(e);
})
},
},
7.3ページをレンダリングするマウントされたライフサイクル呼び出しメソッド
mounted() {
//DOM初始化完成进行地图初始化
this.initMap()
}
}
完全なコード
<template>
<div id="container"></div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
securityJsCode: '你的安全密钥'
}
export default {
data() {
return {
map: null
}
},
methods: {
initMap() {
AMapLoader.load({
key: '', // 申请好的Web端开发者Key，首次调用 load 时必填
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [''] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then(AMap => {
this.map = new AMap.Map('container', {
//设置地图容器id
viewMode: '3D', //是否为3D地图模式
zoom: 10, //初始化地图级别
center: [121.473667, 31.230525] //初始化地图中心点位置
})
})
.catch(e => {
console.log(e)
})
}
},
mounted() {
//DOM初始化完成进行地图初始化
this.initMap()
}
}
</script>
<style lang="less">
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
</style>
ビューの使用
必要なコンポーネントで MapContainer.vue をインポートして使用する
<template>
<div>
<map-container></map-container>
</div>
</template>
<script>
import MapContainer from "@/components/MapContainer/MapContainer";
export default {
components: {
MapContainer}
}
</script>
結果表示
