php - 谷歌将 MySQL lat lng 映射到 JavaScript

coder 2023-10-20 原文

我的 SQL 数据库中有固定的纬度和经度(纬度、经度)值。现在我想执行以下操作:当我在搜索框中输入城市名称时，在 onClick 事件中，它通过 POST 将数据发送到 php 文件，并进行 SQL 查询以返回经纬度数据。我想调用 JavaScript 函数来使用 PHP 文件中的 lat、lng 参数加载 map 。我希望所有这一切都发生在一个简单的 onClick 事件上。

这是我的 JavaScript 函数，它应该初始化 map (load() 函数):

function getFile() {
  if (window.XMLHttpRequest) {              
    AJAX=new XMLHttpRequest();              
  } else {                                  
    AJAX=new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (AJAX) {
    var searchField = document.getElementById("searchField");

    AJAX.open("POST", "gmap.php", false);                             
    AJAX.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    AJAX.setRequestHeader("Content-length", searchField.value.length);
    AJAX.setRequestHeader("Connection", "close");
         AJAX.send("foo=" + searchField.value);
     return load(AJAX.responseText);   

  } else {
     return false;
  }                                             
}

这是我的 gmap.php 文件:

<?php
header( 'Content-Type: text/html; charset=UTF-8' );
mb_internal_encoding( 'UTF-8' );
$a = $_POST['searchField'];
$dbhost = "localhost";
$dbuser = "*******";
$dbpass = "*******";
$dbname = "citydb";



    //connect sql
mysql_connect($dbhost, $dbuser, $dbpass);

    //select db
mysql_select_db($dbname) or die(mysql_error());
    //retrieve data
//$city=$_GET['city'];
    //escape user input to help prevent SQL injection
//$city=mysql_real_escape_string($city);
    //query
mysql_query('SET CHARACTER SET utf8');
$result=mysql_query("SELECT citystart, cityend FROM cityids WHERE city='$a' ");
if(!result) {

    die("Database query failed: " . myql_error());
    }

while($row=mysql_fetch_array($result)) {


    $lat=$row['citystart'];
    $lng=$row['cityend'];

这是 onClick 调用:

<input type="submit" class="regular" name="FindEv" value="FindEv" onClick="getFile(); return false;" />

问题在于 JavaScript 函数 load() 在 PHP 数据返回之前被调用。我已经花了一个多星期来解决这个问题，但我找不到解决方案。我试过 eval()，我也试过从 PHP 调用 load() 函数，这也失败了，因为它在 onClick 事件中，它是在一个 div 中，所以 load() 函数不执行，它只显示在 div 中，当我继续检查元素时我使用 Firebug。

我说的是 GLatLng() 的经纬度值。

最佳答案

我实际上对 mysql 做了同样的事情。不过，我使用的谷歌地图 API 有点不同。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Map API Test</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAh6DEO6zsM8Xua6WBNm-dbBRD8yUxCv4Esyhw4vpb86bE3mijaBS3Fcz1Rq_adaGcRea0Mlr9lNqAJw"
            type="text/javascript"></script>

    <script type="text/javascript">
    //<![CDATA[

    var iconBlue = new GIcon(); 
    iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
    iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconBlue.iconSize = new GSize(12, 20);
    iconBlue.shadowSize = new GSize(22, 20);
    iconBlue.iconAnchor = new GPoint(6, 20);
    iconBlue.infoWindowAnchor = new GPoint(5, 1);

    var iconRed = new GIcon(); 
    iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
    iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconRed.iconSize = new GSize(12, 20);
    iconRed.shadowSize = new GSize(22, 20);
    iconRed.iconAnchor = new GPoint(6, 20);
    iconRed.infoWindowAnchor = new GPoint(5, 1);

    var iconYellow = new GIcon(); 
    iconYellow.image = 'http://labs.google.com/ridefinder/images/mm_20_yellow.png';
    iconYellow.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconYellow.iconSize = new GSize(12, 20);
    iconYellow.shadowSize = new GSize(22, 20);
    iconYellow.iconAnchor = new GPoint(6, 20);
    iconYellow.infoWindowAnchor = new GPoint(5, 1);

    var iconGreen = new GIcon(); 
    iconGreen.image = 'http://labs.google.com/ridefinder/images/mm_20_green.png';
    iconGreen.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconGreen.iconSize = new GSize(12, 20);
    iconGreen.shadowSize = new GSize(22, 20);
    iconGreen.iconAnchor = new GPoint(6, 20);
    iconGreen.infoWindowAnchor = new GPoint(5, 1);

    var customIcons = [];
    customIcons["175"] = iconGreen;
    customIcons["200"] = iconGreen;
    customIcons["225"] = iconGreen;
    customIcons["250"] = iconBlue;
    customIcons["275"] = iconBlue;
    customIcons["300"] = iconBlue;
    customIcons["325"] = iconRed;
    customIcons["350"] = iconRed;
    customIcons["375"] = iconRed;
    customIcons["100"] = iconYellow;
    customIcons["125"] = iconYellow;
    customIcons["150"] = iconYellow;

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(39.8163, -98.55762), 4);

        GDownloadUrl("markerData.php", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var mapTime = markers[i].getAttribute("time");
            var mapSize = markers[i].getAttribute("size");
            var mapCity = markers[i].getAttribute("city");
            var mapState = markers[i].getAttribute("state");
            var mapPop = markers[i].getAttribute("pop");
            var type = markers[i].getAttribute("size");
            var mapComments = markers[i].getAttribute("comments");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, mapTime, mapSize, mapCity, mapState, mapPop, mapComments, type);
            map.addOverlay(marker);
          }
        });
      }
    }

    function createMarker(point, mapTime, mapSize, mapCity, mapState, mapPop, mapComments, type) {
      var marker = new GMarker(point, customIcons[type]);
      var html = "Time: " + mapTime + "<br/>" + "Size: " + mapSize + "<br/>" + "Location: " + mapCity + ", " + mapState + "<br/>" + "Population: " + mapPop + "<br/>" + "Comments: " + mapComments;
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
    //]]>
  </script>

  </head>

  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 750px; height: 500px"></div>
    <div style="width: 750px; text-align: center"><img src="http://labs.google.com/ridefinder/images/mm_20_yellow.png" /> Less than 1.75"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
         <img src="http://labs.google.com/ridefinder/images/mm_20_green.png" /> 1.75" - 2.25"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <img src="http://labs.google.com/ridefinder/images/mm_20_blue.png" />2.50" - 3.00"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <img src="http://labs.google.com/ridefinder/images/mm_20_red.png" />3.25" - 3.75"
    </div>
  </body>
</html>

map 信息.php 创建元素(“标记”)； $parnode = $doc->append_child($node);

// Opens a connection to a MySQL server
$connection=mysql_connect ($host, $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 markers table 
$query = "SELECT * FROM mapData WHERE 1";
$result = mysql_query($query);
if (!$result) {
    die('Invalid query: ' . mysql_error()); 
}

header("Content-type: text/xml"); 
// Iterate through the rows, adding XML nodes for each 
while ($row = @mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
    $node = $doc->create_element("marker");
    $newnode = $parnode->append_child($node);
    $newnode->set_attribute("time", $row['Time']);
    $newnode->set_attribute("size", $row['Size']);
    $newnode->set_attribute("city", $row['City']);
    $newnode->set_attribute("state", $row['State']);
    $newnode->set_attribute("pop", $row['Population']);
    $newnode->set_attribute("comments", $row['Comments']);
    $newnode->set_attribute("lat", $row['Latitude']);
    $newnode->set_attribute("lng", $row['Longitude']);
}
$xmlfile = $doc->dump_mem(); echo $xmlfile;

关于php - 谷歌将 MySQL lat lng 映射到 JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4271261/

JavaScript MySQL 34 39 customIcons php ajax google-maps

有关php - 谷歌将 MySQL lat lng 映射到 JavaScript的更多相关文章

ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
ruby-on-rails - 只有当不是 nil 时才执行映射？ - 2
如果names为nil，则以下中断。我怎样才能让这个map只有在它不是nil时才执行？self.topics=names.split(",").mapdo|n|Topic.where(name:n.strip).first_or_create!end 最佳答案其他几个选项:选项1(在其上执行map时检查split的结果):names_list=names.try(:split,",")self.topics=names_list.mapdo|n|Topic.where(name:n.strip).first_or_create!e
ruby-on-rails - 使用 gmaps4rails 动态加载谷歌地图标记 - 2
如何只加载map边界内的标记gmaps4rails？当然，在平移和/或缩放后加载新的。与此直接相关的是，如何获取map的当前边界和缩放级别？最佳答案我是这样做的，我只在用户完成平移或缩放后替换标记，如果您需要不同的行为，请使用不同的事件监听器:在你看来(index.html.erb):{"zoom"=>15,"auto_adjust"=>false,"detect_location"=>true,"center_on_user"=>true}},false,true)%>在View的底部添加:functiongmaps4rail
ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2
我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案那是一个javascript链接。Mechan
ruby-on-rails - 这个 C 和 PHP 程序员如何学习 Ruby 和 Rails？ - 2
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭9年前。我来自C、php和bash背景，很容易学习，因为它们都有相同的C结构，我可以将其与我已经知道的联系起来。然后2年前我学了Python并且学得很好，Python对我来说比Ruby更容易学。然后从去年开始，我一直在尝试学习Ruby，然后是Rails，我承认，直到现在我还是学不会，讽刺的是那些打着简单易学的烙印，但是对于我这样一个老练的程序员来说，我只是无法将它
Ruby:映射和注入(inject)之间的区别 - 2
在此处阅读有关SO的各种解释，它们是这样描述的:map:Themapmethodtakesanenumerableobjectandablock,andrunstheblockforeachelement注入(inject):Injecttakesavalueandablock,anditrunsthatblockonceforeachelementofthelist.希望你明白为什么我觉得它们表面上看起来很相似。我什么时候会选择一个而不是另一个，它们之间有什么明显的区别吗？最佳答案如果您认为inject也别名为reduce，这
javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2
我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？最佳答案如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文
ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2
我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如
ruby - 使用 Selenium WebDriver 启用/禁用 javascript - 2
出于某种原因，我必须为Firefox禁用javascript(手动，我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点？最佳答案是的，这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=
ruby - 从谷歌开发者网站下载后，client_secret.json 为空 - 2
我正在尝试从googleAPI下载client_secret.json。我正在执行https://developers.google.com/gmail/api/quickstart/ruby中列出的步骤.使用此向导在GoogleDevelopersConsole中创建或选择项目并自动启用API。在左侧边栏中，选择同意屏幕。选择电子邮件地址并输入产品名称(如果尚未设置)，然后单击“保存”按钮。在左侧边栏中，选择凭据并点击创建新客户端ID。选择应用程序类型已安装应用程序，已安装应用程序类型为其他，然后单击“创建客户端ID”按钮。点击新客户端ID下的下载JSON按钮。将此文件移动到您的工作

php - 谷歌将 MySQL lat lng 映射到 JavaScript

有关php - 谷歌将 MySQL lat lng 映射到 JavaScript的更多相关文章

随机推荐