0

不動産サイトでGoogleマップを使用して、別の場所でプロジェクトを表示しています

場所は、以下のリンクのように緑色のマーカーで表示されます

マップリンク

var markers = new Array();
var i;


function DrawMap(locations)
{   
  var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 10,
              center: new google.maps.LatLng(-33.92, 151.25),
              mapTypeId: google.maps.MapTypeId.ROADMAP
        });

var flagIcon_front = new google.maps.MarkerImage("images/marker.png");

var flagIcon_shadow = new google.maps.MarkerImage("images/marker_shadow.png")
flagIcon_shadow.size = new google.maps.Size(105, 53);
flagIcon_shadow.anchor = new google.maps.Point(20, 52);         
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; padding: 5px; display:block; ";

var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-261, -268)
,zIndex: null
,boxStyle: { 
background: "url('images/metro-plot-bg-1.png') no-repeat -286px -1361px"
,opacity: 1
,width: "393px"
,height: "233px"
}
,closeBoxMargin: "11px 32px 2px 2px"
,closeBoxURL: "images/close_small.png"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false              
};  
var infowindow = new google.maps.InfoWindow();  
var marker;
for (i = 0; i < locations.length; i++) 
{  
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: flagIcon_front,
shadow: flagIcon_shadow,         
map: map
});       
markers.push(marker);
}
for(i=0;i<locations.length;i++) 
{  
 marker1 = markers[i];
google.maps.event.addListener(marker1, 'click', (function(marker1, i) {
return function() {
          //infowindow.setContent(locations[i][0]);
          //infowindow.open(map, marker);
          ib.setContent(locations[i][0]);
          ib.open(map, marker1);
          }
      })(marker, i));
 //marker.setMap(null);
var ib = new InfoBox(myOptions);
//ib.open(map, marker);
}   
}

var locations = [
                              ['<div class="map_view"></div>', -33.890542, 151.274856, 4],
                              ['<div class="map_view"></div>', -33.923036, 151.259052, 5],
                              ['<div class="map_view"></div>', -34.028249, 151.157507, 3],
                              ['<div class="map_view"></div>', -33.80010128657071, 151.28747820854187, 2],
                              ['<div class="map_view"></div>', -33.950198, 151.259302, 1]
                            ];



                            $('document').ready(function(e) {
                               DrawMap(locations);
                            });

上記のDrawMap（）関数は、緯度と経度をパラメーターとして受け取ります

 var locations = [
                              ['<div class="map_view"></div>', -33.890542, 151.274856, 4],
                              ['<div class="map_view"></div>', -33.923036, 151.259052, 5],
                              ['<div class="map_view"></div>', -34.028249, 151.157507, 3],
                              ['<div class="map_view"></div>', -33.80010128657071, 151.28747820854187, 2],
                              ['<div class="map_view"></div>', -33.950198, 151.259302, 1]
                            ];



                            $('document').ready(function(e) {
                               DrawMap(locations);
                            });

ページが最初に読み込まれるとき、マップは正常に機能しています。すべてのマーカーは正しい方法で表示されますが、ボタンをクリックしてajax呼び出しのresponseTextとして取得したパラメーターとして緯度と経度を指定してマップにデータを入力すると、マップは1か所にグループ化されたマーカーを表示します。

ajax呼び出しのスクリプトは次のとおりです

function getLocations()
{
  for(i=0;i<locations.length;i++) 
  {
    markers[i].setMap(null);
  }
  url = 'map.php';      
  $.post(
  url,
  {
   "act" : "getLocations"   
  },
  function(responseText){                                       
   DrawMap(responseText);
  },
  "html"
);
}

作業コピーは次のリンクにアップロードされます

マップリンク

下部にあるボタンをクリックして、ajaxリクエストからの応答テキストとして緯度と経度を取得します

どのマーカーが新しい場所に再描画されないか教えてください

前もって感謝します

4

1 に答える 1

1

ボタンクリックでは、$。postを呼び出していますがresponseText、DrawMapメソッドにを送信しています。DrawMapはJSONテキストではなくjavascript配列を想定しているため、次のようにそのメソッドを呼び出すことをお勧めします。

function(responseText) {
    DrawMap($.parseJSON(responseText));
}

また、サーバーから渡されるのは、jQueryが解析できるJSONではありません。ウィットに：

jQuery.parseJSON docs:
    ...
    {'test': 1} ('test' is using single quotes instead of double quotes).
    ...

あなたはJSONコードは次のようになります：

[
    ['<div class="map_view"></div>', -33.790542, 151.274856, 4],
    ['<div class="map_view"></div>', -33.983036, 151.259052, 5],
    ['<div class="map_view"></div>', -34.128249, 151.157507, 3],
    ['<div class="map_view"></div>', -33.85010128657071, 151.28747820854187, 2],
    ['<div class="map_view"></div>', -33.900198, 151.259302, 1]     
]

次のように、引用符を変更してみてください。

[
    ["<div class='map_view'></div>", -33.790542, 151.274856, 4],
    ["<div class='map_view'></div>", -33.983036, 151.259052, 5],
    ["<div class='map_view'></div>", -34.128249, 151.157507, 3],
    ["<div class='map_view'></div>", -33.85010128657071, 151.28747820854187, 2],
    ["<div class='map_view'></div>", -33.900198, 151.259302, 1]     
]
于 2012-11-16T13:00:29.943 に答える