C# winforms webbrowser-control google-maps-api-3

GoogleMaps Api 和 C#

发布于 2024-11-14 18:11:50 字数 2942 浏览 5 评论 0原文

我的地图有问题。地图大约 5 个月前工作正常。现在，当我使用坐标加载地图时，地图正在加载，但是当我开始浏览地图、缩放等时，我会出现白屏，就像与地图没有连接一样。我需要再次加载地图，但同样的问题再次发生。大约 5 个月前，我正在使用这个脚本，一切都工作正常......浏览、缩放、更改地图类型，一切都没有任何问题。我已经根据谷歌网站创建了 html 代码并将其放入新的资源文件中：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">



  function load(latitude,longitude,zoomik) {
    var myLatlng = new google.maps.LatLng(latitude,longitude);
    var myOptions = {
      zoom: zoomik,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }


    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var marker = new google.maps.Marker({
        position: myLatlng, 
        map: map,
        title:"Here!"});

  }

</script>
</head>
<body onload="load()">
  <div id="map_canvas"></div>
</body>
</html>

我的按钮的代码是：

  private void TestButton_Click(object sender, EventArgs e)
    {
        webBrowser1.Document.InvokeScript("load", new object[] { -34.397, 150.644, 8 });
    }

屏幕：地图加载正确：在此处输入图像描述

使用平移工具或缩放工具后： - 空白屏幕。在此处输入图像描述

我正在使用 Winforms 中的 Visual C# Express 和 WebBrowser 控件。

HTML 代码在 Firefox 中正常工作（使用 Aptana Studio）（缩放和平移工作正常）

此外，来自 google api 示例的代码也无法正常工作：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"        rel="stylesheet" type="text/css" />
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
 function initialize() {
    var myLatlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
     zoom: 8,
     center: myLatlng,
     mapTypeId: google.maps.MapTypeId.ROADMAP
   }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
   }
  </script>
  </head>
  <body onload="initialize()">
  <div id="map_canvas"></div>
  </body>
  </html>

原文

i have problem with my map. Map was working correctly about 5 months ago. Now when I load map with my coords, map is loading, but when i start browsing map, zooming etc. i'm getting white screen like there's no connection with map.. i need to load map again, but again this same problem happens. About 5 months ago i was using this script and everything was working fine.. browsing, zooming, change map type, everything without any problems. I've created html code according to google website and put it in new resource file:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">



  function load(latitude,longitude,zoomik) {
    var myLatlng = new google.maps.LatLng(latitude,longitude);
    var myOptions = {
      zoom: zoomik,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }


    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var marker = new google.maps.Marker({
        position: myLatlng, 
        map: map,
        title:"Here!"});

  }

</script>
</head>
<body onload="load()">
  <div id="map_canvas"></div>
</body>
</html>

Code for my button is:

  private void TestButton_Click(object sender, EventArgs e)
    {
        webBrowser1.Document.InvokeScript("load", new object[] { -34.397, 150.644, 8 });
    }

Screens:
Map loaded correctly:
enter image description here

After use of pan tool or zoom tool: - blank white screen.
enter image description here

I'm using Visual C# Express and WebBrowser control from winforms.

HTML code is working correctly in Firefox (using Aptana Studio) (zoom and pan working ok)

What more this code from google api example is also not working correctly:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"        rel="stylesheet" type="text/css" />
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
 function initialize() {
    var myLatlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
     zoom: 8,
     center: myLatlng,
     mapTypeId: google.maps.MapTypeId.ROADMAP
   }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
   }
  </script>
  </head>
  <body onload="initialize()">
  <div id="map_canvas"></div>
  </body>
  </html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

以为你会在 2024-11-21 18:11:50

我自己已经想到了这一点。

错误是：

<div id="map_canvas"></div>

将其更改为：

<div id="map_canvas" style="width:500px; height:400px"></div>

地图正常工作。

I've figured this myself.

Wrong was:

<div id="map_canvas"></div>

after changing it to:

<div id="map_canvas" style="width:500px; height:400px"></div>

map is working as it should.

回复收藏 0 原文

碍人泪离人颜 2024-11-21 18:11:50

当我在使用 gMaps 时遇到问题时，我做的第一件事就是更改地图键，您尝试过吗？您尝试过哪些浏览器？火狐、Chrome 还是 IE？

回复收藏 0 原文

淤浪 2024-11-21 18:11:50

我在使用 Google 地图 v3 时也遇到了类似的问题。不过，我的问题是，我的目标是当前的 Google Maps v3 API，而他们“弃用”了对 set_map 的调用，并引入了与 setMap 相同的功能。

我在您的代码中没有看到任何应该被破坏的内容。如果此页面上的其他 JavaScript 抛出错误，有时会导致 Google 地图无法加载。例如，如果您引用其他一些引发未捕获异常的 JavaScript，则地图可能无法加载。

我的建议是指定 Google Maps API 的版本，而不是使用当前版本，看看是否可以解决该问题：

<script type="text/javascript" 
   src="http://maps.google.com/maps/api/js?v=3.3&sensor=false">
</script>

编辑：另外，再次查看您的帖子，您可能需要移动用于设置标记和地图缩小的逻辑加载功能。这样，当您单击该按钮时，您就不会重新初始化地图和选项。前几天我在文档中看到，地图现在有一个针对 div 内容的“清晰”选项，并且加载地图两次（主体加载、按钮单击）可能会强制执行清晰的行为。同样，以以前的 API 版本为目标，它可能会起作用。

I had a similar problem with Google Maps v3. Although, my problem was that I was targeting the current Google Maps v3 API and they "deprecated" a called to set_map and introduced the same functionality as setMap.

I don't see anything in your code which should be broken. If you have other JavaScript on this page throwing an error, it can sometimes cause Google Maps to not load. For instance, if you reference some other JavaScript which throws an uncaught exception, the map may not load.

My suggestion is to specify the version of Google Maps API instead of using the current and see if that fixes it:

<script type="text/javascript" 
   src="http://maps.google.com/maps/api/js?v=3.3&sensor=false">
</script>

Edit: also, looking at your post again, you may want to move the logic for setting a marker and map zoom out of the load function. That way, when you click the button, you're not re-initializing the map and options. I saw on the on documentation the other day that the map now has a "clear" options for the div contents, and loading the map twice (body load, button click) may be forcing that clear behavior. Again, target a previous API version and it may work.

回复收藏 0 原文

冬天旳寂寞 2024-11-21 18:11:50

也许您可以在 Flash 中而不是在 WebBrowser 对象中加载谷歌地图？以下链接解释了如何使用 WPF 执行此操作，但它应该很容易适用于 WinForms：http://code.google.com/intl/fr/apis/maps/articles/flashmapinwpf.html

回复收藏 0 原文

~没有更多了~