使用jQuery加载Google地图按钮 [英] Load Google Map on button click with jQuery
问题描述
我目前正试图根据点击哪个锚点标签来更改屏幕上显示的地图。 lat和long for存储在名为'data-latLng'的锚标记上的HTML属性中，并传递给我的Javascript，然后用这个latLng向Google API发出请求。
我遇到的问题是没有显示实际地图。缩放栏和其他功能正在显示正常。它只是实际的地图本身。
我创建了一个jFiddle来显示我的代码。
我对此有正确的看法吗？
谢谢
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< style type =text / css>
html {height：100％}
body {height：100％;保证金：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 / javascriptsrc =https://maps.googleapis.com/maps/api/js?key={KEY_HIDDEN}&sensor=false>
< / script>
< / head>
< body>
< a href =＃class =buttondata-latLng =53.488188，-2.373019>按钮< / a>
< a href =＃class =buttondata-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）;
}）;
函数初始化（latLng） {
var mapOptions = {
center：new google.maps.LatLng（latLng），
zoom：8
};
var map = new google.maps。 Map（document.getElementById（map-canvas），mapOptions）;
}
}）;
$ b
函数初始化（latLng）{
latLng = latLng.split （，）//分割
var mapOptions = {
center：new google.maps.LatLng（latLng [0]，latLng [1]），//分配到
zoom： 8
};
var map = new google.maps.Map（document.getElementById（map-canvas），mapOptions）;
}
}）;
JS FIDDLE： - http://jsfiddle.net/fJdtY/2/
I am currently trying to change the map displayed on screen dependent on which anchor tag is clicked. The lat and long for is stored in an HTML attribute on the anchor tag called 'data-latLng' and is passed to my Javascript to then make requests to the Google API with this latLng.
The issue I am having is that the actual map is not being displayed. The zoom bar and other features are being displayed fine. it's jsut the actual map itself. I have created a jFiddle to show my code. Am I going the correct away about this? Thanks
<!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);
}
});
Just Spliting the latLng Worked Perfectly.
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/
这篇关于使用jQuery加载Google地图按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
