DELETE ACCOUNTDELETE ACCOUNTDELETE ACCOUNTDELETE ACCOUNTDELETE ACCOUNTDELETE ACCOUNTDELETE ACCOUNTDELETE ACCOUNTDELETE ACCOUNTDELETE ACCOUNTDELETE ACCOUNTDELETE ACCOUNTDELETE ACCOUNTDELETE ACCOUNTDELETE ACCOUNTDELETE ACCOUNTDELETE ACCOUNTDELETE ACCOUNTDELETE ACCOUNTDELETE ACCOUNTDELETE账户添加集群到我的谷歌地图脚本
第一定义标记的阵列，推动每一个创建标记那里，然后在该数组上调用markerClusterer。这种方法很适合我一次，那到底是什么在你列出的代码弗鲁姆的GoogleMaps建议：
var markers = [];
function create_marker(MapPos, MapTitle, MapDesc, InfoOpenDefault, DragAble, Removable, iconPath, mType)
{
var marker = new google.maps.Marker({
position: MapPos,
map: map,
draggable:DragAble,
animation: google.maps.Animation.DROP,
icon: iconPath
});
markers.push(marker);
}
运行create_marker功能（在你的情况分析AJAX数据后），然后创建群集像
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: zoom,
gridSize: size,
styles: styles[style]
});
使用remove_marker（）或save_marker（）函数更新markerClusterer对象时，可能需要调用refreshMap（）。
一定要包含jQuery，Google maps API和markerclusterer脚本。下面是从我codepen输出完整：
\t var infoWindows = [];
\t var markers = [];
\t var markerClusterer = null;
\t var map = null;
\t var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' + 'chco=FFFFFF,008CFF,000000&ext=.png';
\t var pinIcon = "icons/pin_green.png";
\t var pinIcon = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' + 'chco=FFFFFF,00FF8C,000000&ext=.png';
\t function refreshMap() {
\t \t \t if (markerClusterer) {
\t \t \t \t \t markerClusterer.clearMarkers();
\t \t \t \t \t // \t \t \t \t markerClusterer.addMarkers(markers,true)
\t \t \t \t \t markerClusterer.addMarkers(markers)
\t \t \t }
\t }
\t function clearClusters(e) {
\t \t \t \t \t e.preventDefault();
\t \t \t \t \t e.stopPropagation();
\t \t \t \t \t markerClusterer.clearMarkers();
\t \t \t }
\t \t \t //////////custom code
\t var mapCenter = new google.maps.LatLng(47.701829, -122.179969);
\t var map;
\t function map_initialize() {
\t \t \t var googleMapOptions = {
\t \t \t \t \t center: mapCenter, // map center
\t \t \t \t \t zoom: 13,
\t \t \t \t \t maxZoom: 22,
\t \t \t \t \t minZoom: 4,
\t \t \t \t \t zoomControlOptions: {
\t \t \t \t \t \t \t style: google.maps.ZoomControlStyle.SMALL,
\t \t \t \t \t \t \t position: google.maps.ControlPosition.RIGHT_TOP
\t \t \t \t \t },
\t \t \t \t \t mapTypeId: google.maps.MapTypeId.ROADMAP,
\t \t \t \t \t styles: roadmap_styles
\t \t \t };
\t \t \t map = new google.maps.Map(document.getElementById("map"), googleMapOptions);
\t \t \t $.get("map_process.php", function(data) {
\t \t \t \t \t $(data).find("marker").each(function() {
\t \t \t \t \t \t \t var pin_firstname = $(this).attr('pin_firstname');
\t \t \t \t \t \t \t var pincore_fulladdress = '<p>' + $(this).attr('pincore_fulladdress') + '</p>';
\t \t \t \t \t \t \t var pin_status = $(this).attr('pin_status');
\t \t \t \t \t \t \t var point = new google.maps.LatLng(parseFloat($(this).attr('pincore_lat')), parseFloat($(this).attr('pincore_lng')));
\t \t \t \t \t \t \t create_marker(point, pin_firstname, pincore_fulladdress, false, false, false, "icons/pin_blue.png");
\t \t \t \t \t });
\t \t \t });
\t \t \t google.maps.event.addListener(map, 'click', function(event) {
\t \t \t \t \t var EditForm = '<p><div class="marker-edit">' +
\t \t \t \t \t \t \t '<form action="ajax-save.php" method="POST" name="SaveMarker" id="SaveMarker">' +
\t \t \t \t \t \t \t '<label for="pPinStatus"><span>Status:</span> <select name="pPinStatus" class="save-type"><option value="Sold">SOLD</option><option value="Cancelled">Cancelled</option>' +
\t \t \t \t \t \t \t '<option value="house">Rejected</option></select></label><br/>' +
\t \t \t \t \t \t \t '<label for="pFullName"><span>Customer Name:</span><input type="text" name="pFullName" class="save-name" placeholder="Enter Title" maxlength="40" /></label>' +
\t \t \t \t \t \t \t '<label for="pDesc"><span>Address :</span><textarea name="pDesc" class="save-desc" placeholder="Enter Address" maxlength="150"></textarea></label>' +
\t \t \t \t \t \t \t '</form>' +
\t \t \t \t \t \t \t '</div></p><button name="save-marker" class="save-marker">Save Marker</button>';
\t \t \t \t \t create_marker(event.latLng, 'Add New Pin', EditForm, true, true, true, pinIcon);
\t \t \t });
\t \t \t markerClusterer = new MarkerClusterer(map, markers, {
\t \t \t \t \t maxZoom: 15,
\t \t \t \t \t gridSize: 4,
\t \t \t \t \t styles: clusterer_styles
\t \t \t });
\t \t \t $('#refresh').click(function() {
\t \t \t \t \t refreshMap()
\t \t \t })
\t \t \t $('#clear').click(function() {
\t \t \t \t \t clearClusters()
\t \t \t })
\t }
\t function create_marker(MapPos, MapTitle, MapDesc, InfoOpenDefault, DragAble, Removable, iconPath, mType) {
\t \t \t var marker = new google.maps.Marker({
\t \t \t \t \t position: MapPos,
\t \t \t \t \t map: map,
\t \t \t \t \t draggable: DragAble,
\t \t \t \t \t animation: google.maps.Animation.DROP,
\t \t \t \t \t icon: iconPath
\t \t \t });
\t \t \t markers.push(marker);
\t \t \t console.log(markers)
\t \t \t refreshMap()
\t \t \t var contentString = $('<div class="marker-info-win">' +
\t \t \t \t \t '<div class="marker-inner-win"><span class="info-content">' +
\t \t \t \t \t '<h1 class="marker-heading">' + mType + '</h1>' +
\t \t \t \t \t MapTitle +
\t \t \t \t \t MapDesc +
\t \t \t \t \t '</span><button name="remove-marker" class="remove-marker">Remove Marker</button>' +
\t \t \t \t \t '</div></div>');
\t \t \t var infowindow = new google.maps.InfoWindow();
\t \t \t infowindow.setContent(contentString[0]);
\t \t \t var removeBtn = contentString.find('button.remove-marker')[0];
\t \t \t var saveBtn = contentString.find('button.save-marker')[0];
\t \t \t google.maps.event.addDomListener(removeBtn, "click", function(event) {
\t \t \t \t \t remove_marker(marker);
\t \t \t });
\t \t \t if (typeof saveBtn !== 'undefined') {
\t \t \t \t \t //add click listner to save marker button
\t \t \t \t \t google.maps.event.addDomListener(saveBtn, "click", function(event) {
\t \t \t \t \t \t \t var mReplace = contentString.find('span.info-content');
\t \t \t \t \t \t \t var mName = contentString.find('input.save-name')[0].value;
\t \t \t \t \t \t \t var mDesc = contentString.find('textarea.save-desc')[0].value;
\t \t \t \t \t \t \t var mType = contentString.find('select.save-type')[0].value;
\t \t \t \t \t \t \t if (mName == '' || mDesc == '') {
\t \t \t \t \t \t \t \t \t alert("Please enter the correct information to disposition a new pin!");
\t \t \t \t \t \t \t } else {
\t \t \t \t \t \t \t \t \t save_marker(marker, mName, mDesc, mType, mReplace);
\t \t \t \t \t \t \t }
\t \t \t \t \t });
\t \t \t }
\t \t \t infoWindows.push(infowindow)
\t \t \t google.maps.event.addListener(marker, 'click', function() {
\t \t \t \t \t for (var a in infoWindows) {
\t \t \t \t \t \t \t infoWindows[a].close()
\t \t \t \t \t }
\t \t \t \t \t infowindow.open(map, marker);
\t \t \t });
\t \t \t if (InfoOpenDefault) {
\t \t \t \t \t for (var a in infoWindows) {
\t \t \t \t \t \t \t infoWindows[a].close()
\t \t \t \t \t }
\t \t \t \t \t infowindow.open(map, marker);
\t \t \t }
\t }
\t function remove_marker(Marker) {
\t \t \t if (Marker.getDraggable()) {
\t \t \t \t \t Marker.setMap(null);
\t \t \t } else {
\t \t \t \t \t var mLatLang = Marker.getPosition().toUrlValue();
\t \t \t \t \t var myData = {
\t \t \t \t \t \t \t del: 'true',
\t \t \t \t \t \t \t latlang: mLatLang
\t \t \t \t \t };
\t \t \t \t \t $.ajax({
\t \t \t \t \t \t \t type: "POST",
\t \t \t \t \t \t \t url: "map_process.php",
\t \t \t \t \t \t \t data: myData,
\t \t \t \t \t \t \t success: function(data) {
\t \t \t \t \t \t \t \t \t Marker.setMap(null);
\t \t \t \t \t \t \t \t \t alert(data);
\t \t \t \t \t \t \t },
\t \t \t \t \t \t \t error: function(xhr, ajaxOptions, thrownError) {
\t \t \t \t \t \t \t \t \t alert(thrownError);
\t \t \t \t \t \t \t }
\t \t \t \t \t });
\t \t \t }
\t }
\t function save_marker(Marker, mName, mAddress, mType, replaceWin) {
\t \t \t var mLatLang = Marker.getPosition().toUrlValue();
\t \t \t var myData = {
\t \t \t \t \t pin_firstname: mName,
\t \t \t \t \t pincore_fulladdress: mAddress,
\t \t \t \t \t latlang: mLatLang,
\t \t \t \t \t pin_status: mType
\t \t \t };
\t \t \t console.log(replaceWin);
\t \t \t $.ajax({
\t \t \t \t \t type: "POST",
\t \t \t \t \t url: "map_process.php",
\t \t \t \t \t data: myData,
\t \t \t \t \t success: function(data) {
\t \t \t \t \t \t \t replaceWin.html(data);
\t \t \t \t \t \t \t Marker.setDraggable(false);
\t \t \t \t \t \t \t Marker.setIcon('icons/pin_blue.png');
\t \t \t \t \t },
\t \t \t \t \t error: function(xhr, ajaxOptions, thrownError) {
\t \t \t \t \t \t \t alert(thrownError);
\t \t \t \t \t }
\t \t \t });
\t }
\t $(document).ready(function() {
\t \t \t map_initialize();
\t });
\t var clusterer_styles = [
\t \t \t [{
\t \t \t \t \t url: imageUrl,
\t \t \t \t \t height: 35,
\t \t \t \t \t width: 35,
\t \t \t \t \t anchor: [16, 0],
\t \t \t \t \t textColor: '#ff00ff',
\t \t \t \t \t textSize: 10
\t \t \t }, {
\t \t \t \t \t url: imageUrl,
\t \t \t \t \t height: 45,
\t \t \t \t \t width: 45,
\t \t \t \t \t anchor: [24, 0],
\t \t \t \t \t textColor: '#ff0000',
\t \t \t \t \t textSize: 11
\t \t \t }, {
\t \t \t \t \t url: imageUrl,
\t \t \t \t \t height: 55,
\t \t \t \t \t width: 55,
\t \t \t \t \t anchor: [32, 0],
\t \t \t \t \t textColor: '#ffffff',
\t \t \t \t \t textSize: 12
\t \t \t }],
\t \t \t [{
\t \t \t \t \t url: imageUrl,
\t \t \t \t \t height: 27,
\t \t \t \t \t width: 30,
\t \t \t \t \t anchor: [3, 0],
\t \t \t \t \t textColor: '#ff00ff',
\t \t \t \t \t textSize: 10
\t \t \t }, {
\t \t \t \t \t url: imageUrl,
\t \t \t \t \t height: 36,
\t \t \t \t \t width: 40,
\t \t \t \t \t anchor: [6, 0],
\t \t \t \t \t textColor: '#ff0000',
\t \t \t \t \t textSize: 11
\t \t \t }, {
\t \t \t \t \t url: imageUrl,
\t \t \t \t \t width: 50,
\t \t \t \t \t height: 45,
\t \t \t \t \t anchor: [8, 0],
\t \t \t \t \t textSize: 12
\t \t \t }],
\t \t \t [{
\t \t \t \t \t url: imageUrl,
\t \t \t \t \t height: 26,
\t \t \t \t \t width: 30,
\t \t \t \t \t anchor: [4, 0],
\t \t \t \t \t textColor: '#ff00ff',
\t \t \t \t \t textSize: 10
\t \t \t }, {
\t \t \t \t \t url: imageUrl,
\t \t \t \t \t height: 35,
\t \t \t \t \t width: 40,
\t \t \t \t \t anchor: [8, 0],
\t \t \t \t \t textColor: '#ff0000',
\t \t \t \t \t textSize: 11
\t \t \t }, {
\t \t \t \t \t url: imageUrl,
\t \t \t \t \t width: 50,
\t \t \t \t \t height: 44,
\t \t \t \t \t anchor: [12, 0],
\t \t \t \t \t textSize: 12
\t \t \t }]
\t ];
\t var roadmap_styles = [{
\t \t \t stylers: [{
\t \t \t \t \t saturation: -100
\t \t \t }]
\t }, {
\t \t \t featureType: "water",
\t \t \t elementType: "geometry.fill",
\t \t \t stylers: [{
\t \t \t \t \t color: "#0099dd"
\t \t \t }]
\t }, {
\t \t \t elementType: "labels",
\t \t \t stylers: [{
\t \t \t \t \t visibility: "off"
\t \t \t }]
\t }, {
\t \t \t featureType: "poi.park",
\t \t \t elementType: "geometry.fill",
\t \t \t stylers: [{
\t \t \t \t \t color: "#aadd55"
\t \t \t }]
\t }, {
\t \t \t featureType: "road.highway",
\t \t \t elementType: "labels",
\t \t \t stylers: [{
\t \t \t \t \t visibility: "on"
\t \t \t }]
\t }, {
\t \t \t featureType: "road.arterial",
\t \t \t elementType: "labels.text",
\t \t \t stylers: [{
\t \t \t \t \t visibility: "on"
\t \t \t }]
\t }, {
\t \t \t featureType: "road.local",
\t \t \t elementType: "labels.text",
\t \t \t stylers: [{
\t \t \t \t \t visibility: "on"
\t \t \t }]
\t }, {}]#map{
\t \t width: 100%;
\t \t height: 100%;
\t \t background-color: #aaa;
\t }
\t html,
\t body
\t {
\t \t height: 100%;
\t }
\t
\t .button
\t {
\t \t width: 10rem;
\t \t height: 3rem;
\t \t background: #b5cdde;
\t \t color: #fff;
\t \t text-align: center;
\t \t position: absolute;
\t \t bottom: 1rem;
\t \t right: 3vw;
\t \t z-index: 50;
\t \t line-height: 3rem;
\t \t font-size: 20px;
\t \t font-family: sans-serif;
\t \t text-transform: uppercase;
\t \t box-shadow: 1px 1px 2px #aac;
\t \t cursor: pointer;
\t \t border-radius: 3px;
\t \t border: 2px solid darken(#b5cdde,10%);
\t }
\t .button:hover
\t {
\t \t background: darken(#b5cdde,10%)
\t }
\t .button:nth-child(2)
\t {
\t \t right: 13vw;
\t }
\t .marker-edit
\t {
\t \t width: 10vw;
\t }<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0.2/src/markerclusterer.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<div id='map'></div>
<div class='button' id='refresh'>
Refresh
</div>
<div class='button' id='clear'>
Clear
</div>所有这些都发生在你的'map_initialize（）'函数中，但我建议定义'markers' jQuery文档准备事件之前的数组，以便您可以从浏览器控制台访问它。我会提供一个codepen，以便我稍后了解您的代码，随时将它分叉以符合您的需求 – obojdi
您是否有机会在这个@obojdi – Levi
[您在此处]（http：// codepen.io/obojdi/pen/KdNjOj） 这个答案可能也有帮助http://stackoverflow.com/questions/5258553/adding-simple-marker-clusterer-to-google-map我对你做了一些改进代码就像将所有infoWindows放到全局数组中一样，这样你就可以隐藏除active之外的所有信息。让我知道如果你有进一步的问题，对于迟到的回复 – obojdi
你能在此拍摄的峰值请。我没有任何运气，你似乎是那种可以在睡眠中做这件事的人@ kjy112 – Levi