vue2项目使用百度地图

效果图:

1.下载插件   vue-bmap-gl

2.在main.js中引入

//地图

import VueBMap from "vue-bmap-gl";

import "vue-bmap-gl/dist/style.css";

Vue.use(VueBMap);

VueBMap.initBMapApiLoader({

  ak: "6p5MmRood0q6FYqDDF9FQhXOM3obsUn7",

  v: "1.0",

});

3.在组件中使用

<template>

  <div style="{width: 100%;height: 600px;}">

    <div id="container" ></div>

    <div>

     <h2>联系方式</h2>

      <P>地址</P>

      <p>上海松江区G60科创云廊</p>

      <p>邮箱</p>

      <p>catman@thinkcmf.com</p>

      <p>电话</p>

      <p>021 1000 0001</p>

    </div>

  </div>

</template>

<script>

import { lazyBMapApiLoaderInstance } from "vue-bmap-gl";

export default {

  name: "contact",

  mounted() {

    this.init();

  },

  methods: {

    init() {

      var map = new BMapGL.Map("container"); // 创建Map实例

      // map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别

      // map.centerAndZoom('上海市松江区G60科创园区', 12); // 初始化地图,设置中心点坐标和地图级别

      var point = new BMapGL.Point(121.327853, 31.091195); // 创建点坐标

      map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别。

      var marker = new BMapGL.Marker(point); // 创建标注

      map.addOverlay(marker);

      var infoWindow = new BMapGL.InfoWindow(

        "ThinkCMF\n地址：上海市松江区G60科创园区"

      ); // 创建信息窗口对象

      marker.openInfoWindow(infoWindow, point);

      map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

    },

  },

};

</script>

<style lang="less" scoped>

#container {

  overflow: hidden;

  width: 100%;

  height: 480px;

  margin: 0;

  font-family: "微软雅黑";

}

.info {

  z-index: 999;

  width: auto;

  min-width: 22rem;

  padding: 0.75rem 1.25rem;

  margin-left: 1.25rem;

  position: fixed;

  top: 1rem;

  background-color: #fff;

  border-radius: 0.25rem;

  font-size: 14px;

  color: #666;

  box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);

}

</style>

可用看这篇教程:

vue2中使用百度地图BMapGL_vue 引入bmapgl_-Healer的博客-CSDN博客