前言
在JavaScript中,使用Leaflet库显示地图是一种常见的做法。Leaflet是一个开源的JavaScript库,用于在Web应用程序中创建互动地图。它非常轻量级,易于使用,并且提供了多种功能,使开发者能够轻松地将地图集成到他们的项目中。
本次我们使用高德地图API来显示我们的地图,其实所有的大概都大差不差
如何使用?
准备-入门-教程-地图 JS API 1.4|高德地图API (amap.com)
● 上面是高德地图的开放平台,我们可以大概简单的看下,上面有详细的教程
● 如果我们需要使用一些天气、自定义地图、搜索、路线规划、地理编码等服务的话,需要申请key才能能够使用,不需要申请key也可以正常的使用地图;
● 下面,我们就直接来引入
● 下面我们将我们的经度纬度传入进去就可以了,还需要写一个marker来使用箭头标记我们目前的所在位置
if (navigator.geolocation)navigator.geolocation.getCurrentPosition(function (position) {const { latitude } = position.coords;const { longitude } = position.coords;console.log(position);const map = new AMap.Map('map', {center: [longitude, latitude],zoom: 11,});const marker = new AMap.Marker({position: [longitude, latitude], // 标记位置});marker.setMap(map);},function () {alert('无法获取你的位置!');});
● 这样就可以将地图显示出来了