vue 地图组件（地球模式）

最新推荐文章于 2025-06-02 12:37:04 发布

原创

最新推荐文章于 2025-06-02 12:37:04 发布 · 5.7k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue #地图 #百度地图 #地图组件

本文介绍了如何在Vue项目中创建一个地图组件，特别是在地球模式下。内容包括地图组件的使用方法，源码展示，以及如何引入和在模板中使用组件，同时提供了获取地图位置信息的方法和组件的属性说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

地图组件（地球模式）

本组件是在项目中创建地图，获取地图上的位置信息

下面是地图展现形式：
在这里插入图片描述

组件使用方法：

在index.html引入百度地图脚本（注意引入顺序）

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的key"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=2.0&ak=你的key"></script>

2、组件源码：

<template>
  <div ref='allmap' id="allmap" :style="` width:${width}px;height:${height}px`"></div>
</template>
<script>
import  BMapGL  from 'BMapGL'
import BMap from 'BMap'
export default {
  props: {
    width:{
      type:String,
      default:'500'
    },
    height:{
      type:String,
      default:'500'
    },
    zoom:{
      type:Number,
      default:2
    },
    Longitude: {
      type: Numb