vue3中简单的使用百度地图

最新推荐文章于 2025-03-19 15:12:27 发布

Destinynever

最新推荐文章于 2025-03-19 15:12:27 发布

阅读量8.8k

点赞数 3

文章标签： vue.js typescript

本文链接：https://blog.csdn.net/qq_57399113/article/details/124859453

版权

1、申请百度开发者账号

百度地图开放平台 | 百度地图API SDK | 地图开发百度地图API是一套为开发者提供的基于百度地图的应用程序接口，包括JavaScript、iOS、Andriod、静态地图、Web服务等多种版本，提供基本地图、位置搜索、周边搜索、公交驾车导航、定位服务、地理编码及逆地理编码等丰富功能。LBS·云是百度地图针对LBS开发者全新推出的平台级服务。通过地图API，一方面解决移动开发者服务器端日益增长的海量位置数据的存储维护压力，另一方面彻底解决所有LBS开发者基于位置数据的高并发检索瓶颈。https://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B52、在控制台中创建应用获取AK

3、在vue入口文件index中引入

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=获取到的AK"></script>

4、封装地图组件在组件中使用

<template>
  <div id="map" :style="{ width: width + 'px', height: height + 'px' }"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
export default defineComponent({
  props: {
    // 传入需要定位的经纬度
    latitude: {
      type: Number,
      default: () => {
        return 31.14
      },
    },
    longitude: {
      type: Number,
      default: () => {
        return 118.22
      },
    },
    width: {
      type: Number,
      default: 598,
    },
    height: {
      type: Number,
      default: 346,
    },
  },
  setup(props, { emit }) {
    const BMap = (window as any).BMap

    onMounted(() => {
      var map = new BMap.Map('map')
      var point = new BMap.Point(props.longitude, props.latitude)
      //   var point = new BMap.Point(116.46, 39.92)
      console.log(props.latitude)
      console.log(props.longitude)
      //   console.log(point)

      map.centerAndZoom(point, 15)
      map.enableScrollWheelZoom(true)
      map.addEventListener('click', function (e: any) {
        //   let a = JSON.parse(e)
        console.log('点击的经纬度：' + e.point.lng + ',' + e.point.lat) //
        emit('update:longitude', e.point.lng)
        emit('update:latitude', e.point.lat)
      })
    })
  },
})
</script>

<w-map :width="598" :height="346" v-model:longitude="116.46" v-model:latitude="39.92"></w-map>