谷歌地图中心视图从其他变量

问题描述 投票:-1回答:1

所以这是我的代码。

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps AJAX + mySQL/PHP Example</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC-dbN2gdvXsx09jfJHmNc8"
            type="text/javascript"></script>
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript">
    //<![CDATA[
$(document).ready(function() {


var customIcons = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';


var map = new google.maps.Map(document.getElementById("map"), {       
        center: new google.maps.LatLng(-6.289796, 106.822370),
        zoom: 11,
        mapTypeId: 'roadmap'
      });

      //^ HOW TO GET CENTER VALUE FROM VAR POINT IN FUNCTION LOAD() ???? ^ //
var markarray=[]
    function load() {

           for (var i = 0; i < markarray.length; i++) {
             markarray[i].setMap(null);
             } 
            markarray = [];
      console.log("ok")
      var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
      downloadUrl("http://localhost/maps6/genxml.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          //var name = markers[i].getAttribute("name");
          var date_taken = markers[i].getAttribute("date_taken");
          //var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
                  //^ HOW TO GET THE POINT VALUE TO CENTER IN VAR MAP ???? ^ //
          var html = "<b>" + name + "</b> <br/>" + date_taken;
          var icon = 'mark.png';
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: 'mark.png',
            animation: google.maps.Animation.BOUNCE,
            shadow: icon.shadow
          });
          markarray.push(marker);
          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() {}

    $("#BtnClicked").live('click',function(){load();});


  setInterval(function() {load();},3000);

});

 //]]>
  </script>

  </head>

  <body>
    <div id="map" style="width: 1280px; height: 720px"></div>
    <a href="#" id="BtnClicked">test</a>
  </body>
</html>

当代码被执行时,结果是:RESULT IMAGE in IMGUR

^绿色的标记是基于MYSQL数据库自动更新位置的,而不需要重新加载整个谷歌地图的页面

所以我的问题是 如何在函数load()中从VAR POINT获取Google MAPS CENTER(在var map中)。

javascript ajax google-maps maps
1个回答
0
投票

多亏了geocodezip原来解决这个问题是只需添加 map.setCenter(marker.getPosition()); 之后

markarray.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
© www.soinside.com 2019 - 2024. All rights reserved.