使用带有 jquery 的谷歌地图地理定位 api（wifi 查找）

Posted 2023-02-23

【中文标题】使用带有 jquery 的谷歌地图地理定位 api（wifi 查找）

【英文标题】：Using google maps geolocation api (wifi lookup) with jquery

【发布时间】：2012-11-24 00:06:45

【问题描述】：

我想我会尝试一下谷歌的新地理定位 api，它可以根据 wifi 信号为您提供您的位置。

我使用 jquery 编写了这个简短的 JS 代码

function testmoj() 
console.log("testmojjs");

var wifiP = [
  
  "macAddress": "00:26:f2:f7:a7:6b",
  "signalToNoiseRatio": -57
  ,
  
  "macAddress": "58:98:35:57:b8:db",
  "signalToNoiseRatio": -68
  ,
  
  "macAddress": "58:98:35:3c:3b:c9",
  "signalToNoiseRatio": -67
  ,
  
  "macAddress": "00:26:f2:f7:a7:6d",
  "signalToNoiseRatio": -80
  ,
  
  "macAddress": "70:56:81:ca:63:6f",
  "signalToNoiseRatio": -83
  ,
  
  "macAddress": "00:22:3f:0f:84:11",
  "signalToNoiseRatio": -85
  ,
  
  "macAddress": "58:98:35:3a:9f:01",
  "signalToNoiseRatio": -83
  ,
  
  "macAddress": "58:98:35:55:6b:4f",
  "signalToNoiseRatio": -94
  ,
  
  "macAddress": "00:24:17:d5:a7:83",
  "signalToNoiseRatio": -84
  ,
  
  "macAddress": "58:98:35:57:c5:fb",
  "signalToNoiseRatio": -91
  
 ];


$.ajax(
    type: 'post',
    dataType: 'json',
    contentType: 'application/json',
    url: 'https://www.googleapis.com/geolocation/v1/geolocate?key=MyKeyIsNormallyHere:-)',
    data:  "wifiAccessPoints": wifiP ,
    success: function (response) 
        console.log("wooooooooooooooooooooooooooooooooooooooooooo");
        console.log(response);
    ,
    error: function () 
        console.log("faaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaail");
    
);

但我得到的总是（错误函数运行）：

"error": 
"errors": [

"domain": "global",
"reason": "parseError",
"message": "Parse Error"

], 
"code": 400,
"message": "Parse Error"

我完全看不出我在这里做错了什么，有什么想法吗？

【问题讨论】：

你确定对象 "wifiAccessPoints": wifiP 被jQuery成功转换为JSON？如果没有，那么您将需要手动编写 JSON（您的对象文字看起来不错，但会生成一个 javascript 对象数组，而不是 JSON 字符串），或者使用客户端 JSON 编码实用程序，例如。 jquery-json plugin 从对象创建 JSON 字符串。

哦，对了，你可能也被AJAX的跨域限制给坑了。接受的答案here 建议应该从服务器端而不是客户端发出这样的请求。

如果它是跨域的，我应该得到除了解析错误之外的东西。但是当我从运动中回来时，我会尝试所有这些。您应该在您的帖子中创建一个答案，以便在发现我的问题时接受答案。

【参考方案1】：

我仍然不确定为什么 javascript 代码不起作用，但我将它从服务器端移到了 .net 上，然后它就起作用了。对于任何想在这里使用它的人来说，这是一个howto。 这只是快速测试代码，里面还有很多废话！

我也得到了一段时间的 403，因为我忘记在我的谷歌开发者控制台/api 控制台中启用它。只需仔细按照谷歌地图地理定位 api 页面上的说明进行操作

    public ActionResult FindLocationForWifi()
    
        Models.WifiAPInformation apInfo = new Models.WifiAPInformation();

        apInfo.wifiAccessPoints.Add(new Models.WifiAP("00:26:f2:f7:a7:6b", -57));
        apInfo.wifiAccessPoints.Add(new Models.WifiAP("58:98:35:57:b8:db", -68));
        apInfo.wifiAccessPoints.Add(new Models.WifiAP("58:98:35:3c:3b:c9", -67));
        apInfo.wifiAccessPoints.Add(new Models.WifiAP("00:26:f2:f7:a7:6d", -80));
        apInfo.wifiAccessPoints.Add(new Models.WifiAP("70:56:81:ca:63:6f", -83));
        apInfo.wifiAccessPoints.Add(new Models.WifiAP("00:22:3f:0f:84:11", -85));
        apInfo.wifiAccessPoints.Add(new Models.WifiAP("58:98:35:3a:9f:01", -83));
        apInfo.wifiAccessPoints.Add(new Models.WifiAP("58:98:35:55:6b:4f", -94));
        apInfo.wifiAccessPoints.Add(new Models.WifiAP("00:24:17:d5:a7:83", -84));
        apInfo.wifiAccessPoints.Add(new Models.WifiAP("58:98:35:57:c5:fb", -91));

        String url = "https://www.googleapis.com/geolocation/v1/geolocate?key=" + BlogConfiguration.Instance.Frontend.ApiKeys.GoogleMaps.Key;

        var json = new JavaScriptSerializer().Serialize(apInfo);
        var bytes = Encoding.Default.GetBytes(json);

        //return Content(json);

        try
        

            using (var client = new WebClient())
            
                client.Headers.Add("Content-Type", "application/json");
                var response = client.UploadData(url, "POST", bytes);

                return Content(Encoding.Default.GetString(response));
            
        
        catch (WebException wex)
        
            if (wex.Response != null)
            
                System.Diagnostics.Debug.WriteLine("Url: " + Url);
                String Resp = new StreamReader(wex.Response.GetResponseStream()).ReadToEnd();
                System.Diagnostics.Debug.WriteLine(Resp);
            
            else
                throw;
        

        //return Json(apInfo, JsonRequestBehavior.AllowGet);
        return Content(url);
    

你会需要这些课程

namespace Frontend.Models

public class WifiAPInformation

    public List<WifiAP> wifiAccessPoints; //according to google name standard for location api

    public WifiAPInformation()
    
        wifiAccessPoints = new List<WifiAP>();
    


public class WifiAP

    public String macAddress; //starting small letter because of standard in google maps geolocation api
    public int signalStrength;

    public WifiAP(String mac, int signal)
    
        macAddress = mac;
        signalStrength = signal;
    

【参考方案2】：

为了测试，使用以下代码创建文件 test.html（将 GoogleAPIKeyHere 替换为您的 Google API 位置密钥）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function sendSurroundingWifis() 
    console.log("sendSurroundingWifis");
    var wifis = '"wifiAccessPoints":[' +
        '"macAddress":"00:26:f2:f7:a7:6b","signalStrength":-68,' +
        '"macAddress":"58:98:35:57:b8:db","signalStrength": -88,' +
        '"macAddress":"58:98:35:3c:3b:c9","signalStrength": -90]';
    $.ajax(
        type: 'post',
        dataType: 'json',
        contentType: 'application/json',
        url: 'https://www.googleapis.com/geolocation/v1/geolocate?key=GoogleAPIKeyHere',
        data: wifis,
        success: function (response) 
            console.log("Working!");
            console.log(response);
            $('#content').html('<a href="http://www.google.com/maps/place/'+response.location.lat+','+response.location.lng+'">Show on google maps</a>');
        ,
        error: function () 
            console.log("FAIL!");
        
    );

</script>

<button onclick="sendSurroundingWifis()">sendSurroundingWifis</button> <br>
<div id="content">...</div>