APIcolud 模块googleMap 实现谷歌地图

2023-12-28 03:36:48

如何使用APIcolud 模块googleMap实现谷歌地图

一、打开地图

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry,places"></script>
<script>
  function initMap() {
    // 创建地图对象
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
  }
</script>

二、获取当前位置信息

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  var lat = position.coords.latitude;
  var lng = position.coords.longitude;

  // 将地图中心点设置为当前位置
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: lat, lng: lng},
    zoom: 15
  });
}

三、根据当前位置信息设置地图中心点

function centerMap() {
  var lat = document.getElementById('lat').value;
  var lng = document.getElementById('lng').value;

  // 将地图中心点设置为指定位置
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: lat, lng: lng},
    zoom: 15
  });
}

四、在地图上添加标注信息(添加点)

function addMarker() {
  var lat = document.getElementById('lat').value;
  var lng = document.getElementById('lng').value;
  var title = document.getElementById('title').value;

  // 创建标注信息对象
  var marker = new google.maps.Marker({
    position: {lat: lat, lng: lng},
    title: title
  });

  // 将标注信息添加到地图上
  marker.setMap(map);
}

五、监听地图上标注信息(添加点)的点击事件

function addMarkerWithListener() {
  var lat = document.getElementById('lat').value;
  var lng = document.getElementById('lng').value;
  var title = document.getElementById('title').value;

  // 创建标注信息对象
  var marker = new google.maps.Marker({
    position: {lat: lat, lng: lng},
    title: title
  });

  // 将标注信息添加到地图上
  marker.setMap(map);

  // 监听标注信息(添加点)的点击事件
  marker.addListener('click', function() {
    alert(marker.getTitle());
  });
}

六、在地图上添加线和多边形

function addPolyline() {
  var path = [{lat: 37.772, lng: -122.423}, {lat: 37.761, lng: -122.445}, {lat: 37.772, lng: -122.445}];

  // 创建线对象
  var polyline = new google.maps.Polyline({
    path: path,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  // 将线添加到地图上
  polyline.setMap(map);
}

function addPolygon() {
  var path = [{lat: 37.772, lng: -122.423}, {lat: 37.761, lng: -122.445}, {lat: 37.772, lng: -122.445}];

  // 创建多边形对象
  var polygon = new google.maps.Polygon({
    path: path,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  // 将多边形添加到地图上
  polygon.setMap(map);
}