Vue简单的引入主流地图

百度地图

引入ak

在 public/index.html 中引入,根据官网教程，注册百度地图，获取应用ak。

页面代码

<template>
  <div class="pos-monitor">
    <div id="map" style="height:120vh; width:100%">
    </div>
  </div>
</template>

<script>
export default {
  name: 'ColdChainMapList',
  mounted() {
    // 创建地图实例
    const map = new window.BMapGL.Map('map')
    // 创建点坐标
    const point = new window.BMapGL.Point(108.884449, 34.19635)
    // 初始化地图，设置中心点坐标和地图级别
    map.centerAndZoom(point, 18)
    map.enableScrollWheelZoom(true)

    const scaleCtrl = new window.BMapGL.ScaleControl() // 添加比例尺控件
    map.addControl(scaleCtrl)
    const zoomCtrl = new window.BMapGL.ZoomControl() // 添加缩放控件
    map.addControl(zoomCtrl)
    const cityCtrl = new window.BMapGL.CityListControl() // 添加城市列表控件
    map.addControl(cityCtrl)
  }
}
</script>

<style lang="scss" scoped>
.pos-monitor {
  position: relative;
  width: 100%;
  height: 100%;
}

</style>

腾讯地图

引入地图

//先在vue的index.html里面引入腾讯地图包

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=yourkey"></script>

页面代码

<template>
  <div class="pos-monitor">
    <div id="map" style="height:120vh; width:100%">
    </div>
  </div>
</template>

<script>
export default {
  name: 'ColdChainMapList',
  mounted() {
    this.init()
  },
  methods: {
    init() {
      console.log(window) // 通过window获取
      const center = new window.TMap.LatLng(34.19109, 108.877762)
      // 初始化地图
      const map = new window.TMap.Map('map', {
        zoom: 18, // 设置地图缩放级别
        center, // 设置地图中心点坐标
        baseMap: { // 设置卫星地图
          type: 'satellite'
        }
      })
      console.log(map)
    }
  }
}
</script>

<style lang="scss" scoped>
.pos-monitor {
  position: relative;
  width: 100%;
  height: 100%;
}

</style>

高德地图

引入地图

<!-- 加载地图JSAPI脚本 -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

示例代码

<template>
  <div class="pos-monitor">
    <div id="map" style="height:120vh; width:100%">
    </div>
  </div>
</template>

<script>
export default {
  name: 'ColdChainMapList',
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const map = new window.AMap.Map('map', {
        resizeEnable: true, // 是否监控地图容器尺寸变化
        zoom: 20, // 初始化地图层级
        center: [108.878114, 34.190527] // 初始化地图中心点
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.pos-monitor {
  position: relative;
  width: 100%;
  height: 100%;
}

</style>