首页 > 其他 > 详细

vue中引用高德地图

时间:2020-07-09 17:35:03      阅读:89      评论:0      收藏:0      [点我收藏+]

高德地图开放平台:

https://lbs.amap.com/api/javascript-api/guide/abc/prepare

1. 在index.html中引入高德地图,并替换key值

<script src="https://webapi.amap.com/maps?v=1.3&key=                   &plugin=AMap.Autocomplete">

2.在页面中直接使用

<template>
  <div>
    <p>jsmap</p>
    <div id="mapBox" class="ppp"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      mapData: {
        center: [104.063266, 30.578026],
        zoom: 12
      }
    };
  },
  mounted() {
    this.mapInit();
  },
  methods: {
    mapInit() {
      let self = this;
      let map = new AMap.Map("mapBox", {
        zoom: self.mapData.zoom,
        resizeEnable: true,
        center: self.mapData.center
      });

      let marker = new AMap.Marker({
        position: self.mapData.center,
        map: map
      });
    }
  }
};
</script>
<style>
.ppp {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid deeppink;
}
</style>

3. 更多的功能请自行学习api

vue中引用高德地图

原文:https://www.cnblogs.com/qlongbg/p/13274521.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!