使用jQuery点击按钮加载Google Map

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

我遇到的问题是没有显示实际的地图。 变焦条和其他function正在显示正常。 这是实际的地图本身。 我创建了一个jFiddle来显示我的代码。 我是否正确地解决了这个问题？ 谢谢

http://jsfiddle.net/fJdtY/

     html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map-canvas { height: 100% }       Button Button 2 
  

  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 = “53.488188”

数据和经度=“ – 2.373019”