Vue2项目中使用百度地图获取一个固定的位置_vue2使用百度地图

1 .   在index.html文件中引入百度地图API：

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

                 其中，您需要将“您的密钥”替换为您在百度地图开放平台申请的密钥。

2 .  在Vue组件中创建地图 ：

   代码 :  

<template>
  <div class="map-mask">
    <div id="mapBox"></div>
  </div>
</template>
 
<script>
export default {
  name: "",
  mounted() {
    // 创建地图实例
    const map = new BMap.Map("mapBox");
    // 创建点坐标(可以使用百度地图拾取坐标系统获取指定的位置坐标)
    const point = new BMap.Point(116.404, 39.915);
    // 初始化地图，设置中心点坐标和地图级别
    map.centerAndZoom(point, 15);
    // 启用滚轮缩放
    map.enableScrollWheelZoom(true);
    // 在地图上添加标注
    const marker = new BMap.Marker(point);
    map.addOverlay(marker);
  },
};
</script>
<style scoped lang="scss">
.map-mask {
  height: 400px;
  width: 100%;
}
#mapBox{
  height: 100%;
  width: 100%;
}
</style>