在Vue3中使用百度地图,可以按照以下步骤进行:

1. 在项目中引入百度地图的API文件。可以在public/index.html文件中添加以下代码:

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>

其中,密钥可以在百度地图开放平台申请。

  

2. 在需要使用地图的组件中引入BMap对象和BMapGL对象,并创建地图。例如:

// 引入BMap和BMapGL对象
import BMap from 'BMap'
import BMapGL from 'BMapGL'

export default {
  mounted() {
    // 创建地图
    const map = new BMap.Map("map-container");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    map.enableScrollWheelZoom(true);
  }
}

3. 可以在组件中添加地图相关的事件监听,例如:

mounted() {
    const map = new BMap.Map("map-container");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    map.enableScrollWheelZoom(true);

    // 添加地图点击事件监听
    map.addEventListener("click", (e) => {
      console.log(`您点击的位置:${e.point.lng},${e.point.lat}`);
    });
}

以上就是在Vue3中使用百度地图的基本步骤。需要注意的是,由于Vue3使用了Composition API,可能需要在setup函数中引入地图相关的对象,以便在组件中使用。例如:

<script>
import { ref, onMounted } from 'vue'
import BMap from 'BMap'
import BMapGL from 'BMapGL'

export default {
  setup() {
    const map = ref(null)

    onMounted(() => {
      // 创建地图
      const bmap = new BMap.Map(map.value)
      bmap.centerAndZoom(new BMap.Point(116.404, 39.915), 11)
      bmap.enableScrollWheelZoom(true)

      // 添加地图点击事件监听
      bmap.addEventListener("click", (e) => {
        console.log(`您点击的位置:${e.point.lng},${e.point.lat}`)
      })
    })

    return {
      map
    }
  }
}
</script>

<template>
  <div ref="map"></div>
</template>

在以上示例中,使用了Vue3的ref和onMounted函数来创建地图,并将地图对象添加到模板中的div元素中。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐