Question

我在我的房地产网站上使用谷歌地图显示不同位置的项目

位置以绿色标记显示，如下面的链接

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按钮，点击地图显示在一个地方分组的标记。

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"
);
}

工作副本上载于以下链接

Map Link

单击底部的按钮，将纬度和经度作为来自ajax请求的响应文本

请告诉我哪些标记未重新绘制到新位置

提前致谢

Answer 1

在按钮单击中，您调用$ .post，然后将responseText发送到DrawMap方法。 DrawMap期待一个javascript数组，而不是JSON文本，因此您可能希望像这样调用该方法：

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]     
]

无法显示重绘标记

1 个答案: