0

我对谷歌地图一无所知 >_< ，我被要求更新此页面的来源

我需要替换当前来源（失去了访问此 Google 电子表格 API 帐户的权限）。

正如我所解释的，我没有接受过谷歌地图的培训。但是，我认为要替换当前源，创建一个 mysql/php 数组或其他东西会很容易。但是，我不知道如何为谷歌地图做这件事。

这是谷歌地图的代码：

<? $this->load->view("inc/header");
?>
  <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAALG0LY9VczfCgBGR3gYl-OhSYZ3oXbzqsmNbiZCTxCau3LOQmUxTyi2riEMwN4Qit7X7U2xmd_NND1w" 

  type="text/javascript"></script>

  <script type="text/javascript">

//<![CDATA[
var cm_map;
var cm_mapMarkers = [];
var cm_mapHTMLS = [];

// Create a base icon for all of our markers that specifies the
// shadow, icon dimensions, etc.
var cm_baseIcon = new GIcon();
cm_baseIcon.shadow = "http://www.google.com/mapfiles/shdow50.png";
cm_baseIcon.iconSize = new GSize(20, 34);
cm_baseIcon.shadowSize = new GSize(37, 34);
cm_baseIcon.iconAnchor = new GPoint(9, 34);
cm_baseIcon.infoWindowAnchor = new GPoint(9, 2);
cm_baseIcon.infoShadowAnchor = new GPoint(18, 25);

// Change these parameters to customize map
var param_wsId = "od6";
var param_ssKey = "t63uNv1JYAjjbdSo2NVr0ew";
var param_useSidebar = true;
var param_titleColumn = "address";
var param_descriptionColumn = "link";
var param_latColumn = "latitude";
var param_lngColumn = "longitude";
var param_rankColumn = "";
var param_iconType = "red";
var param_iconOverType = "green";

/**
 * Loads map and calls function to load in worksheet data.
 */
function cm_load() {  
  if (GBrowserIsCompatible()) {
    // create the map
    cm_map = new GMap2(document.getElementById("cm_map"));
    cm_map.addControl(new GLargeMapControl());
    cm_map.addControl(new GMapTypeControl());
    cm_map.setCenter(new GLatLng( 43.907787,-79.359741), 2);
    cm_getJSON();
  } else {
    alert("Sorry, the Google Maps API is not compatible with this browser");
  } 
}

/**
 * Function called when marker on the map is clicked.
 * Opens an info window (bubble) above the marker.
 * @param {Number} markerNum Number of marker in global array
 */
function cm_markerClicked(markerNum) {
  cm_mapMarkers[markerNum].openInfoWindowHtml(cm_mapHTMLS[markerNum]);
}

/**
 * Function that sorts 2 worksheet rows from JSON feed
 * based on their rank column. Only called if column is defined.
 * @param {rowA} Object Represents row in JSON feed
 * @param {rowB} Object Represents row in JSON feed
 * @return {Number} Difference between row values
 */
function cm_sortRows(rowA, rowB) {
  var rowAValue = parseFloat(rowA["gsx$" + param_rankColumn].$t);
  var rowBValue = parseFloat(rowB["gsx$" + param_rankColumn].$t);

  return rowAValue - rowBValue;
}

/** 
 * Called when JSON is loaded. Creates sidebar if param_sideBar is true.
 * Sorts rows if param_rankColumn is valid column. Iterates through worksheet rows, 
 * creating marker and sidebar entries for each row.
 * @param {JSON} json Worksheet feed
 */       
function cm_loadMapJSON(json) {
  var usingRank = false;

  if(param_useSidebar == true) {
    var sidebarTD = document.createElement("td");
    sidebarTD.setAttribute("width","150");
    sidebarTD.setAttribute("valign","top");
    var sidebarDIV = document.createElement("div");
    sidebarDIV.id = "cm_sidebarDIV";
    sidebarDIV.style.overflow = "auto";
    sidebarDIV.style.height = "860px";
    sidebarDIV.style.fontSize = "11px";
    sidebarDIV.style.color = "#000000";
    sidebarTD.appendChild(sidebarDIV);
    document.getElementById("cm_mapTR").appendChild(sidebarTD);
  }

  var bounds = new GLatLngBounds();   

  if(json.feed.entry[0]["gsx$" + param_rankColumn]) {
    usingRank = true;
    json.feed.entry.sort(cm_sortRows);
  }
  for (var i = 0; i < <?=count($address)+1?>; i++) {
    var entry = json.feed.entry[i];

    if(entry["gsx$" + param_latColumn]) {
      var lat = parseFloat(entry["gsx$" + param_latColumn].$t);
      var lng = parseFloat(entry["gsx$" + param_lngColumn].$t);
      var point = new GLatLng(lat,lng);
      var html = "<div style='font-size:12px'>";
      html += "<strong>" + entry["gsx$"+param_titleColumn].$t 
              + "</strong>";
      var label = entry["gsx$"+param_titleColumn].$t;
      var rank = 0;
      if(usingRank && entry["gsx$" + param_rankColumn]) {
        rank = parseInt(entry["gsx$"+param_rankColumn].$t);
      }
        var trimmed = label.replace(/^\s+|\s+$/g, '') ;
        var link_label = label.replace(/ /gi,'-');
        link_label = link_label.toLowerCase();
        link_label = link_label.replace(/^\s+|\s+$/g, '') ;

if(trimmed == "1286 West Adams Blvd" )
{
     if(entry["gsx$" + param_descriptionColumn]) {
    html += "<br/><a href=\"<?=base_url()?>Housing/propertyDetail/1286-west-adams-blvd.html\">Click here for housing option</a>" ;
    }

}
else if(trimmed == "1239 West 30th Street")
{
    if(entry["gsx$" + param_descriptionColumn]) {
    html += "<br/><a href=\"<?=base_url()?>Housing/propertyDetail/1352-west-29th-street.html\">Click here for housing option</a>" ;
    }
}

else if(trimmed == "2150 Oak Street")
{
    if(entry["gsx$" + param_descriptionColumn]) {
    html += "<br/><a href=\"<?=base_url()?>Housing/propertyDetail/2126-50-south-oak-867-889-west-23rd-street.html\">Click here for housing option</a>" ;
    }
}
else if(trimmed == "1146 West 36th Place")
{
    if(entry["gsx$" + param_descriptionColumn]) {
    html += "<br/><a href=\"<?=base_url()?>Housing/propertyDetail/1140--1168-west-36th-place.html\">Click here for housing option</a>" ;
    }
}else if(trimmed == "1199 West 37th Drive")
{
    if(entry["gsx$" + param_descriptionColumn]) {
    html += "<br/><a href=\"<?=base_url()?>Housing/propertyDetail/1189--1199-west-37th-drive.html\">Click here for housing option</a>" ;
    }
}
else if(trimmed == "2611 South Portland Street")
{
    if(entry["gsx$" + param_descriptionColumn]) {
    html += "<br/><a href=\"<?=base_url()?>Housing/propertyDetail/2611-south-portland.html\">Click here for housing option</a>" ;
    }
}

else
{
    if(entry["gsx$" + param_descriptionColumn]) {

        html += "<br/><a href=\"<?=base_url()?>Housing/propertyDetail/"+link_label+".html\">Click here for housing option</a>" ;
           }

}



      html += "</div>";



      // create the marker

      var marker = cm_createMarker(point,label,html,rank);
      //label = 'hello';
      cm_map.addOverlay(marker);

      cm_mapMarkers.push(marker);

      cm_mapHTMLS.push(html);

      bounds.extend(point);



      if(param_useSidebar == true) {

        var markerA = document.createElement("a");

        markerA.setAttribute("href","javascript:cm_markerClicked('" + i +"')");

        markerA.style.color = "#000000";

        var sidebarText= "";

        if(usingRank) {

          sidebarText += rank + ") ";

        } 

        sidebarText += label;

        markerA.appendChild(document.createTextNode(sidebarText));

        // condition to remove an address from the list....
        /*if(trimmed != '1155 24th Street')
        {*/
            sidebarDIV.appendChild(markerA);

            sidebarDIV.appendChild(document.createElement("br"));

            sidebarDIV.appendChild(document.createElement("br"));
        //}



      } 

    }

  }



  cm_map.setZoom(cm_map.getBoundsZoomLevel(bounds));

  cm_map.setCenter(bounds.getCenter());

}



/**

 * Creates marker with ranked Icon or blank icon,

 * depending if rank is defined. Assigns onclick function.

 * @param {GLatLng} point Point to create marker at

 * @param {String} title Tooltip title to display for marker

 * @param {String} html HTML to display in InfoWindow

 * @param {Number} rank Number rank of marker, used in creating icon

 * @return {GMarker} Marker created

 */

function cm_createMarker(point, title, html, rank) {

  var markerOpts = {};

  var nIcon = new GIcon(cm_baseIcon);



  if(rank > 0 && rank < 100) {

    nIcon.imageOut = "http://gmaps-samples.googlecode.com/svn/trunk/" +

        "markers/" + param_iconType + "/marker" + rank + ".png";

    nIcon.imageOver = "http://gmaps-samples.googlecode.com/svn/trunk/" +

        "markers/" + param_iconOverType + "/marker" + rank + ".png";

    nIcon.image = nIcon.imageOut; 

  } else { 

    nIcon.imageOut = "http://gmaps-samples.googlecode.com/svn/trunk/" +

        "markers/" + param_iconType + "/blank.png";

    nIcon.imageOver = "http://gmaps-samples.googlecode.com/svn/trunk/" +

        "markers/" + param_iconOverType + "/blank.png";

    nIcon.image = nIcon.imageOut;

  }



  markerOpts.icon = nIcon;

  markerOpts.title = title;      

  var marker = new GMarker(point, markerOpts);



  GEvent.addListener(marker, "click", function() {

    marker.openInfoWindowHtml(html);

  });

  GEvent.addListener(marker, "mouseover", function() {

    marker.setImage(marker.getIcon().imageOver);

  });

  GEvent.addListener(marker, "mouseout", function() {

    marker.setImage(marker.getIcon().imageOut);

  });

  GEvent.addListener(marker, "infowindowopen", function() {

    marker.setImage(marker.getIcon().imageOver);

  });

  GEvent.addListener(marker, "infowindowclose", function() {

    marker.setImage(marker.getIcon().imageOut);

  });

  return marker;

}



/**

 * Creates a script tag in the page that loads in the 

 * JSON feed for the specified key/ID. 

 * Once loaded, it calls cm_loadMapJSON.

 */

function cm_getJSON() {



  // Retrieve the JSON feed.

  var script = document.createElement('script');

  script.setAttribute('src', 'http://spreadsheets.google.com/feeds/list'

                         + '/' + param_ssKey + '/' + param_wsId + '/public/values' +

                        '?alt=json-in-script&callback=cm_loadMapJSON');

  script.setAttribute('id', 'jsonScript');

  script.setAttribute('type', 'text/javascript');

  document.documentElement.firstChild.appendChild(script);
}



setTimeout('cm_load()', 500); 



//]]>



</script>
<body onLoad="FP_preloadImgs(/*url*/'button18.jpg', /*url*/'button19.jpg'); if (document.getElementById('zoom_searchbox')) {document.getElementById('zoom_searchbox').focus();}" bgcolor=#969696>
<div id="junaid"></div>
<div class="body_main">

<div class="banner_contianer">
                <div class="banner_bg"><img src="<?=base_url()?>banners/properties.png" alt="" /></div>
                <div class="banner_btm_flear"></div></div>


                <div class="body_left_cont">
                    <div class="welcome_message">
                        <h1><?=$page_data['heading']?></h1>
                  </div>
                        <div class="tabs_main_cont" >
                <div class="tabs_md_show"><img src="<?=base_url()?>images/search-top-bg.png" alt="" /></div>
                    <div class="tabs_data_cont">
                            <div class="tabs_repeat_inner">
                                <div class="show_detail_contianer">
                                    <div class="show_In_cont">
                                    <div class="show_In_properties">
                                        <table bgcolor="#FFFFFF" id="cm_mapTABLE"> 

      <tbody> <tr id="cm_mapTR">



          <td> <div id="cm_map" style="width:530px; height:860px"></div> </td>

      </tr> </tbody>

    </table>
                                       </div> 
                                    </div>
                                </div>
                            </div>
                           <div class="tabs_md_show"><img src="<?=base_url()?>images/search-btm-bg.png" alt="" /></div>           
              </div>

                    </div>

                        </div>

                </body>

                        <?PHP
//$this->load->view("inc/right_panel");
?>

                            <div class="opportunities">We Do Business In Accordance With The Federal Fair Housing Law Equal Housing Opportunity</div>
                </div>

        <?PHP
$this->load->view("inc/footer");
?>

如果我有一个 mysql/php 数组，如何替换源？：

<?php
include('database.php');
while($data = mysql_fetch_array($DATABASE))
{
   $map_source['address'] = data['address'];
   $map_source['lat'] = data['long'];
   $map_source['long'] = data['lat'];
}
mysql_close($con);
?>

如何回显数组以替换源？




编辑：2012 年 4 月 19 日下午 4 点 30 分** 在完成@mano-marks 提供的教程后，我几乎可以把所有东西都搞定。但是，此测试页) 没有显示任何内容。你能帮我找出问题所在吗？

PHP/XML：

<?php
require("database.php");

function parseToXML($htmlStr) 
{ 
$xmlStr=str_replace('<','&lt;',$htmlStr); 
$xmlStr=str_replace('>','&gt;',$xmlStr); 
$xmlStr=str_replace('"','&quot;',$xmlStr); 
$xmlStr=str_replace("'",'&#39;',$xmlStr); 
$xmlStr=str_replace("&",'&amp;',$xmlStr); 
return $xmlStr; 
} 

// Opens a connection to a MySQL server
$connection=mysql_connect ($localhost, $username, $password);
if (!$connection) {
  die('Not connected : ' . mysql_error());
}

// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Select all the rows in the tbl_address table
$query = "SELECT * FROM tbl_address WHERE 1";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Start XML file, echo parent node
echo '<markers>';

// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  // ADD TO XML DOCUMENT NODE
  echo '<marker ';
  echo 'name="' . parseToXML($row['g_address']) . '" ';
  echo 'address="' . parseToXML($row['g_address']) . '" ';
  echo 'lat="' . $row['g_latitude'] . '" ';
  echo 'lng="' . $row['g_longitude'] . '" ';
  echo 'type="USC Student Housing" ';
  echo '/>';
}

// End XML file
echo '</markers>';

?>

HTML地图：

<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>PHP/MySQL & Google Maps Example</title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    //<![CDATA[
    var customIcons = {
      restaurant: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      },
      bar: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.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(47.6145, -122.3418),
        zoom: 13,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;
      // Change this depending on the name of your PHP file
      downloadUrl("http://firstchoicehousing.com/_api/google/maps/phpsqlajax_genxml2.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 address = markers[[]i].getAttribute("address");
          var type = markers[[]i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[[]i].getAttribute("lat")),
              parseFloat(markers[[]i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[[]type] || {};
          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>
  <body onload="load()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>**
4

1 回答 1

2

所以你还有另一个你不知道的问题，那就是你使用的是 Google Maps API 的第 2 版，它已被弃用，明年可能会被关闭。版本 3 是当前版本。Google Maps API 开发者网站上有几篇文章使用 PHP/MySQL 开始使用 Google Maps API： https ://developers.google.com/maps/articles/phpsqlajax_v3 https://developers.google.com/地图/文章/phpsqlsearch_v3

于 2012-04-19T21:22:24.637 回答