Question

我目前正在尝试更改屏幕上显示的地图，具体取决于点击的锚标记。 lat和long存储在锚标记的HTML属性中，称为＆＃39; data-latLng＆＃39;并传递给我的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);
    }
});

Answer 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/

Answer 2

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

你试图做的是

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

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

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

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

数据-LAT =＆＃34; 53.488188＆＃34;

数据和经度=＆＃34; -2.373019＆＃34;

使用jQuery点击按钮加载Google Map

2 个答案: