百度地图

引入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>