在Google地图中将多个php变量作为lat / long放置

时间:2014-01-14 09:55:14

标签: javascript php api google-maps google-maps-api-3

这就是我所拥有的... PHP从API网址中拉下10对纬度/长度,我已经设法使其工作正常但我似乎无法在带有多个标记为1-10的标记的地图上绘制它们。

我的PHP代码:

<?php
// Loading Domus API
    $url_search = 'http://url/site/go/api/search';
    $xml_search = @simplexml_load_file($url_search) or die ("no file loaded") ;
//Displaying latitude and longutude
$house = json_encode($house);
          }; ?>

JavaScript位:

var locations = "<?php foreach($xml_search->property as $house) { echo $lat = $house->address->latitude , $long = $house->address->longitude;}; ?>";

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: new google.maps.LatLng(37.0625,-95.677068),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

然后需要在这里显示

<div id="map" style="width: 500px; height: 400px"></div>

但我当然得到一个空白页面。

1 个答案:

答案 0 :(得分:0)

好的,我已经设法解决了。

这是我在头部

中的PHP代码
<?php
// Loading Domus API
$url_search = 'http://url/site/go/api/search';
$xml_search = @simplexml_load_file($url_search) or die ("no file loaded") ;?>

然后我有我的javascript

// Load property ID followed by Lat and Long for each house (total of 10)
var locations = [<?php foreach($xml_search->property as $house) {
        echo '['.$house->id. ',' .$house->address->latitude. ',' .$house->address->longitude.'],';
        } ?>]; 

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 15,
  center: new google.maps.LatLng(0, 0),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var marker, i;
var markers = new Array();

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  markers.push(marker);

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

function AutoCenter() {
  //  Create a new viewpoint bound
  var bounds = new google.maps.LatLngBounds();
  //  Go through each...
  $.each(markers, function (index, marker) {
  bounds.extend(marker.position);
  });
  //  Fit these bounds to the map
  map.fitBounds(bounds);
}
AutoCenter();

工作得很漂亮,现在只需要设置标记标记,我很高兴。