vue中使用高德地图

html引入高德API:

 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=【您的key】&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.MouseTool,AMap.Geocoder"></script>

然后在.vue文件中直接使用:

<template>
  <div class="onstar onstar-container">
    <div class="amap-wrapper">
      <div class="amap-box" id="amap-box"></div>
    </div>
  </div>
</template>
<script>
  var map,mouseTool;
  export default {
    name: 'index',
    data() {
      return {}
    },
    methods: {
      mapInit() {
        //地图加载
        map = new AMap.Map("amap-box", {
          resizeEnable: true
        });
      },
    },
    beforeMount() {

    },
    mounted() {
      this.mapInit();
    }
  }
</script>
<style lang="scss" scoped>
  .onstar {
    height: 100%;
  }
  #amap-box{
    height: 500px;
  }
  .amap-wrapper {
    position: relative;
  }
</style>

 

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页