マーカの更新時にGoogleマップの再センタリングが停止する

私はJavaScriptとgooglemaps apiの両方に全く新しいですが、ここ数日間ここで大きな助けをしてくれてありがとうございました。今、私には新しい問題があります。私がやりたいことは、データベースからマップのセットをマップにロードし、マーカーにフィルターをかけるためにユーザーがフォームに値を入力できるようにすることです（たとえば、最小長フィールドと最大長フィールドの設定など）。マーカの更新時にGoogleマップの再センタリングが停止する

ここに私のコードはだ、私はそれが理解できる願っています：

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
//<![CDATA[ 

var icons = { 
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
}; 

function load() { 
    var map = new google.maps.Map(document.getElementById("map"), { 
    center: new google.maps.LatLng(51.5100, 0.0000), 
    zoom: 10, 
    mapTypeId: 'roadmap' 
    }); 

    var infoWindow = new google.maps.InfoWindow; 

    //min and max ride lengths sent from form 
    var minlength = document.getElementById("minlength").value; 
    var maxlength = document.getElementById("maxlength").value; 

    // Change this depending on the name of your PHP file 
    downloadUrl("phpsqlajax_genxml.php", function(data) { 
    var xml = data.responseXML; 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
    for (var i = 0; i < markers.length; i++) { 

    var length = markers[i].getAttribute("length"); 

    if (minlength < length && length < maxlength) { 
     var date = markers[i].getAttribute("date"); 
     var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")), 
      parseFloat(markers[i].getAttribute("lng"))); 
     var html = "<b>Date: " + date + "</b> <br/>Length: " + length; 
     var icon = icons; 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     icon: icon.icon, 
     shadow: icon.shadow 
     }); 
     bindInfoWindow(marker, map, infoWindow, html); 
    } 
    } 
    }); 
} 

function bindInfoWindow(marker, map, infoWindow, html) { 
    google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 
    }); 
} 

function downloadUrl(url, callback) { 
    var request = window.ActiveXObject ? 
     new ActiveXObject('Microsoft.XMLHTTP') : 
     new XMLHttpRequest; 

    request.onreadystatechange = function() { 
    if (request.readyState == 4) { 
     request.onreadystatechange = doNothing; 
     callback(request, request.status); 
    } 
    }; 

    request.open('GET', url, true); 
    request.send(null); 
} 

function doNothing() {} 

//]]> 

</script> 
</head> 

<link rel="stylesheet" type="text/css" href="style.css" /> 
<body onload="load()"> 
<div id="container"> 
<div id="maincontent"> 
<form name="findride"> 
Min length: <input type="number" id="minlength">(miles)<br> 
Max length: <input type="number" id="maxlength">(miles)<br> 
<input type="button" value="Update" onClick="load()"/> 
<div id="map"></div> 
</div> 
</div>

私が午前問題は、ユーザーがフィールドに記入し、更新（前のマップは、ポイントが表示されないということです私は初期のmaxlengthとminlengthの値をいくつか設定しようとしましたが、どちらも問題ありませんでした。ユーザーがこのデータを入力すると、ポイントが表示されますが、マップの再センタリングが維持されます。同じ位置にとどまり、マーカーを変更することをお勧めします。

これは私の手の届かないところですが、簡単にできれば本当に助かりました。

出典

2012-04-17 NickF

これにあなたのHTMLを変更する：

Min length: <input type="number" id="minlength" value="5">(miles)<br> 
Max length: <input type="number" id="maxlength" value="5">(miles)<br>

私は、これはスクリプトがロード上で実行されるとき、それはいくつかのマーカーを追加する必要があることを意味の両方inputにvalue="5"を追加している - あなたが番号5を変更する必要がありますより適切な値

起動時にマーカーを修正する必要があります。

、デフォルトでマップのdoesntのセンターマーカーを追加 - see this simple example私は負荷上の中心点にマーカーを追加してから3秒後に別のメーカーを追加 - 地図doesntのセンター....

出典

2012-04-17 12:54:52 ManseUK

おかげで、その多くを助けます。私が間違っていたことの一つは、 'var map'を置くことでした。ロード機能の外部ではなく内部で実行されます。これでずっと簡単にできました！ – NickF

@NickFなぜあなたのマップがマーカの追加を中心にしているのかわからない..... – ManseUK

毎回、別々のマーカー追加機能を定義するのではなく、load（）関数を呼び出すたびに、。今、それはもっと良く機能しています - まだいくつかの調整が必要ですが、そこに着く。 – NickF

マーカの更新時にGoogleマップの再センタリングが停止する

答えて

関連する問題