侧边栏 Google Maps API v3 使用 PHP/MYSQL 提取数据 [关闭]

Posted 2023-02-24

【中文标题】侧边栏 Google Maps API v3 使用 PHP/MYSQL 提取数据 [关闭]

【英文标题】：Sidebar Google Maps API v3 Pulling Data Using PHP/MYSQL [closed]

【发布时间】：2011-09-26 08:57:56

【问题描述】：

我正在尝试构建一个脚本，该脚本使用以下方法从数据库中提取数据 php/mysql。我想创建一个带有位置的侧边栏 我的数据库。有点像下面链接中的示例

http://www.geocodezip.com/v3_MW_example_map15c.html

我能够提取数据并在我的地图上显示位置 很好......但是侧边栏没有显示我的任何标记我很确定我的代码中创建标记的部分存在问题。虽然我是javascript新手，但可能是错误的。这部分代码可以在第 36 行找到...开始类似于

    function createMarker(latlng, name, html) 

这是我的脚本的链接

http://onlineworkplace.info/googlemaps/testing.php

这是实际的脚本。

    <script type="text/javascript"> 


var customIcons = 
  c: 
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  ,
  u: 
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  
;
    // this variable will collect the html which will eventually be placed in the      select 

  var select_html = ""; 

  // arrays to hold copies of the markers
  // because the function closure trick doesnt work there 

  var gmarkers = []; 

 // global "map" variable

  var map = null;

  // A function to create the marker and set up the event window function      i am   pretty sure something is not right here

  function createMarker(latlng, name, html) 
var ContentString = html;
var markers = new google.maps.Marker(
    position: latlng,
    map: map,
    zIndex: Math.round(latlng.lat()*-100000)<<5
    );

google.maps.event.addListener(marker, 'click', function() 
    infowindow.setContent(ContentString); 
    infowindow.open(map,marker);
    );

    // ======= Add the entry to the select box =====
    select_html += '<option> ' + name + '<\/option>';
    // ==========================================================

// save the info we need to use later
gmarkers.push(markers);
return markers;




  // ======= This function handles selections from the select box ====
  // === If the dummy entry is selected, the info window is closed ==
  function handleSelected(opt) 
    var i = opt.selectedIndex - 1; 
    if (i > -1) 
      google.maps.event.trigger(gmarkers[i],"click");
    
    else 
      infowindow.close();
    
  

  function load() 
  var map = new google.maps.Map(document.getElementById("map"), 
    center: new google.maps.LatLng(29.760, -95.387),
    zoom: 10,
    mapTypeId: 'hybrid'
  );
  var infoWindow = new google.maps.InfoWindow;

  // Change this depending on the name of your PHP file
  downloadUrl("phpsqlajax_genxml2.php", function(data) 
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("skatespots");

   // ==== first part of the select box ===
    select_html = '<select onChange="handleSelected(this)">' +
                    '<option selected> - Select a location - <\/option>';

    for (var i = 0; i < markers.length; i++) 
      var name = markers[i].getAttribute("name");
      var address = markers[i].getAttribute("address");
      var confirmed = markers[i].getAttribute("confirmed");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<b>" + name + "</b>";
      var icon = customIcons[confirmed] || ;
 // i think the varmarker bit is not right not here not sure though

      var marker = new google.maps.Marker(
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      );
      bindInfoWindow(marker, map, infoWindow, html);
    
    // ===== final part of the select box =====
    select_html += '<\/select>';
    document.getElementById("selection").innerHTML = select_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() 



// This Javascript is based on code provided by the

// Community Church Javascript Team

// http://www.bisphamchurch.org.uk/   

// http://econym.org.uk/gmap/

// from the v2 tutorial page at:

// http://econym.org.uk/gmap/basic3.htm 

任何有关问题的帮助或提示将不胜感激

谢谢

【问题讨论】：

嗯，您的示例并没有真正的 sidbar。根据您的描述，它会认为您正在寻找这样的东西：code.google.com/apis/maps/articles/phpsqlsearch.html（如果您愿意，您可以在 select 中获取数据而不是侧边栏 div）

【参考方案1】：

这个答案假设侧边栏是指选择组合框

原来的版本叫

function createMarker(latlng, name, html)

将选项添加到选择框。

您不再调用 createMarker，而是调用

function bindInfoWindow(marker, map, infoWindow, html)

仅添加“点击”侦听器，但不执行任何其他操作（例如将选项添加到 select_html 变量）。

你可以修改你的循环：

for (var i = 0; i < markers.length; i++) 
      var name = markers[i].getAttribute("name");
      var address = markers[i].getAttribute("address");
      var confirmed = markers[i].getAttribute("confirmed");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<b>" + name + "</b>";
      var icon = customIcons[confirmed] || ;
      var marker = new google.maps.Marker(
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      );
      bindInfoWindow(marker, map, infoWindow, html);

      // I have been added so I populate the select combo box. 
      select_html += '<option> ' + name + '<\/option>';

【参考方案2】：

首先，您在 createMarker() 中存在不一致 - 首先是“标记”：

var markers = new google.maps.Marker(
  position: latlng,
  map: map,
  zIndex: Math.round(latlng.lat()*-100000)<<5 // btw do you really need this??
);

然后是“标记”：

google.maps.event.addListener(marker, 'click', function() 
  infowindow.setContent(ContentString); 
  infowindow.open(map,marker);
);

---

然后，在 load() 函数的作用域中重新声明 map 变量：

var map = new google.maps.Map(document.getElementById("map"), 
  center: new google.maps.LatLng(29.760, -95.387),
  zoom: 10,
  mapTypeId: 'hybrid'
); // creates another variable in local scope

// instead use global variable, meaning you don't redeclare it (don't use 'var'):
map = new google.maps.Map(document.getElementById("map"), 
  center: new google.maps.LatLng(29.760, -95.387),
  zoom: 10,
  mapTypeId: 'hybrid'
); // creates another variable in local scope

---

下一步：您再次对信息窗口使用不一致的变量：

var infoWindow = new google.maps.InfoWindow; // btw this one should be global like map

// and elsewhere:
function handleSelected(opt) 
  var i = opt.selectedIndex - 1; 
  if (i > -1) 
    google.maps.event.trigger(gmarkers[i],"click");
  
   else 
    infowindow.close();
  

---

最后你用 AJAX 循环标记并在适当的位置创建标记，而不是使用 createMarker() 函数，所以替换这个：

  // i think the varmarker bit is not right not here not sure though

  var marker = new google.maps.Marker(
    map: map,
    position: point,
    icon: icon.icon,
    shadow: icon.shadow
  );
  bindInfoWindow(marker, map, infoWindow, html);

与：

createMarker(point, name, html, icon);

并根据您的需要伪造 createMarker 定义来设置图标：

function createMarker(latlng, name, html, icon) 
  var ContentString = html;
  var marker = new google.maps.Marker(
    position: latlng,
    map: map,
    zIndex: Math.round(latlng.lat()*-100000)<<5,
    icon: icon.icon,
    shadow: icon.shadow
  );

  google.maps.event.addListener(marker, 'click', function() 
    infowindow.setContent(ContentString); 
    infowindow.open(map,marker);
  );

  // ======= Add the entry to the select box =====
  select_html += '<option> ' + name + '</option>';
  // ==========================================================

  // save the info we need to use later
  gmarkers.push(marker);
  return marker;

还将 select_html 声明为全局变量。