如何使用 ajax 显示谷歌地图标记答案

【问题标题】：How to display Google Maps Marker using ajax如何使用 ajax 显示谷歌地图标记
【发布时间】：2018-05-25 16:20:04
【问题描述】：

我想使用ajax 显示“标记”，我从谷歌搜索了很多来源，但没有找到任何东西。

================== 我有如下代码

var map;
function initialize(){
    var center = new google.maps.LatLng(<?php echo $Lat;?>, <?php echo $Lon;?>);
        var myOptions = {
            zoom: 11,
            center: center,
            mapTypeControl: false,
            zoomControl: true,
            scaleControl: true,
            streetViewControl: false,
            fullscreenControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map( document.getElementById('canvas'),myOptions);


        $.ajax({    
            url: 's_imp_open.php',
            success: function(data) {
                    marker = new google.maps.Marker({
                    position: new google.maps.LatLng(data.LATITUDEX, data.LONGITITUDEX),
                    map: map
                });
            }
        }); 
    }

和s_imp_open.phpPHP：

include '../../s_config.php';
include '../../s_session.php';

   $SQL = mysqli_query($connect_db, "SELECT * FROM atm_database_mandiri WHERE VENDOR='WIRSBY'");
   $return = mysqli_fetch_array($SQL,MYSQLI_ASSOC);
   echo json_encode($return);

我应该怎么做才能让标记出现在使用ajax 的谷歌地图中？

【问题讨论】：

您是否尝试过调试？尝试在您的 AJAX 成功函数中将 data 记录到 javascript 控制台以查看它是什么并在此处发布结果。查看给定的代码，没有人可以提供帮助。
如果我是你，我会拿出所有的 PHP 代码，并确保你可以让标记首先显示静态坐标。同样访问您的服务器端 URL 并确保输出 JSON 符合您的预期。调试既慢又费时，不幸的是 SO 无法帮助您。
您能否提供来自您的服务器的示例响应？并将其添加到您的帖子中

标签： javascript php ajax google-maps google-maps-api-3

【解决方案1】：

看来您的实现是正确的，唯一缺少的是将返回的数据解析为 json。

这是你的做法：

在您的成功回调函数中，将返回的数据解析为 json。你可以这样做：

success: function(data) {
    var data = JSON.parse(data);
    marker = new google.maps.Marker({
           position: new google.maps.LatLng(data.LATITUDEX, data.LONGITITUDEX),
           map: map
    });
}

查看此JSON.parse()以了解更多信息。

或

通过将 dataType='json' 添加到您的 ajax 请求属性中，如下所示：

$.ajax({    
   url: 's_imp_open.php',
   dataType: 'json',
   success: function(data) {
           // your map code here     
   }
});

根据Jquery AJAX documentation：

dataType（默认：Intelligent Guess（xml、json、script 或 html））类型：字符串您期望从服务器。如果没有指定，jQuery 将尝试根据响应的 MIME 类型（XML MIME 类型将产生 XML，在 1.4 JSON 将产生一个 JavaScript 对象，在 1.4 脚本将执行脚本，其他任何内容都将作为字符串返回）。

【讨论】：