Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/419.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 制作集群谷歌地图_Javascript_C#_Html_Asp.net_Google Maps - Fatal编程技术网

Javascript 制作集群谷歌地图

Javascript 制作集群谷歌地图,javascript,c#,html,asp.net,google-maps,Javascript,C#,Html,Asp.net,Google Maps,我有一张谷歌地图,上面有多个标记,标记之间画有线。我希望这张地图是群集的 我尝试了以下代码: <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.

我有一张谷歌地图,上面有多个标记,标记之间画有线。我希望这张地图是群集的

我尝试了以下代码:

 <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>

函数初始化映射(){
var ltlng=[];
ltlng.push(新的google.maps.LatLng(29.392498333333332,71.6945566666));
ltlng.push(新的google.maps.LatLng(29.392564999998,71.6944566666667));
ltlng.push(新的google.maps.LatLng(29.400855,71.661814999999));
ltlng.push(新的google.maps.LatLng(29.39245999996,71.69463));
ltlng.push(新的google.maps.LatLng(29.392541666663,71.69443334));
变量myOptions={
缩放:15,
//中心:拉特林,
中心:ltlng[0],
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map(document.getElementById(“map”),myOptions);
对于(变量i=0;i{
if(location.location==null)返回
const marker=new google.maps.marker({
位置:{lat:location.location.coordinates[0],lng:location.location.coordinates[1]},
地图:这是地图
});
返回标记
});
const markerCluster=new MarkerClusterer(this.map,this.markers{
imagePath:'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
window.onload=初始化映射;
创建您的第一个谷歌地图演示:
我经历了以下几点:

但它不起作用

请帮我解决这个问题


谢谢

这里是最后的答案:

<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>

函数初始化映射(){
var ltlng=[];
ltlng.push(新的google.maps.LatLng(29.392498333333332,71.6945566666));
ltlng.push(新的google.maps.LatLng(29.392564999998,71.6944566666667));
ltlng.push(新的google.maps.LatLng(29.400855,71.661814999999));
ltlng.push(新的google.maps.LatLng(29.39245999996,71.69463));
ltlng.push(新的google.maps.LatLng(29.392541666663,71.69443334));
变量myOptions={
缩放:15,
//中心:拉特林,
中心:ltlng[0],
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map(document.getElementById(“map”),myOptions);
var标记=[];
对于(变量i=0;i
我添加了标记数组,并在循环时保存了数组中的所有标记。然后在调用聚类方法时使用该标记数组