谷歌地图API 3是作用越野车 [英] Google Maps API 3 is acting buggy
本文介绍了谷歌地图API 3是作用越野车的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图把谷歌地图jQueryUI的选项卡中。地图上显示出来;然而，全地图本身并不填补其画布。此外，试图滚动地图使得它心惊肉跳。没有任何人有什么想法？这里是code我使用的是：
＆LT;％@页标题=LANGUAGE =C＃的MasterPageFile =〜/ MasterPage.masterAutoEventWireup =真codeFILE =TabsExample.aspx。 CS继承=TabsExample％GT;＆LT; ASP：内容ID =内容1ContentPlaceHolderID =头=服务器＆GT;
＆LT;链接HREF =CSS / jQuery的-UI-1.9.2.custom.css的rel =stylesheet属性/＆GT;
＆LT;脚本SRC =JS / jquery.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS / jQuery的-UI-1.9.2.custom.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; META NAME =视CONTENT =初始规模= 1.0，用户可扩展性=无/＆GT;
＆LT;风格类型=文/ CSS＆GT;
HTML {身高：100％}
车身高度{：100％;保证金：0;填充：0}
#map_canvas {身高：100％}
＆LT; /风格＆GT;
＆LT;脚本类型=文/ JavaScript的
src=\"https://maps.googleapis.com/maps/api/js?key=AIzaSyB3RgCHRyhBj2Ou01h_MwJrG2uITC4pv1E&sensor=false\">
＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）
{
VAR的MapOptions = {
中心：新google.maps.LatLng（-34.397，150.644），
变焦：8，
mapTypeId设为：google.maps.MapTypeId.HYBRID
};
VAR地图=新google.maps.Map（的document.getElementById（map_canvas的）的MapOptions）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; / ASP：内容＆GT;
＆LT; ASP：内容ID =内容2ContentPlaceHolderID =HeaderContent=服务器＆GT;
＆LT; / ASP：内容＆GT;
＆LT; ASP：内容ID =Content3ContentPlaceHolderID =TopNavigationContent=服务器＆GT;
＆LT; / ASP：内容＆GT;
＆LT; ASP：内容ID =Content4ContentPlaceHolderID =LeftColumnContent=服务器＆GT;
＆LT; / ASP：内容＆GT;
＆LT; ASP：内容ID =Content5ContentPlaceHolderID =RightColumnContent=服务器＆GT;
＆LT; / ASP：内容＆GT;
＆LT; ASP：内容ID =Content6ContentPlaceHolderID =日程地址搜索Maincontent=服务器＆GT;
＆LT; DIV ID =标签的风格=最小高度：500像素;＆GT;
＆LT; UL＆GT;
＆LT;李＆GT;＆LT; A HREF =＃标签-1＆GT;＆LT;跨度＆GT;的One＆LT; / SPAN＆GT;＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =＃标签-2＆GT;＆LT;跨度＆GT;二＆LT; / SPAN＆GT;＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =＃APSU标签＆GT;＆LT;跨度＆GT;三＆LT; / SPAN＆GT;＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; DIV ID =标签-1＆GT;
标签1的内容
＆LT; / DIV＆GT;
＆LT; DIV ID =标签-2＆GT;
表2的内容
＆LT; / DIV＆GT;
＆LT; DIV ID =APSU标签＆GT;
＆LT; DIV ID =map_canvas的风格=宽度：300像素，高度：300像素;＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
$（＃标签）选项卡（）。
＆LT; / SCRIPT＆GT;
＆LT; / ASP：内容＆GT;
＆LT; ASP：内容ID =Content7ContentPlaceHolderID =FooterContent=服务器＆GT;
＆LT; / ASP：内容＆GT;
解决方案
这是一个已知的问题。解决的办法是，当你揭开标签动态加载地图。这里是一个通用的解决方案，这是非常简单的。当您加载特定的选项卡，选中在地图的存在，如果需要加载。
$（文件）。就绪（函数（）{ 您使用您的显示内容的标签功能my_tab_reveal（）{//或任何功能
//无论你的code揭示标签的内容在这里 如果（！加载）{//这个检查，看看是否在地图尚未加载
加载（）; //这个加载地图
}
} VAR加载= FALSE;
负载=功能（）{
//你的谷歌地图的JavaScript code到这里 //检查瓷砖是否有地图加载
google.maps.event.addListener（地图，tilesloaded功能（）{
加载=真实的;
}）;
}}）;
编辑：
根据 jQuery UI的文档，还有可以使用的时候一个回调函数标签被激活。
的触发后一个选项卡已激活（动画完成后）。的
$（文件）。就绪（函数（）{ $（＃标签）。在（tabsactivate功能（事件，UI）{
$（＃map_canvas的）。每个（函数（）{
如果（！加载）{//这个检查，看看是否在地图尚未加载
加载（）; //这个加载地图
}
}）;
}）; VAR加载= FALSE;
负载=功能（）{
//你的谷歌地图的JavaScript code到这里
VAR的MapOptions = {
中心：新google.maps.LatLng（-34.397，150.644），
变焦：8，
mapTypeId设为：google.maps.MapTypeId.HYBRID
};
VAR地图=新google.maps.Map（的document.getElementById（map_canvas的）的MapOptions）; //检查瓷砖是否有地图加载
google.maps.event.addListener（地图，tilesloaded功能（）{
加载=真实的;
}）;
}}）;I'm trying to put a google map within a jqueryui tab. The map shows up; however, the full map itself does not fill its canvas. Additionally, trying to scroll the map makes it jumpy. Does anyone have any ideas? Here is the code I'm using:
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="TabsExample.aspx.cs" Inherits="TabsExample" %> <asp:Content ID="Content1" ContentPlaceHolderID="Head" Runat="Server"> <link href="css/jquery-ui-1.9.2.custom.css" rel="stylesheet" /> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui-1.9.2.custom.js"></script> <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 type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB3RgCHRyhBj2Ou01h_MwJrG2uITC4pv1E&sensor=false"> </script> <script type="text/javascript"> $(document).ready(function() { var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8, mapTypeId: google.maps.MapTypeId.HYBRID }; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); }); </script> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="HeaderContent" Runat="Server"> </asp:Content> <asp:Content ID="Content3" ContentPlaceHolderID="TopNavigationContent" Runat="Server"> </asp:Content> <asp:Content ID="Content4" ContentPlaceHolderID="LeftColumnContent" Runat="Server"> </asp:Content> <asp:Content ID="Content5" ContentPlaceHolderID="RightColumnContent" Runat="Server"> </asp:Content> <asp:Content ID="Content6" ContentPlaceHolderID="MainContent" Runat="Server"> <div id="tabs" style="min-height: 500px;"> <ul> <li><a href="#tab-1"><span>One</span></a></li> <li><a href="#tab-2"><span>Two</span></a></li> <li><a href="#APSU-tab"><span>Three</span></a></li> </ul> <div id="tab-1"> Tab 1's Content </div> <div id="tab-2"> Tab 2's Content </div> <div id="APSU-tab"> <div id="map_canvas" style="width:300px; height:300px;"></div> </div> </div> <script type="text/javascript"> $("#tabs").tabs(); </script> </asp:Content> <asp:Content ID="Content7" ContentPlaceHolderID="FooterContent" Runat="Server"> </asp:Content>
解决方案This is a known issue. The solution is to load the map dynamically when you reveal the tab. Here is a generic solution that is very straightforward. When you load the specific tab, check for map's existence and load if needed.
$(document).ready(function() { function my_tab_reveal() { // or whatever function you use for showing your tabs content // whatever your code for revealing tab content is here if (!loaded) { // this checks to see if the map is not already loaded load(); // this loads the map } } var loaded = false; load = function() { // your google maps JavaScript code goes here // checks tiles to see if map has loaded google.maps.event.addListener(map, "tilesloaded", function() { loaded = true; }); } });
EDIT:
As per jQuery UI documentation, there's a callback function you can use when the tab is activated.
"Triggered after a tab has been activated (after animation completes)."
$(document).ready(function() { $("#tabs").on( "tabsactivate", function( event, ui ) { $("#map_canvas").each(function() { if (!loaded) { // this checks to see if the map is not already loaded load(); // this loads the map } }); }); var loaded = false; load = function() { // your google maps JavaScript code goes here var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8, mapTypeId: google.maps.MapTypeId.HYBRID }; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); // checks tiles to see if map has loaded google.maps.event.addListener(map, "tilesloaded", function() { loaded = true; }); } });
这篇关于谷歌地图API 3是作用越野车的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
