vue H5项目引入百度地图

2023-12-20 16:23:43

index.html

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=自己申请的秘钥"></script>

秘钥申请注意选择浏览器端

map.vue

<template>
  <div class="itemextendList">
    <div class="baidumap" id="allmap"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      details: {},
      map: null
    };
  },
  components: {
    Header
  },
  created() {
  },
  mounted() {
    this.baiduMap();//初始化百度地图
  },
  methods: {
    baiduMap() {
      if (window.BMap) this.map = new window.BMap.Map("allmap"); // 创建Map实例
      this.map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放
      this.map.addControl(new window.BMap.NavigationControl()); //向地图中添加缩放控件
      this.map.addControl(new window.BMap.ScaleControl()); //比例尺控件
      this.map.addControl(new window.BMap.MapTypeControl()); //负责切换地图类型的控件
      /* 根据 经纬度 定位|标记 */
      let point = new window.BMap.Point( //实例坐标点
        Number(this.details.long),
        Number(this.details.lat)
      );
      var marker = new window.BMap.Marker(point); //创建标注
      this.map.addOverlay(marker); // 将标注添加到地图中
      this.map.centerAndZoom(point, 18); // 初始化地图，设置中心点坐标和地图级别
    }
  }
};
</script>

<style lang="scss" scoped>
.baidumap {
  width: 100%;
  height: 500px;
  margin-top: 45px;
}
</style>

文章来源:https://blog.csdn.net/rhcjqmm666/article/details/135104325
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。