javascript 在 JQuery Mobile 中显示 Google 地图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9151741/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Showing a Google Map in JQuery Mobile
提问by JQuery Mobile
I am trying to build a JQuery Mobile application. I want this application to include a Google map in it. I was basing my implementation on the jquery-ui-map plugin. They have sample code available at http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#basic_map.
我正在尝试构建一个 JQuery Mobile 应用程序。我希望此应用程序在其中包含 Google 地图。我的实现基于 jquery-ui-map 插件。他们在http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#basic_map 上提供了示例代码。
Even with that example, I still can't get a map to appear. I feel like I'm using the most basic code. Can somebody please tell me what I'm doing wrong? My code is shown below:
即使有那个例子，我仍然无法显示地图。我觉得我正在使用最基本的代码。有人可以告诉我我做错了什么吗？我的代码如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/resources/scripts/jquery.ui.map.full.min.js" />
</head>
<body>
<div id="result" data-role="page">
<div data-role="header"><h1>My App</h1></div>
<div data-role="content">
<div id="resultMap" style="height:200px; width:200px; background-color:Lime;">
</div>
</div>
</div>
<br /><br />
<script type="text/javascript">
$("#result").live("pageshow", function () {
$("#resultMap").gmap();
});
</script>
</body>
</html>
采纳答案by frequent
Ok. I'm doing it like this:
行。我是这样做的：
var home = new google.maps.LatLng(x, y);
$('#directions_map').live("pageshow", function() {
$('#map_canvas_1').gmap('refresh');
});
$('#directions_map').live("pagecreate", function() {
$('#map_canvas_1').gmap({'center': home, 'zoom':17 });
$('#map_canvas_1').gmap('addMarker', { 'position': home, 'animation' : google.maps.Animation.DROP } );
});
So please try:
- create the gmap on pagecreate
- only refresh on pageshow
- the marker is a bonus ;-)
所以请尝试：
- 在 pagecreate 上创建 gmap
- 只在 pageshow上刷新
- 标记是一个奖励；-)
let me know if this does the trick. It's from a working example of mine, so it should be ok. I think it's important you set up the gmap ahead of pageshow. If you think of JQM as a stage... pageshow would be right before lifting the curtain. Maybe too late for Google Magic. Pagecreate seems better...
让我知道这是否有效。它来自我的一个工作示例，所以应该没问题。我认为在 pageshow 之前设置 gmap 很重要。如果您将 JQM 视为一个舞台...... pageshow 就在拉开帷幕之前。对 Google Magic 来说可能为时已晚。Pagecreate 似乎更好...
回答by erin
I also couldn't get the basic example from the jQuery UI Maps to work on the first try. After fiddling with the example in the "demos" folder of the jquery-ui-map-3.0-rcdirectory, I preened out all of the unnecessary html and javascript to dispaly a very basic map. Unfortunately the website has code snippets, rather than a full, working but minimalistic example.
我也无法从 jQuery UI Maps 中获取基本示例以进行第一次尝试。在摆弄jquery-ui-map-3.0-rc目录的“demos”文件夹中的示例后，我整理了所有不必要的 html 和 javascript 以显示非常基本的地图。不幸的是，该网站有代码片段，而不是完整、有效但极简的示例。
You'll have to check that the references to the links and scripts are correct.
您必须检查对链接和脚本的引用是否正确。
<!doctype html>
<html lang="en">
<head>
<title>Example with Google maps and jQuery - Google maps jQuery plugin</title>
<link type="text/css" rel="stylesheet" href="css/style.css" >
</head>
<body>
<div id="map_canvas" class="map rounded"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="../ui/jquery.ui.map.js"></script>
<script type="text/javascript">
$('#map_canvas').gmap({'center': '57.7973333,12.0502107', 'zoom': 10, 'disableDefaultUI':true, 'callback': function() {
var self = this;
self.addMarker({'position': this.get('map').getCenter() }).click(function() {
self.openInfoWindow({ 'content': 'Hello World!' }, this);
});
}});
</script>
</body>
</html>
回答by frequent
Have you tried this:
你有没有试过这个：
jquery-mobile with google maps
I found it fairly easy to implement.
我发现它很容易实现。
