如何在谷歌地图上绘制位置标记并在单击其中一个时显示详细信息

How to plot placemarkers on Googlemaps and display details on clicking one of them?

本文关键字：一个 详细信息 显示 单击 谷歌地图 绘制 位置      更新时间：2023-09-26

我的团队正在进行一个数据挖掘项目，该项目使用web表单接受用户的输入，处理一堆数据，并生成旨在帮助执法的预测。我们希望以以下格式在网页上绘制我们的预测结果：http://www.crimemapping.com/map.aspx?aid=c99b299c-bc94-459a-b0dd-b871278930c3

  • 目标1：使用位置标记在谷歌地图上绘制坐标
  • 目标2：当位置标记时，在地图上显示某些细节单击
  • 目标3：。如果我说要显示"15"个点，那么网页显示的地图默认情况下会"放大到"这15个点？也就是说，当积分明显集中在某个特定城市时，我们不希望显示整个国家/大陆

我已经搜索了很长一段时间，想知道什么是最好的方法。我想用Python来做，但JS似乎是更好的方法。我看到了一些关于荷兰皇家航空和谷歌地球的帖子，但这似乎不符合我的目的。

你能给我建议什么是最好的方法吗？

这个例子是谷歌文档的表单，你可以看到标记并点击它一个信息窗口

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Info windows</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';
  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
  </body>
</html>
相关文章：