使用 jQuery 在按钮单击时加载 Google 地图答案

【问题标题】：Load Google Map on button click with jQuery使用 jQuery 在按钮单击时加载 Google 地图
【发布时间】：2014-05-01 08:58:37
【问题描述】：

我目前正在尝试根据单击的锚标记更改屏幕上显示的地图。 lat 和 long 存储在名为“data-latLng”的锚标记上的 HTML 属性中，并传递给我的 Javascript，然后使用此 latLng 向 Google API 发出请求。

我遇到的问题是没有显示实际地图。缩放栏和其他功能显示良好。它只是实际的地图本身。我创建了一个 jFiddle 来显示我的代码。我对此是否正确？谢谢

http://jsfiddle.net/fJdtY/

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }
        #map-canvas { height: 100% }
    </style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={KEY_HIDDEN}&sensor=false">
    </script>       
</head>
<body>
    <a href="#" class="button" data-latLng="53.488188,-2.373019">Button</a>
    <a href="#" class="button" data-latLng="-34.397, 150.644">Button 2</a>
    <div id="map-canvas"></div>
</body>

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery(document).on("click", ".button", function(e) {
        e.preventDefault();
        var latLng = jQuery(this).attr("data-latLng");          
        initialize(latLng);
    });

    function initialize(latLng) {
        var mapOptions = {
            center: new google.maps.LatLng(latLng),
            zoom: 8
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    }
});

【问题讨论】：

你确定api key没问题？
是的。我之前用过成功。
google maps move marker with lat/lng from ajax success returned data的可能重复

标签： jquery google-maps

【解决方案1】：

仅仅分割 latLng 就完美了。

function initialize(latLng) {
    latLng = latLng.split(",") //split
    var mapOptions = {
        center: new google.maps.LatLng(latLng[0],latLng[1]), //assign Seprately
        zoom: 8
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
});

JS FIDDLE:- http://jsfiddle.net/fJdtY/2/

【讨论】：

你打败了我 :) 所以 +1

【解决方案2】：

正如@Nell 所说，新的 google.maps.LatLng 构造函数接受 2 个单独的参数（lat、lng），而不仅仅是单个字符串。

你试图做的是

new google.maps.LatLng('-30, 150')

但初始化 LatLng 的正确方法是分别传递 lat 和 lng。

new google.maps.LatLng(-30, 150)

我永远不会将它作为单个实体存储在数据属性中而是作为

data-lat="53.488188"

data-lng="-2.373019"

【讨论】：