谷歌地图 - 可点击标记的标记群集

我有点困惑与谷歌地图工作。 Iam不是编程的初学者，但JavaScript并不是我的最佳实践。谷歌地图 - 可点击标记的标记群集

我使用Google Maps Marker Cluster来标记某个位置。我从我的数据库中获取坐标。但我想显示（可点击）说明（工具提示）。我没有得到如何在我的代码中实现这一点。

我的代码如下所示：

function initMap(position) { 
      var map = new google.maps.Map(document.getElementById('map'), { 
       zoom: 10, 
       center: {lat: 51.1427552, lng: 8.2123375} 
      }); 
      if (navigator.geolocation) { 
       navigator.geolocation.getCurrentPosition(function (position) { 
        var pos = { 
         lat: position.coords.latitude, 
         lng: position.coords.longitude 
        }; 

        map.setCenter(pos); 
       }, function() { 
        handleLocationError(true, infoWindow, map.getCenter()); 
       }); 
      } 
      // Create an array of alphabetical characters used to label the markers. 
      var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 

      // Add some markers to the map. 
      // Note: The code uses the JavaScript Array.prototype.map() method to 
      // create an array of markers based on a given "locations" array. 
      // The map() method here has nothing to do with the Google Maps API. 
      var markers = locations.map(function (location, i) { 
       console.log(location[2]); 
       return new google.maps.Marker({ 
        position: location, 
        label: labels[i % labels.length], 
       }); 

      }); 

      console.log(markers); 

      // Add a marker clusterer to manage the markers. 
      var markerCluster = new MarkerClusterer(map, markers, 
        {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
     } 
     var locations = [{"lat":52.2885818,"lng":7.4184098,"title":"test"},{"lat":52.2756548,"lng":7.4223696,"title":"test"}]

我希望你能告诉我我该怎么整合这些工具提示。

我发现这样的代码：

google.maps.event.addListener(markers,'click',function() { 
var infowindow = new google.maps.InfoWindow({ 
    content:"Hello World!" 
});

infowindow.open（地图，标记）; }）;

但我不知道如何实现。帮助将被磨擦。非常感谢！

来源

2017-06-12 yfain

你尝试阅读本：https://developers.google.com/maps/documentation/javascript/examples/event-simple –

是的，我的问题是整合在我的循环 – yfain

你好yfain试试这个代码！

<script> 
var AllMarkers = []; 
google.maps.event.addDomListener(window, 'load', initMap); 
function initMap(position) { 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 10, 
      center: {lat: 51.1427552, lng: 8.2123375} 
     }); 
     if (navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(function (position) { 
       var pos = { 
        lat: position.coords.latitude, 
        lng: position.coords.longitude 
       }; 

       map.setCenter(pos); 
      }, function() { 
       handleLocationError(true, infoWindow, map.getCenter()); 
      }); 
     } 
     // Create an array of alphabetical characters used to label the markers. 
     var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 

     // Add some markers to the map. 
     // Note: The code uses the JavaScript Array.prototype.map() method to 
     // create an array of markers based on a given "locations" array. 
    // The map() method here has nothing to do with the Google Maps API. 

     //var markers = locations.map(function (location, i) { 
     // // console.log(location[2]); 
     // return new google.maps.Marker({ 
     //  position: location, 
     //  icon:'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m', 
     //  label: labels[i % labels.length], 
     // }); 

     //}); 
     $.each(locations, function (i, location) { 
      debugger; 
       console.log(location.lat+', '+location.lng); 
var points = { 
       lat: location.lat, 
       lng: location.lng 
      }; 
      map.setCenter(points); 
      var myLatlng = new google.maps.LatLng(location.lat, location.lng); 
      var marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map, 
       title: labels, 
       icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png' 
      }); 
      AllMarkers.push(marker) 
      marker.info = new google.maps.InfoWindow({ 
       content: location.title 
       // content: labels[i % labels.length] 
     }); 
     google.maps.event.addListener(marker, 'click', function (e) { 
     marker.info.open(map, marker); 
    }); 
     }); 

     //console.log(markers); 

     // Add a marker clusterer to manage the markers. 
    // var markerCluster = new MarkerClusterer(map, markers, 
    //   {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
    } 
var locations = [{ "lat": 30.740762, "lng": 76.783013, "title": "Loc-1" }, { "lat": 30.733532, "lng": 76.77134, "title": "Loc-2" }] 

</script>

来源

2017-06-13 17:15:31

作品添加的功能。谢谢 ;） – yfain

谷歌地图 - 可点击标记的标记群集

回答

相关问题