我需要有关 jQuery 和 Google Maps API 的帮助答案

【问题标题】：I need help with jQuery and the Google Maps API我需要有关 jQuery 和 Google Maps API 的帮助
【发布时间】：2011-08-20 10:48:44
【问题描述】：

我正在尝试学习 Google Maps and Places API，所以我想从基础开始：通过 IP 地址在地图上显示用户的位置。

我在another thread 中找到了一个 jQuery 脚本，它可以获取用户的纬度和经度，并且工作正常（var 下方的警报显示纬度和经度），但是当我将变量传递给 Maps 方法时，它没有不行。有人能看出我的函数或调用方式有什么问题吗？

$.getJSON('http://api.wipmania.com/jsonp?callback=?', function (data) {  
var latlng = new google.maps.LatLng(data.latitude,data.longitude);  
function initialize() {  
    var myOptions = {  
      zoom: 8,  
      center: latlng,  
      mapTypeId: google.maps.MapTypeId.ROADMAP  
    };  
    var map = new google.maps.Map(document.getElementById("map_canvas"),  
        myOptions);  
    }  
});

编辑：顺便说一下，这些是我正在使用的脚本：

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
<script language="javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

【问题讨论】：

愚蠢的问题，但是您嵌入此脚本的页面上是否有 ID 为 map_canvas 的元素？
在您回答上述问题之前只是一个旁注，但是您为什么要使用那个旧的 jquery？ Jquery 现在是 1.6。

标签： jquery google-maps-api-3

【解决方案1】：

我想我知道你在那里做了什么。看起来您正在使用 Hello World gmaps 示例开始。

如果您注意到 gmaps 示例在 map 元素的 onload 上调用了 initialize 函数，那么您要做的就是将 getJSON() 调用的内容放入包含原始代码的初始化函数中功能。

这是它的外观：

function initialize() {  

    $.getJSON('http://api.wipmania.com/jsonp?callback=?', function (data) {  
        var latlng = new google.maps.LatLng(data.latitude,data.longitude);  
        var myOptions = {  
            zoom: 8,  
            center: latlng,  
            mapTypeId: google.maps.MapTypeId.ROADMAP  
        };  
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    });

}

【讨论】：

【解决方案2】：

尝试在getJSON 的返回块之外声明您的function initialize()。

像这样：

$(function(){

    $.getJSON('http://api.wipmania.com/jsonp?callback=?', function (data) {  
            var latlng = new google.maps.LatLng(data.latitude,data.longitude);  
            initialize(latlng);
    });
});

function initialize(latlng) {  
    var myOptions = {  
      zoom: 8,  
      center: latlng,  
      mapTypeId: google.maps.MapTypeId.ROADMAP  
    };  
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);  
}

【讨论】：