VUE學習（四） 引入高德地圖

好多前端頁面的設計都涉及到地圖的展示等功能，今天寫一個將高德地圖展示在vue頁面的例子。

1.申請高德key

登錄高德開發者平臺直接申請即可

2.引入js

 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=**********************"></script>

 在vue工程public/index.html的頭部引入上述代碼，記得將key替換爲申請的開發者key.

3.頁面代碼

 <div class="map" id="org-map"></div>


<script>
        mounted() {
           this.map = new AMap.Map('org-map');
        }

</script>

<style scoped>
 
    .map {
        height: 220px;
    }
</style>

上面只是代碼片段，按此方式引入後，頁面即可看見地圖。