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>

上面只是代码片段，按此方式引入后，页面即可看见地图。