【问题标题】:Google map api 3 ajax call谷歌地图 api 3 ajax 调用
【发布时间】:2012-08-02 04:44:54
【问题描述】:

我正在使用谷歌地图 API 3 和谷歌地理编码器。问题是它没有正确加载地图我通过ajax带来数据并调用函数showAddress(elemId, address) 其中 elementId 是将要呈现地图的 div id。 这里是谷歌地图的代码

var geocoder;
var map;

    // run every mouse over
function init_gmap(elemId) {
    var mapOptions = {
        zoom: 6
    };
    map = new google.maps.Map(document.getElementById(elemId),
        mapOptions)
}

    // find the address
function showAddress(elemId, address) {
        // todo: some caching?
        init_gmap(elemId); // need to call this every time cause we're showing a new map

        if (geocoder) 
        {
            geocoder.geocode( { 'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) 
                {
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map, 
                        position: results[0].geometry.location
                    });

                    var infowindow = new google.maps.InfoWindow({
                    map: map,
                    position: results[0].geometry.location,
                    content: address
                    });

                    google.maps.event.trigger(map, 'resize')


                } 
                else 
                {

                    alert("Geocode was not successful for the following reason: " + status);
                }
            });
        }
}

有什么建议吗?

谢谢。

更新代码:

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

var geocoder;
var map;
var lat;
var lng;
var marker;

    // run every mouse over
function init_gmap(elemId,address) {
    geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': address}, function(results, status){
//        console.log(results[0].geometry.location.YA);
        lat = results[0].geometry.location.Ya;
        lng = results[0].geometry.location.Za;
            var mapOptions = {
                zoom: 15,
                center:  new google.maps.LatLng(lat, lng),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById(elemId),
                mapOptions)
    });

}

    // find the address
function showAddress(elemId, address) {
        // todo: some caching?
        init_gmap(elemId,address); // need to call this every time cause we're showing a new map
        marker = "marker_"+elemId;
        marker = new google.maps.Marker({
            map: map, 
            position:  new google.maps.LatLng(lat, lng)
        });

        var infowindow = new google.maps.InfoWindow({
        map: map,
        position:  new google.maps.LatLng(lat, lng),
        content: address
        });

}
</script>

【问题讨论】:

    标签: ajax codeigniter google-maps jquery google-maps-api-3


    【解决方案1】:

    为了初始化地图,您需要将 center 和 mapTypeId 添加到 mapOptions,(所有这些都是必需的,如 documentation 中所述)。例如:

        var mapOptions = {
            center:  new google.maps.LatLng(40.178873, -96.767578),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoom: 6
    }
    

    【讨论】:

    • 感谢您的帮助,它现在可以正常工作。现在还有一个问题标记没有出现:(
    • 我建议您发布一个新问题,其中包含有关 Maker 问题的干净代码,因为每个问题只能有一个可接受的答案。 :-)
    猜你喜欢
    • 1970-01-01
    • 2012-01-11
    • 2015-01-13
    • 1970-01-01
    • 1970-01-01
    • 2011-12-31
    • 2014-11-21
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多