当前位置：文江博客话题详情

如何在任何 HTML 页面中显示 bing 地图？

发布于 2024-11-29 22:02:27 字数 168 浏览 3 评论 0原文

Bing 有一种他们称之为“AJAX 控件”的东西，可以动态地将生成的地图嵌入到任何网页中。有该控件的在线交互式演示。

我该如何使用这个控件？

原文

分享到QQ

分享到微博

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

发布评论

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

那些过往 2024-12-06 22:02:28

您提到的链接本身底部有一个查看 HTML 按钮，您可以单击它并抓取代码以在任何网页中显示。就像下面（我从你的链接中得到的）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title>Map with valid credentials</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
      <script type="text/javascript">
      var map = null;

      function getMap()
      {
          map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Your Bing Maps Key'});
      }   
      </script>
   </head>
   <body onload="getMap();">
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
   </body>
</html>

The link you mentioned itself has a View HTML button on bottom, you can click it and grab the code to display in any webpage. Like below (which i got from your link):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title>Map with valid credentials</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
      <script type="text/javascript">
      var map = null;

      function getMap()
      {
          map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Your Bing Maps Key'});
      }   
      </script>
   </head>
   <body onload="getMap();">
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
   </body>
</html>

回复收藏 0 原文

离笑几人歌 2024-12-06 22:02:28

使用大量 JavaScript？查看 http://www.bingmapsportal.com/ 网站，那里有充足的文档。

还有许多其他方法可以在站点中嵌入动态地图 - 请查看 GIS.stackexchange.com 的 JavaScript 映射库的比较。如果您有更具体的问题，我们很乐意在 GIS.se 上为您提供帮助。

回复收藏 0 原文

时光与爱终年不遇 2024-12-06 22:02:28

请参阅演示。

在此处输入图像描述

有一个 Javascript 类库，位于
http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol。 ashx?v=7.0

您需要将其包含到您的页面中，如下所示：

  <script type="text/javascript" 
          src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

然后从 javascript 中调用它，如下所示：

var map = new Microsoft.Maps.Map(document.getElementById('SDKmap'), 
                                 {credentials: 'Your Bing Maps Key'});

要获取 bing 地图密钥，请转至此页面。

您的 HTML 页面中需要一个具有该 id 的 div，并且其大小和样式应设置为位置：相对：

<div id="SDKmap" style="position:relative; height:400px; width:400px">

然后您可以向该地图添加信息框和图钉。

我还构建了一个 JavaScript 帮助程序，可以从 div 元素中提取自定义属性，并为您生成地图，并包含图钉和信息框。像这样：

  <div id='map3'
       class='map'
       data-mapdata='center: 42.3 -78.0; zoom:7;pushpin:42.323 -78.80; pushpin:42.93 -77.189; pushpin: 41.13 -78.389'></div>

然后 javascript:

        bingMap.displayMap("map3");

包含帮助器类的 js 模块可在 jsfiddle 链接上找到。

See the demonstration.

enter image description here

There's a Javascript class library available at
http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0

You need to include it into your page like this:

  <script type="text/javascript" 
          src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

And then call it from within javascript like this:

var map = new Microsoft.Maps.Map(document.getElementById('SDKmap'), 
                                 {credentials: 'Your Bing Maps Key'});

To get a bing maps key, go to this page.

You need a div with that id in your HTML page, and it should be sized and styled position:relative:

<div id="SDKmap" style="position:relative; height:400px; width:400px">

You can then add information boxes and pushpins to that map.

I also built a javascript helper that can extract custom attributes form the div element, and generate the map for you, complete with pushpins and infoboxes. like this:

  <div id='map3'
       class='map'
       data-mapdata='center: 42.3 -78.0; zoom:7;pushpin:42.323 -78.80; pushpin:42.93 -77.189; pushpin: 41.13 -78.389'></div>

And then the javascript: