添加集群到我的谷歌地图脚本
Adding Clustering into my Google Maps Script
我正在尝试添加地图集群到我现有的脚本。
我想添加此代码,并将其混合到我现有的代码中。
代码-下面脚本的工作示例。https://googlemaps.github.io/js-marker-clusterer/examples/advanced_example.html
<script>
var script = '<script type="text/javascript" src="../src/markerclusterer';
if (document.location.search.indexOf('compiled') !== -1) {
script += '_compiled';
}
script += '.js"><' + '/script>';
document.write(script);
</script>
<script>
var styles = [[{
url: '../images/people35.png',
height: 35,
width: 35,
anchor: [16, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: '../images/people45.png',
height: 45,
width: 45,
anchor: [24, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: '../images/people55.png',
height: 55,
width: 55,
anchor: [32, 0],
textColor: '#ffffff',
textSize: 12
}], [{
url: '../images/conv30.png',
height: 27,
width: 30,
anchor: [3, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: '../images/conv40.png',
height: 36,
width: 40,
anchor: [6, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: '../images/conv50.png',
width: 50,
height: 45,
anchor: [8, 0],
textSize: 12
}], [{
url: '../images/heart30.png',
height: 26,
width: 30,
anchor: [4, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: '../images/heart40.png',
height: 35,
width: 40,
anchor: [8, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: '../images/heart50.png',
width: 50,
height: 44,
anchor: [12, 0],
textSize: 12
}]];
var markerClusterer = null;
var map = null;
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
'chco=FFFFFF,008CFF,000000&ext=.png';
function refreshMap() {
if (markerClusterer) {
markerClusterer.clearMarkers();
}
var markers = [];
var markerImage = new google.maps.MarkerImage(imageUrl,
new google.maps.Size(24, 32));
for (var i = 0; i < 1000; ++i) {
var latLng = new google.maps.LatLng(data.photos[i].latitude,
data.photos[i].longitude)
var marker = new google.maps.Marker({
position: latLng,
draggable: true,
icon: markerImage
});
markers.push(marker);
}
var zoom = parseInt(document.getElementById('zoom').value, 10);
var size = parseInt(document.getElementById('size').value, 10);
var style = parseInt(document.getElementById('style').value, 10);
zoom = zoom === -1 ? null : zoom;
size = size === -1 ? null : size;
style = style === -1 ? null: style;
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: zoom,
gridSize: size,
styles: styles[style]
});
}
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(39.91, 116.38),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var refresh = document.getElementById('refresh');
google.maps.event.addDomListener(refresh, 'click', refreshMap);
var clear = document.getElementById('clear');
google.maps.event.addDomListener(clear, 'click', clearClusters);
refreshMap();
}
function clearClusters(e) {
e.preventDefault();
e.stopPropagation();
markerClusterer.clearMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
然后我想把上面的代码和集群添加到我现有的代码下面。
<script type="text/javascript">
$(document).ready(function() {
var mapCenter = new google.maps.LatLng(47.701829, -122.179969);
var map;
map_initialize();
function map_initialize()
{
var googleMapOptions =
{
center: mapCenter, // map center
zoom: 13,
maxZoom: 22,
minZoom: 10,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_TOP
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{
stylers: [{
saturation: -100
}]
}, {
featureType: "water",
elementType: "geometry.fill",
stylers: [{
color: "#0099dd"
}]
}, {
elementType: "labels",
stylers: [{
visibility: "off"
}]
}, {
featureType: "poi.park",
elementType: "geometry.fill",
stylers: [{
color: "#aadd55"
}]
}, {
featureType: "road.highway",
elementType: "labels",
stylers: [{
visibility: "on"
}]
}, {
featureType: "road.arterial",
elementType: "labels.text",
stylers: [{
visibility: "on"
}]
}, {
featureType: "road.local",
elementType: "labels.text",
stylers: [{
visibility: "on"
}]
}, {}]
};
map = new google.maps.Map(document.getElementById("map"), googleMapOptions);
$.get("map_process.php", function (data) {
$(data).find("marker").each(function () {
var pin_firstname = $(this).attr('pin_firstname');
var pincore_fulladdress = '<p>'+ $(this).attr('pincore_fulladdress') +'</p>';
var pin_status = $(this).attr('pin_status');
var point = new google.maps.LatLng(parseFloat($(this).attr('pincore_lat')),parseFloat($(this).attr('pincore_lng')));
create_marker(point, pin_firstname, pincore_fulladdress, false, false, false, "icons/pin_blue.png");
});
});
google.maps.event.addListener(map, 'click', function(event) {
var EditForm = '<p><div class="marker-edit">'+
'<form action="ajax-save.php" method="POST" name="SaveMarker" id="SaveMarker">'+
'<label for="pPinStatus"><span>Status:</span> <select name="pPinStatus" class="save-type"><option value="Sold">SOLD</option><option value="Cancelled">Cancelled</option>'+
'<option value="house">Rejected</option></select></label>'+
'<label for="pFullName"><span>Customer Name:</span><input type="text" name="pFullName" class="save-name" placeholder="Enter Title" maxlength="40" /></label>'+
'<label for="pDesc"><span>Address :</span><textarea name="pDesc" class="save-desc" placeholder="Enter Address" maxlength="150"></textarea></label>'+
'</form>'+
'</div></p><button name="save-marker" class="save-marker">Save Marker</button>';
create_marker(event.latLng, 'Add New Pin', EditForm, true, true, true, "icons/pin_green.png");
});
}
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
});
var contentString = $('<div class="marker-info-win">'+
'<div class="marker-inner-win"><span class="info-content">'+
'<h1 class="marker-heading">'+mType+'</h1>'+
MapTitle+
MapDesc+
'</span><button name="remove-marker" class="remove-marker">Remove Marker</button>'+
'</div></div>');
var infowindow = new google.maps.InfoWindow();
infowindow.setContent(contentString[0]);
var removeBtn = contentString.find('button.remove-marker')[0];
var saveBtn = contentString.find('button.save-marker')[0];
google.maps.event.addDomListener(removeBtn, "click", function(event) {
remove_marker(marker);
});
if(typeof saveBtn !== 'undefined')
{
//add click listner to save marker button
google.maps.event.addDomListener(saveBtn, "click", function(event) {
var mReplace = contentString.find('span.info-content');
var mName = contentString.find('input.save-name')[0].value;
var mDesc = contentString.find('textarea.save-desc')[0].value;
var mType = contentString.find('select.save-type')[0].value;
if(mName =='' || mDesc =='')
{
alert("Please enter the correct information to disposition a new pin!");
}else{
save_marker(marker, mName, mDesc, mType, mReplace);
}
});
}
google.maps.event.addListener(marker, 'click', function() {
var marker = new google.maps.Marker({
position: MapPos,
map: map,
animation: google.maps.Animation.DROP,
icon: iconPath
});
infowindow.open(map,marker);
});
if(InfoOpenDefault)
{
infowindow.open(map,marker);
}
}
function remove_marker(Marker)
{
if(Marker.getDraggable())
{
Marker.setMap(null);
}
else
{
var mLatLang = Marker.getPosition().toUrlValue();
var myData = {del : 'true', latlang : mLatLang};
$.ajax({
type: "POST",
url: "map_process.php",
data: myData,
success:function(data){
Marker.setMap(null);
alert(data);
},
error:function (xhr, ajaxOptions, thrownError){
alert(thrownError);
}
});
}
}
function save_marker(Marker, mName, mAddress, mType, replaceWin)
{
var mLatLang = Marker.getPosition().toUrlValue();
var myData = {pin_firstname : mName, pincore_fulladdress : mAddress, latlang : mLatLang, pin_status : mType };
console.log(replaceWin);
$.ajax({
type: "POST",
url: "map_process.php",
data: myData,
success:function(data){
replaceWin.html(data);
Marker.setDraggable(false);
Marker.setIcon('icons/pin_blue.png');
},
error:function (xhr, ajaxOptions, thrownError){
alert(thrownError);
}
});
}
});
</script>
任何帮助将非常感激!!
首先定义一个标记数组,在那里推送每个创建的标记,然后在该数组上调用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,谷歌地图API和markerclusterer脚本。以下是我的codepen的完整输出:
var infoWindows = [];
var markers = [];
var markerClusterer = null;
var map = null;
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' + 'chco=FFFFFF,008CFF,000000&ext=.png';
var pinIcon = "icons/pin_green.png";
var pinIcon = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' + 'chco=FFFFFF,00FF8C,000000&ext=.png';
function refreshMap() {
if (markerClusterer) {
markerClusterer.clearMarkers();
// markerClusterer.addMarkers(markers,true)
markerClusterer.addMarkers(markers)
}
}
function clearClusters(e) {
e.preventDefault();
e.stopPropagation();
markerClusterer.clearMarkers();
}
//////////custom code
var mapCenter = new google.maps.LatLng(47.701829, -122.179969);
var map;
function map_initialize() {
var googleMapOptions = {
center: mapCenter, // map center
zoom: 13,
maxZoom: 22,
minZoom: 4,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_TOP
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: roadmap_styles
};
map = new google.maps.Map(document.getElementById("map"), googleMapOptions);
$.get("map_process.php", function(data) {
$(data).find("marker").each(function() {
var pin_firstname = $(this).attr('pin_firstname');
var pincore_fulladdress = '<p>' + $(this).attr('pincore_fulladdress') + '</p>';
var pin_status = $(this).attr('pin_status');
var point = new google.maps.LatLng(parseFloat($(this).attr('pincore_lat')), parseFloat($(this).attr('pincore_lng')));
create_marker(point, pin_firstname, pincore_fulladdress, false, false, false, "icons/pin_blue.png");
});
});
google.maps.event.addListener(map, 'click', function(event) {
var EditForm = '<p><div class="marker-edit">' +
'<form action="ajax-save.php" method="POST" name="SaveMarker" id="SaveMarker">' +
'<label for="pPinStatus"><span>Status:</span> <select name="pPinStatus" class="save-type"><option value="Sold">SOLD</option><option value="Cancelled">Cancelled</option>' +
'<option value="house">Rejected</option></select></label><br/>' +
'<label for="pFullName"><span>Customer Name:</span><input type="text" name="pFullName" class="save-name" placeholder="Enter Title" maxlength="40" /></label>' +
'<label for="pDesc"><span>Address :</span><textarea name="pDesc" class="save-desc" placeholder="Enter Address" maxlength="150"></textarea></label>' +
'</form>' +
'</div></p><button name="save-marker" class="save-marker">Save Marker</button>';
create_marker(event.latLng, 'Add New Pin', EditForm, true, true, true, pinIcon);
});
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: 15,
gridSize: 4,
styles: clusterer_styles
});
$('#refresh').click(function() {
refreshMap()
})
$('#clear').click(function() {
clearClusters()
})
}
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);
console.log(markers)
refreshMap()
var contentString = $('<div class="marker-info-win">' +
'<div class="marker-inner-win"><span class="info-content">' +
'<h1 class="marker-heading">' + mType + '</h1>' +
MapTitle +
MapDesc +
'</span><button name="remove-marker" class="remove-marker">Remove Marker</button>' +
'</div></div>');
var infowindow = new google.maps.InfoWindow();
infowindow.setContent(contentString[0]);
var removeBtn = contentString.find('button.remove-marker')[0];
var saveBtn = contentString.find('button.save-marker')[0];
google.maps.event.addDomListener(removeBtn, "click", function(event) {
remove_marker(marker);
});
if (typeof saveBtn !== 'undefined') {
//add click listner to save marker button
google.maps.event.addDomListener(saveBtn, "click", function(event) {
var mReplace = contentString.find('span.info-content');
var mName = contentString.find('input.save-name')[0].value;
var mDesc = contentString.find('textarea.save-desc')[0].value;
var mType = contentString.find('select.save-type')[0].value;
if (mName == '' || mDesc == '') {
alert("Please enter the correct information to disposition a new pin!");
} else {
save_marker(marker, mName, mDesc, mType, mReplace);
}
});
}
infoWindows.push(infowindow)
google.maps.event.addListener(marker, 'click', function() {
for (var a in infoWindows) {
infoWindows[a].close()
}
infowindow.open(map, marker);
});
if (InfoOpenDefault) {
for (var a in infoWindows) {
infoWindows[a].close()
}
infowindow.open(map, marker);
}
}
function remove_marker(Marker) {
if (Marker.getDraggable()) {
Marker.setMap(null);
} else {
var mLatLang = Marker.getPosition().toUrlValue();
var myData = {
del: 'true',
latlang: mLatLang
};
$.ajax({
type: "POST",
url: "map_process.php",
data: myData,
success: function(data) {
Marker.setMap(null);
alert(data);
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError);
}
});
}
}
function save_marker(Marker, mName, mAddress, mType, replaceWin) {
var mLatLang = Marker.getPosition().toUrlValue();
var myData = {
pin_firstname: mName,
pincore_fulladdress: mAddress,
latlang: mLatLang,
pin_status: mType
};
console.log(replaceWin);
$.ajax({
type: "POST",
url: "map_process.php",
data: myData,
success: function(data) {
replaceWin.html(data);
Marker.setDraggable(false);
Marker.setIcon('icons/pin_blue.png');
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError);
}
});
}
$(document).ready(function() {
map_initialize();
});
var clusterer_styles = [
[{
url: imageUrl,
height: 35,
width: 35,
anchor: [16, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: imageUrl,
height: 45,
width: 45,
anchor: [24, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: imageUrl,
height: 55,
width: 55,
anchor: [32, 0],
textColor: '#ffffff',
textSize: 12
}],
[{
url: imageUrl,
height: 27,
width: 30,
anchor: [3, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: imageUrl,
height: 36,
width: 40,
anchor: [6, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: imageUrl,
width: 50,
height: 45,
anchor: [8, 0],
textSize: 12
}],
[{
url: imageUrl,
height: 26,
width: 30,
anchor: [4, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: imageUrl,
height: 35,
width: 40,
anchor: [8, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: imageUrl,
width: 50,
height: 44,
anchor: [12, 0],
textSize: 12
}]
];
var roadmap_styles = [{
stylers: [{
saturation: -100
}]
}, {
featureType: "water",
elementType: "geometry.fill",
stylers: [{
color: "#0099dd"
}]
}, {
elementType: "labels",
stylers: [{
visibility: "off"
}]
}, {
featureType: "poi.park",
elementType: "geometry.fill",
stylers: [{
color: "#aadd55"
}]
}, {
featureType: "road.highway",
elementType: "labels",
stylers: [{
visibility: "on"
}]
}, {
featureType: "road.arterial",
elementType: "labels.text",
stylers: [{
visibility: "on"
}]
}, {
featureType: "road.local",
elementType: "labels.text",
stylers: [{
visibility: "on"
}]
}, {}]
#map{
width: 100%;
height: 100%;
background-color: #aaa;
}
html,
body
{
height: 100%;
}
.button
{
width: 10rem;
height: 3rem;
background: #b5cdde;
color: #fff;
text-align: center;
position: absolute;
bottom: 1rem;
right: 3vw;
z-index: 50;
line-height: 3rem;
font-size: 20px;
font-family: sans-serif;
text-transform: uppercase;
box-shadow: 1px 1px 2px #aac;
cursor: pointer;
border-radius: 3px;
border: 2px solid darken(#b5cdde,10%);
}
.button:hover
{
background: darken(#b5cdde,10%)
}
.button:nth-child(2)
{
right: 13vw;
}
.marker-edit
{
width: 10vw;
}
<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>
相关文章:
- 不显示带有本地json文件数据的谷歌地图脚本
- 当没有互联网连接时,谷歌地图Java脚本API处理
- java脚本中的谷歌地图在第二次点击时不起作用
- 谷歌应用程序脚本html服务和加载谷歌地图javascript api V3
- 谷歌地图API v3-API脚本压缩/混淆
- 如何将谷歌地图脚本添加到wordpress帖子中
- 如何居中谷歌地图的脚本地图
- 如何测试一个脚本,用茉莉花加载谷歌地图
- 使用纬度和经度代码脚本生成谷歌地图
- 谷歌地图 API 脚本标记
- 谷歌地图生成了Java脚本的任何动态循环
- 从谷歌地图中运行脚本
- 仅在Rails应用程序中的某些页面上加载谷歌地图脚本
- 如何在谷歌地图脚本中插入一个简单的标记
- 在谷歌地图脚本标签中放置变量
- 添加集群到我的谷歌地图脚本
- 谷歌地图脚本-改变静态信息与变量从数据库循环
- 如何给经度和纬度值谷歌地图脚本从一个php变量
- 谷歌地图脚本破坏Safari浏览器TypeError: Result of expression 'docume
- Internet Explorer的谷歌地图脚本错误