制作集群谷歌地图

Posted 2023-02-22

【中文标题】制作集群谷歌地图

【英文标题】：Make Clustered Google Map

【发布时间】：2019-01-20 00:20:49

【问题描述】：

我有一个谷歌地图，其中有多个标记，在它们之间绘制了线条。我希望这张地图被聚类。

我试过以下代码：

 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&callback=map_init"></script>
    <script type="text/javascript" src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
    <script type="text/javascript">
        function InitializeMap() 
            var ltlng = [];

            ltlng.push(new google.maps.LatLng(29.392498333333332,71.69455666666666));
            ltlng.push(new google.maps.LatLng(29.392564999999998,71.69445666666667));
            ltlng.push(new google.maps.LatLng(29.400855,71.66181499999999));
            ltlng.push(new google.maps.LatLng(29.392459999999996,71.69463));
            ltlng.push(new google.maps.LatLng(29.392541666666663,71.69443333333334));

            var myOptions = 
                zoom: 15,
                //center: latlng,
                center: ltlng[0],
                mapTypeId: google.maps.MapTypeId.ROADMAP
            ;
            var map = new google.maps.Map(document.getElementById("map"), myOptions);

            for (var i = 0; i < ltlng.length; i++) 
                var marker = new google.maps.Marker
                    (
                    
                        // position: new google.maps.LatLng(-34.397, 150.644),
                        position: ltlng[i],
                        map: map,
                        title: 'Click me'
                    
                    );
                    


               var flightPath = new google.maps.Polyline(
          path: ltlng,
          geodesic: true,
          strokeColor: '#4986E7',
          strokeOpacity: 1.0,
          strokeWeight: 2
        );

            flightPath.setMap(map);

  this.markers = data.map((location) => 
    if (location.location === null) return
    const marker = new google.maps.Marker(
      position:  lat: location.location.coordinates[0], lng: location.location.coordinates[1],
      map: this.map
    );
    return marker
  );
  const markerCluster = new MarkerClusterer(this.map, this.markers, 
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  );

        

        window.onload = InitializeMap;

    </script>
    <h2>Creating Your First Google Map Demo:</h2>
    <div id="map" style="width: 800px; top: 68px; left: 172px; position: absolute; height: 500px">
    </div>

我经历了以下：

https://developers.google.com/maps/documentation/javascript/marker-clustering Google Map Clusterer

Google Map Clusterer

但它不起作用。

请帮我解决这个问题

谢谢

【参考方案1】：

这是最终答案：

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&callback=map_init"></script>
    <script type="text/javascript" src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
    <script type="text/javascript">
        function InitializeMap() 
            var ltlng = [];    

            ltlng.push(new google.maps.LatLng(29.392498333333332,71.69455666666666));
            ltlng.push(new google.maps.LatLng(29.392564999999998,71.69445666666667));
            ltlng.push(new google.maps.LatLng(29.400855,71.66181499999999));
            ltlng.push(new google.maps.LatLng(29.392459999999996,71.69463));
            ltlng.push(new google.maps.LatLng(29.392541666666663,71.69443333333334));

            var myOptions = 
                zoom: 15,
                //center: latlng,
                center: ltlng[0],
                mapTypeId: google.maps.MapTypeId.ROADMAP
            ;
            var map = new google.maps.Map(document.getElementById("map"), myOptions);
            var markers = []; 
            for (var i = 0; i < ltlng.length; i++)
            
                var marker = new google.maps.Marker
                    (
                    
                        // position: new google.maps.LatLng(-34.397, 150.644),
                        position: ltlng[i],
                        map: map,
                        title: 'Click me'
                    
                );
                 markers.push(marker);
                            

          var flightPath = new google.maps.Polyline(
          path: ltlng,
          geodesic: true,
          strokeColor: '#4986E7',
          strokeOpacity: 1.0,
          strokeWeight: 2
        );

            flightPath.setMap(map);



            var markerCluster = new MarkerClusterer(map, markers, 
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  );

        

        window.onload = InitializeMap;

    </script>
    <h2>Creating Your First Google Map Demo:</h2>
    <div id="map" style="width: 800px; top: 68px; left: 172px; position: absolute; height: 500px">
    </div>
</asp:Content>

我添加了标记数组并在循环时将所有标记保存在数组中。然后在调用聚类方法时使用这个标记数组。