将我的 HTML Google MAP API 版本 2 迁移到版本 3

2024-03-24

我将非常感谢对此的帮助。

我的 html v2 文件和一些临时密钥工作正常。我从一些 XML 中获取位置,创建不同的颜色标记,并从信息窗口中的 XML 属性添加一些 URL(不是太复杂)。现在我需要将其迁移到 v3。我找到了 v2 中函数的一些等效项,但没有找到 GDownloadUrl( 用于加载 XML) 和 GIcon(G_DEFAULT_ICON);有人可以看看我的两个代码并告诉我如何更改以使其在 v3 中也能工作吗?我改变了大部分内容,所以如果有人能看到一些错误,我将不胜感激。提前致谢。

版本2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Google Maps</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=AIzaSyA4UDNP6MZ" type="text/javascript"></script>
  </head>
  <body onunload="GUenter code herenload()">

    <!-- you can use tables or divs for the overall layout -->
    <table border=1>
      <tr>
        <td>
           <div id="map" style="width: 1250px; height: 1250px"></div>
        </td>
      </tr>
    </table>


    <script type="text/javascript">
    //<![CDATA[

    if (GBrowserIsCompatible()) {

      var gmarkers = [];

      // A function to create the marker and set up the event window
      function createMarker(point,name,alarm,markerOptions) {
        var marker = new GMarker(point,markerOptions);
        GEvent.addListener(marker, "click", function() {


        var alarmanchor1='<span class="url"><a href="' + alarm;
        var alarmanchor2='" title="www" target="_blank">Event List</a></span>';
        var alarmanchor=alarmanchor1+alarmanchor2;


        marker.openInfoWindowHtml(alarmanchor);
        });

        return marker;
      }


      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        GEvent.trigger(gmarkers[i], "click");
      }


      // create the map
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng( 41.932797,21.483765), 10);


      // Read the data from alarms33.xml
      GDownloadUrl("alarms33.xml", function(doc) {
        var xmlDoc = GXml.parse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");

        for (var i = 0; i < markers.length; i++) {
          // obtain the attribues of each marker
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new GLatLng(lat,lng);
          var alarm = markers[i].getAttribute("alarm");
          var label = markers[i].getAttribute("label");




        var severity = parseFloat(markers[i].getAttribute("severity"));
        var severityIcon = new GIcon(G_DEFAULT_ICON);
        var color;
        if (severity == 0) color = "66FF33";
        else if (severity == 1) color = "990099";
        else if (severity == 2) color = "00CCFF";
        else if (severity == 3) color = "FFFF00";
        else if (severity == 4) color = "FFCC00";
        else if (severity == 5) color = "FF3300";
        else color = "yellow";

        severityIcon.image = "http://www.googlemapsmarkers.com/v1/" + color;
        severityIcon.iconSize = new GSize(15, 30);

        markerOptions = { icon:severityIcon };




          // create the marker
          var marker = createMarker(point,label,alarm,markerOptions);
          map.addOverlay(marker);
        }

      });
    }

    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }



    //]]>
    </script>
  </body>

</html>

版本 3:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Google Maps</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=3&amp;sensor=false&amp;key=AIzaSyDsa1LyWOQ" type="text/javascript"></script>
  </head>
  <body onunload="initialize()">

    <!-- you can use tables or divs for the overall layout -->
    <table border=1>
      <tr>
        <td>
           <div id="map" style="width: 1250px; height: 1250px"></div>
        </td>
      </tr>
    </table>






    <script type="text/javascript">
    //<![CDATA[


      var gmarkers = [];

      // A function to create the marker and set up the event window
      function createMarker(point,name,alarm,markerOptions) {
        var marker = new google.maps.Marker(point,markerOptions);
        google.maps.event.addListener(marker, "click", function() {


        var alarmanchor1='<span class="url"><a href="' + alarm;
        var alarmanchor2='" title="www.skolaznanja.com" target="_blank">Event List</a></span>';
        var alarmanchor=alarmanchor1+alarmanchor2;



        var infoWindow=new google.maps.InfoWindow();
        infoWindow.setContent(alarmanchor);
        infowindow.open(map,marker);

        });

        return marker;
      }


      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        google.maps.event.trigger(gmarkers[i], "click");
      }


      // create the map

      function initialize() {
      var mapDiv = document.getElementById("map");
      var map;
      var myLatlng = new google.maps.LatLng(41.932797,21.483765);
      var myOptions = {
       zoom:10,
      center:myLatlng,
      mapTypeId:google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(mapDiv, myOptions);

     } 

      //var map = new google.maps.Map(document.getElementById("map"));
      //map.addControl(new GLargeMapControl());
      //map.addControl(new GMapTypeControl());
      //map.setCenter(new google.maps.LatLng( 41.932797,21.483765), 10);


      // Read the data from example.xml
      GDownloadUrl("alarms44.xml", function(doc) {
        var xmlDoc = GXml.parse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");

        for (var i = 0; i < markers.length; i++) {
          // obtain the attribues of each marker
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new google.maps.LatLng(lat,lng);
          var alarm = markers[i].getAttribute("alarm");
          var label = markers[i].getAttribute("label");




        var severity = parseFloat(markers[i].getAttribute("severity"));
        var severityIcon = new GIcon(G_DEFAULT_ICON);
        var color;
        if (severity == 0) color = "66FF33";
        else if (severity == 1) color = "990099";
        else if (severity == 2) color = "00CCFF";
        else if (severity == 3) color = "FFFF00";
        else if (severity == 4) color = "FFCC00";
        else if (severity == 5) color = "FF3300";
        else color = "yellow";

        severityIcon.image = "http://www.googlemapsmarkers.com/v1/" + color;
        severityIcon.iconSize = new GSize(15, 30);

        markerOptions = { icon:severityIcon };




          // create the marker
          var marker = createMarker(point,label,alarm,markerOptions);
          map.setMap(marker);
        }

      });




    //]]>
    </script>
  </body>

</html>

正如您所注意到的,GMap V3 中不再存在 GDownloadUrl()。我会推荐jQuery.get(url) http://api.jquery.com/jQuery.get/

我发布了一个例子如何解析 xml 文件以获取标记位置并在地图上绘制 https://stackoverflow.com/a/9843692/1211981.

UPDATE:正如 @user1191860 下面指出的,有一个适用于 GMap V3 的实用程序xml解析 http://code.google.com/p/gmaps-samples-v3/source/browse/trunk/xmlparsing/?r=28。我不知道。 AFAIK,没有理由不使用它。 你需要添加

<script src="http://gmaps-samples-v3.googlecode.com/svn-history/r28/trunk/xmlparsing/util.js"></script>

到你的html页面。 有趣的是作者还包含了一个 jQueryexample http://gmaps-samples-v3.googlecode.com/svn-history/r28/trunk/xmlparsing/jqueryget.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将我的 HTML Google MAP API 版本 2 迁移到版本 3 的相关文章

  • Android Google 地图:在 2 个位置设置边界并以其中一个位置为中心

    我知道如何在两个位置设置边界 以便两个位置都以最大缩放显示 使用LatLngBounds 我知道如何以某个位置为中心 请问我该如何同时做这两件事 在 2 个位置设置边界AND将地图置于 2 个位置之一的中心 googleMap setCen
  • 第一个 MapActivity 实例总是泄漏吗?

    在研究应用程序中的内存问题时 发现如果应用程序 Activity 是 MapActivity 则它的第一个实例将不会最终确定 导致其他内存泄漏 例如传递给setContentView的视图 之前有人注意到吗 下面的测试代码显示 MainAc
  • 如何检测谷歌地图是否加载成功

    我在我的网站中使用谷歌地图版本 3 我遇到了地图有时无法加载的问题 而是显示为灰色框 并且浏览器日志将充满错误 不幸的是 我现在无法获取日志 因为地图再次工作 根据一些研究 问题是因为我使用的实验版本 有没有办法查明地图是否已成功加载或崩溃
  • Cordova - 已弃用尝试访问非导航器对象上的属性“userAgent”

    我正在尝试让我的 Cordova iPhone 应用程序在 iOS 8 1 中运行 在 7 中工作正常 从 8 开始出现以下错误 Deprecated attempt to access property userAgent on a no
  • Google Fusion Tables With Maps - 将表字段链接到地图信息窗口

    我几乎是使用 Google Fusion Tables maps 的新手 我们有一个包含公司名称和地址的企业名录 我可以获得每个位置的地理编码地图标记 与表 设施名称 列并排显示 如何对设施名称进行编码 以便用户可以单击公司 设施名称并跳转
  • 谷歌地图通过骨干javascript返回div标签但不显示

    我已经开始使用地理定位 我可以获得坐标等 我想在地图中显示它 但是当我将地图返回到 div 时 什么也没有显示 现在我查看了 div 地图正在返回 但只是不可见 这是有问题的 div 请注意 这似乎只是一个小地图的链接 a style di
  • Google Maps API V3:捕捉到另一个多边形的节点

    我正在绘制相邻且共享边界的多边形 看下面的示例图片 如果我要为蒙大拿州绘制一个多边形 我希望能够单击爱达荷州多边形的节点以获得相同的边界部分 以确保边界不会重叠或有孔 但是 节点不允许直接单击它们 如果我使节点不可见 那么准确性会恶化 并且
  • Android - Google 地图触摸和拖动标记

    如何在地图活动上移动标记 而无需长按并按住该标记直到它获得焦点 我只想触摸和拖动 但它需要大约 1 2 秒才能接收焦点并触发拖动事件 这是我的代码 mMap googleMap mMap setMapType GoogleMap MAP T
  • 从 Google 地图导出 geoJSON 数据

    是否有内置支持或任何可导出的库geoJSON数据来自google maps Data层或google maps Data Feature or google maps Data Geometry甚至使用Marker Polyline and
  • 如何在react-google-maps中添加标记?

    在中使用 React JS流星1 5 https www meteor com Question 需要一种添加方式Marker using 反应谷歌地图 https github com tomchentw react google map
  • 未捕获的ReferenceError:google未定义(索引):21初始化(Google Maps API)

    继续在控制台中收到此错误 Uncaught ReferenceError google is not Defined 已经做了一段时间了 但没有运气 非常感谢任何帮助 提前致谢
  • 无法使用 Salesforce Crypto Class for Google Maps API 生成 HMac

    我的公司最近注册了 Google Maps API for Business 要使用该 API 我需要生成 HMac SHA1 签名 并将其添加到我的 HTTP 请求中 不幸的是 不知何故 我无法生成正确的签名 为了进行测试 我使用谷歌提供
  • Google Geolocation API - 使用经度和纬度获取文本框中的地址?

    我注意到很多关于如何使用基于 IP 地址的 Google 地理定位查找您的位置的信息 但我想知道是否以及如何使用此服务来输入位置 经度和纬度 并获取当前地址 或至少是一个城市 州 我想用 C 来完成此操作 但我可以使用任何语言 有什么建议吗
  • Flex 相当于 Google Visualization Geomap(等值线地图)?

    The 谷歌可视化地理地图 http code google com apis visualization documentation gallery geomap html Overview组件是一个等值线地图 http en wikip
  • 修复了 Google 地图混搭中的图例

    我有一个带有 Google 地图混搭的页面 其中的图钉按日期 周一 周二等 进行颜色编码 包含地图的 IFrame 是动态调整大小的 因此当浏览器窗口调整大小时 它也会调整大小 我想在地图窗口的一角放置一个图例 告诉用户每种颜色的含义 Go
  • 使用 Selenium 放置嵌入的谷歌地图标记

    我有一个 asp net 网站 作为向导的一部分 它使用嵌入式谷歌地图通过单击地图放置标记来选择位置 我如何使用 Selenium 实现自动化 我特别尝试过 ClickAt 双击 鼠标按下 鼠标按下 在所有情况下 传递地图 div id 作
  • 从 Google 地图方向获取折线 V3

    在获得指示后 我试图在 Google 地图上获取折线 我想使用v3 epoly http www geocodezip com scripts v3 epoly js沿折线放置标记 I found this https groups goo
  • 用不同的颜色为 Google 热图着色

    我试图开发一个遵循 Google Map API 的热度 https developers google com maps documentation javascript examples layer heatmap https deve
  • 使用 google Directions API 的地图视图绘制方向 - 解码折线

    我正在尝试使用 Google 方向 API 在我的地图视图上显示方向 但我在从 JSON 响应获取数据时遇到困难 我可以获得 级别 和 点 字符串 但无法弄清楚如何将它们解码为地图上的点 任何帮助将非常感激 我有一个类可以为您解码它们 添加
  • 谷歌地图初始化无法使用选项卡

    我正在尝试在选项卡单击事件上初始化 Google 地图 因为目前我得到的地图如下 My Code function render map This function will render a Google Map onto the sel

随机推荐

  • 如何退出 Android 应用程序?

    我刚刚读到 您只需调用以下命令即可退出 Android 应用程序 finish 然而 这种情况并非如此 当我这样做时 我收到以下错误 PackageInstallationReciever Remove data local tmp com
  • 为 SSL 配置 MAMP

    好吧 各位编码员 我正在尝试在我的 mac 上使用 SSL 配置 MAMP 以用于开发目的 我已阅读并尝试了以下说明 http www emersonlackey com article mamp with ssl https http w
  • Groovy 执行“cp *”shell 命令

    我想复制文本文件并且仅复制来自src to dst groovy 000 gt cp src txt dst execute text gt groovy 000 gt 您可以看到命令执行时没有错误 但文件src test txt不会被复制
  • 隐藏 webBrowser 控件中的滚动条

    我正在研究 Windows 窗体的 HTML 显示控件 我使用 webBrowser 控件作为控件的基础 我需要隐藏 webBrowser 滚动条 因为它看起来很糟糕 永远不会被使用 并且使控件看起来像网页 从而破坏了布局 目前 滚动条在控
  • .Net core 3:手动添加框架依赖项

    自从3 0版本发布以来 现在可以在 net core中编写WPF应用程序 这真是太棒了 另一方面 在 net core 上 依赖系统现在依赖于完整的框架 不再有多个 nuget 依赖项 除非您想要在同一个应用程序中混合使用 WPF 和 AS
  • Java,BorderLayout.CENTER,获取JPanel的宽度和高度

    我正在使用 Swing 和 AWT 针对听众 制作一个小程序 我在获取 JPanel 名为 Chess 的类 的大小时遇到 问题 我的布局 public class Main extends JFrame implements MouseL
  • 在 Typo3 中实现 HTML 模板,内容不起作用或者是我的错误

    我尝试在typo3中实现html模板 通过本教程 http wiki typo3 org Templated Tutorial Basics http wiki typo3 org Templating Tutorial Basics 所有
  • 使用 xsi:nil="true" C# 序列化删除 xml 元素

    我有一个 XML 其中包含一些值 有时可能存在空值 如下所示 我根本不希望在 XML 中列出带有 null 的节点 元素已设置IsNullable true在课堂里 任何建议 因为我在谷歌中尝试了很多东西 没有任何帮助
  • 更改 pandas 中的默认选项

    我想知道是否有任何方法可以更改 pandas 的默认显示选项 我想在每次运行 python 时更改显示格式和显示宽度 例如 pandas options display width 150 我看到默认值是硬编码的pandas core co
  • 部署.NET Web应用程序时如何获取预编译的razor文件?

    我的任务是改进服务器上应用程序的 IIS 预加载和初始化 我已经在IIS上实现了应用程序初始化和应用程序预加载 但回收 重新启动应用程序池时仍然有很长的等待时间 我找到了一些有用的链接 我认为这些链接对我有帮助 但我仍然没有获得预编译的 R
  • 通过引用切片为不可变字符串,而不是复制

    如果你使用string split http docs python org library stdtypes html str split对于 Python 字符串 它返回字符串列表 这些已拆分的子字符串是其父字符串部分的副本 是否有可能
  • Spring Boot 中的代理设置

    我的应用程序需要从 Web 获取 XML 文件 如下所示 Bean public HTTPMetadataProvider metadataProvider throws MetadataProviderException String m
  • 未排序数组中的前 5 个元素

    给定一个未排序的数组 我们需要以有效的方式找到前 5 个元素 但我们无法对列表进行排序 我的解决方案 找到数组中的最大元素 在 处理 使用此最大元素后删除它 重复步骤 1 和 2 k 次 本例中为 5 次 时间复杂度 O kn O n 空间
  • WooCommerce - 发送有关自定义订单状态更改的自定义电子邮件

    我添加了自定义状态wc order confirmed Register new status function register order confirmed order status register post status wc o
  • OS X Lion 中的 easy_install pip 需要 sudo 吗?

    我从工作中的 Snow Leopard 转到家里的 Lion 安装 我不记得必须 sudo easy install pip 狮子需要这个吗 在我这样做之前我遇到了错误 pip 最终出现在这里 some computer which pip
  • 大规模分布式系统中的日志文件

    我在网格和 HPC 领域做了很多工作 对于分布在数百 或在某些情况下数千 服务器上的系统 我们面临的最大挑战之一是分析日志文件 当前日志文件本地写入每个刀片上的磁盘 但我们也可以考虑使用 UDP Appender 等发布日志信息并集中收集
  • PyDSTool 与 anaconda 未正确安装

    我正在尝试使用 anaconda2 安装 PyDSTool conda install PyDSTool 这似乎进展顺利 但是当我打开spyder并导入PyDSTool时 它给了我错误 import PyDSTool Traceback m
  • “scrollViewDidScroll”无法连续捕获移动

    我正在编写程序来在滚动 UITableView 时移动名为 myView 的 UIView 请看下面的图片 myView 会随着tableview的contentoffset的变化而改变它的 y坐标 我编写的主要代码是 func scrol
  • 使用 Knockout-Kendo.js 动态启用/禁用 kendo 日期选择器

    我正在尝试使用 Knockout Kendo js 根据选择的选定值启用 禁用 kendo 日期选择器 HTML
  • 将我的 HTML Google MAP API 版本 2 迁移到版本 3

    我将非常感谢对此的帮助 我的 html v2 文件和一些临时密钥工作正常 我从一些 XML 中获取位置 创建不同的颜色标记 并从信息窗口中的 XML 属性添加一些 URL 不是太复杂 现在我需要将其迁移到 v3 我找到了 v2 中函数的一些