0
私はGoogleマップを持っていますが、左に水平なスライディングパネルを使用してポリゴンを描くポテンシャルを高めていますが、今はMarkerClustererを追加しようとしています。それは両方のために、完璧な作品ASPNETのgoogleマップ用のMarkerClusterer空白のマップを表示しているMVC 3アプリケーション
markerClusterer = new MarkerClusterer(googleMap, markers, {maxZoom: zoom, gridSize: size, styles: styles[style]});
、左と働か上の水平方向のスライドパネルは、ポリゴンを描画するけど、私はその行を追加するとき、私は唯一のコントロールせずにマップとして灰色のボックスを（取得：この行がなければ ズームインまたはズームアウトするので、ズームアウトする必要はありません）。
何が問題なのですか？
これは、ASPNET MVC
@model IEnumerable<corp.MvcApplication.Models.GoogleMarker>
@using System.Threading;
@using System.Globalization;
@{
ViewBag.Title = "Sync";
Thread.CurrentThread.CurrentCulture = new CultureInfo("en-US");
}
<script type='text/javascript' src='../../slide-panel-jquery/easing.js'></script> <!-- HORIZONTAL SLIDING PANEL-->
<script type="text/javascript" src="../../demo/polygon.js"></script> <!-- POLYGON-->
<script type="text/javascript" src="../../MarkerClusterer/markerclusterer.js"></script> <!-- MARKER CLUSTERER-->
<script language="javascript" type="text/javascript">
var styles = [[{
url: '../../MarkerClusterer/images/m1.png',
height: 27,
width: 30,
anchor: [3, 0],
textColor: '#FF00FF'
},
{
url: '../../MarkerClusterer/images/m2.png',
height: 36,
width: 40,
opt_anchor: [6, 0],
opt_textColor: '#FF0000'
},
{
url: '../../MarkerClusterer/images/m3.png',
width: 50,
height: 45,
opt_anchor: [8, 0]
}]];
var selectedPolygon = 0;
var creator = new Array();
var markers = []; // For ClusterMarker
var markerClusterer = null;
function NewPolygon(i) {
$('#items').append('<div id="poly'+i+'">Polygon '+i+' <a href="javascript:void(0)" onclick="RemovePolygon('+i+');return false;">[x]</a></div>');
$('div[id*=poly]').removeClass('selected');
$('#poly'+i).addClass('selected');
$('#poly'+i).click(function() {
selectedPolygon=i;
$('div[id*=poly]').removeClass('selected');
$(this).addClass('selected');
});
}
function RemovePolygon(i) {
creator[i].destroy();
creator[i]=null;
$('#poly'+i).remove();
}
$(document).ready(function() {
var bounds = new google.maps.LatLngBounds();
var options = {
zoom : 14,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var googleMap = new google.maps.Map($("#main-map")[0],options);
var infoWindow = new google.maps.InfoWindow({ content: "Cargando..." });
creator[0] = new PolygonCreator(googleMap);
NewPolygon(0);
$('#newPolygon').click(function(){
var i = creator.length;
selectedPolygon=i;
creator[i]=new PolygonCreator(googleMap);
NewPolygon(i);
});
//reset
$('#reset').click(function(){
creator[selectedPolygon].destroy();
creator[selectedPolygon]=null;
});
//show paths
$('#showData').click(function(){
$('#dataPanel').empty();
if(null==creator[selectedPolygon].showData()){
$('#dataPanel').append('Please first create a polygon');
}else{
$('#dataPanel').append(creator[selectedPolygon].showData());
}
});
$('#polyCenter').click(function(){
creator[selectedPolygon].getPolyCenter();
});
//show color
$('#showColor').click(function(){
$('#dataPanel').empty();
if(null==creator[selectedPolygon].showData()){
$('#dataPanel').append('Please first create a polygon');
}else{
$('#dataPanel').append(creator[selectedPolygon].showColor());
}
});
@foreach (var marker in Model)
{
<text>
//alert("Latitude: @marker.Latitude, Longitude:@marker.Longitude");
var point = new google.maps.LatLng(@marker.Latitude, @marker.Longitude);
bounds.extend(point);
var marker = new google.maps.Marker({
position: point,
map: googleMap,
//icon:'/Content/images/cloud_marker.png',
html: '@marker.InfoWindow'
});
google.maps.event.addListener(marker, "click", function() {
infoWindow.setContent(this.html);
infoWindow.open(googleMap, this);
});
markers.push(marker); // For MarkerClusterer
</text>
}
// For MarkerClusterer
var zoom = 4;
var size = -1; // This value represents how many markers will have the cluster inside (-1 is Default)
var style = -1; // The style of the marker (globe, people, etc) (-1 is Default)
zoom = zoom == -1 ? null : zoom;
size = size == -1 ? null : size;
style = style == "-1" ? null: parseInt(style, 10);
markerClusterer = new MarkerClusterer(googleMap, markers, {maxZoom: zoom, gridSize: size, styles: styles[style]});
// For MarkerClusterer
//googleMap.fitBounds(bounds);
$("a#controlbtn").click(function (e) {
e.preventDefault();
var slidepx = $("div#linkblock").width() + 10;
if (!$("div#maincontent").is(':animated')) {
if (parseInt($("div#maincontent").css('marginLeft'), 10) < slidepx) {
$(this).removeClass('close').html('Hide your stuffs');
margin = "+=" + slidepx;
} else {
$(this).addClass('close').html('Show your stuffs');
margin = "-=" + slidepx;
}
$("div#maincontent").animate({
marginLeft: margin
}, {
duration: 'slow',
easing: 'easeOutQuint'
});
}41
});
});
</script>
<style type="text/css">
<!--
body {
background-color: #EDEDED;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
margin: 0px;
padding: 0px;
}
div#wrap {
position: relative;
width: 800px;
overflow: hidden;
margin: 100px auto 0px auto;
}
a#controlbtn{
color: #333;
text-decoration: none;
display: inline-block;
padding-left: 20px;
}
a#controlbtn.open {
background: transparent url(../../slide-panel-jquery/images/toggle_minus.png) no-repeat left center;
}
a#controlbtn.close {
background: transparent url(../../slide-panel-jquery/images/toggle_plus.png) no-repeat left center;
}
div#linkblock {
float: left;
width: 140px;
margin-left: -150px;
border-right: solid 1px #DDDDDD;
}
div#maincontent {
position: relative;
margin-left: 150px;
}
#yourlist {
list-style: none;
margin: 0px;
padding: 0px;
}
#yourlist li {
padding: 3px 5px 3px 0px;
position: relative;
margin-top: 0;
margin-right: 0;
margin-bottom: 5px;
margin-left: 0;
}
#yourlist li a {
color: #D4432F;
padding: none;
margin: none;
}
h4 {
margin: 0px;
font-size: 16px;
line-height: 26px;
color: #333333;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
clear: none;
}
-->
</style>
<div id="wrap">
<div id="control">
<a id="controlbtn" class="open" href="http://aext.net" alt="Show/View your stuffs">Show
Search</a>
</div>
<div id="maincontent">
<div id="linkblock">
<h4>
All tags</h4>
<ul id="searchItems">
<li><a href="http://aext.net/category/css/" title="CSS & XHTML">Concept1</a></li>
<li><a href="http://aext.net/category/php/" title="Resources">Concept2</a> </li>
<li><a href="http://aext.net/category/resources/" title="Resources">Concept3</a></li>
<li><a href="http://aext.net/category/resources/" title="Resources">Concept4</a></li>
<li><a href="http://aext.net/category/theme-layout/" title="Themes & Layouts">Concept5</a> </li>
</ul>
</div>
<div id="main-map" style="width: 800px; height: 500px;">
</div>
<div id="side">
<input id="newPolygon" value="New" type="button" class="navi"/>
<input id="polyCenter" value="Get center" type="button" class="navi"/>
<input id="reset" value="Reset" type="button" class="navi" />
<div id="dataPanel">
</div>
</div>
</div>
</div>