临安城市建设公司网站网页设计与制作项目教程
本文主要介绍引入高德地图和使用leafLet添加其他地图图层
- 1、高德地图
需要在高德开发平台注册账号，创建自己的应用，取到Key，然后再vue中安装@amap/amap-jsapi-loader，就可以使用高德地图了
<template><div id="map-container" style="width: 100%; height: 500px;"></div>
</template><script>
import AMapLoader from '@amap/amap-jsapi-loader';export default {name: 'Map',data() {return {map: null,};},mounted() {this.initMap();},methods: {initMap() {AMapLoader.load({key: '。。。。', // 替换为你的API Keyversion: '2.0', // 指定要加载的 JSAPI 的版本plugins: ['AMap.Geolocation', 'AMap.Marker'], // 需要使用的的插件列表}).then((AMap) => {this.map = new AMap.Map('map-container', {zoom: 19, // 地图缩放级别(最大测试20)center: [116.492072, 39.988803], // 地图中心点});// 添加定位控件const geolocation = new AMap.Geolocation({enableHighAccuracy: true, // 是否使用高精度定位timeout: 10000, // 超时时间});this.map.addControl(geolocation);// 添加标记const marker = new AMap.Marker({position: [116.492072, 39.988803], // 标记位置title: '北京',});this.map.add(marker);}).catch((e) => {console.error(e);});},},
};
</script><style scoped>
#map-container {/* width: 100%; *//* height: 500px; */
}
</style>然后在具体地方引入该组件即可
注意：如果需要找经纬度，可以坐标拾取器 | 高德地图API
- 2、leaflet
Leaflet 是一个轻量级的开源地图库，适合在 Vue 项目中使用
引入项目后，需要 添加地图图层，这个地图图层可以是高德、百度、Google Maps、 Mapbox（这些都需要key或者令牌，还不如直接用他们自己的api，不通过leaflet），不需要key的就是OpenStreetMap，但是这个经常网络访问不了，翻一下就很快
综上，推荐直接使用高德，在vue中引入。