将我的 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 的相关文章

  • Google 地图 - 删除滑雪道?

    滑雪道可以拆除吗 我已经使用了该向导 但由于在制作向导后添加了滑雪道 因此我认为该向导没有更新以显示如何关闭滑雪道 我已经阅读了文档 也许这是一个疏忽 更新 滑雪道和缆车现在被归类为 POI https issuetracker googl
  • 如何在 google.maps.event.addListener 中使用它

    以下示例有效 但是当我尝试传递参数并使用this在该功能不起作用 Working google maps event addListener markers i click showInfoWindow function showInfoW
  • 如何将额外的文本添加到颤振谷歌地图自定义标记中?

    问题是如何将自定义谷歌地图标记上的文本重叠与代表车辆登记号的文本融合在一起 我尝试使用此方法将文本叠加在图标上 生成器 上下文 gt 但根本不被认可 class MapsDemo extends StatefulWidget overrid
  • Google Maps API v3 Places 库返回未定义的 utc_offset

    我正在开发一个时间和位置感知应用程序 谷歌地图 v3 api 地点库几乎拥有我需要的一切 但是 当对特定地址执行 textSearch 并尝试为返回的 PlaceResult 项目之一调用 getDetails 时 从 getDetails
  • 使用 Google Places Autocomplete API 的 REQUEST_DENIED 响应

    我正在开发 Android 应用程序 它使用谷歌的地点自动完成 API 当尝试点击以下网址时 我得到的答复如下 预测 状态 REQUEST DENIED 我从下面的链接获得了 API 密钥Google API 控制台 http code g
  • 如何重新定位或移动 Google Maps SDK 上的当前位置按钮?

    如何将 Objective C 中的当前位置按钮移至我的偏好 现在 我已启用它 但底角有东西挡住了它 Thanks 您可以使用 padding 将按钮向上移动 self mapView padding UIEdgeInsets top 0
  • 从 DirectionsRenderer 中获取折线或标记的事件

    我正在使用 DirectionsService 和路线方法来生成 DirectionsResult 我还使用 DirectionsRenderer 对象来显示结果 因为它非常易于使用 我在检测 Directions changed 事件时没
  • 检查外部 JS 库是否已加载[重复]

    这个问题在这里已经有答案了 我当前的设置是用户单击链接来动态加载内容 其中还包括加载脚本 我希望能够测试是否加载了外部脚本 特别是 Google Maps JS API 如果没有加载 则继续执行此操作 这是我的代码 if href cont
  • 谷歌地图 v3 API 鼠标悬停在多边形上?

    我正在使用 google v3 api 构建地图 因为它更快 本质上 它是一张包含约 30 个城市的区域地图 这些区域上有多边形 当用户将鼠标悬停在城市上时 我希望 fillColor 变亮 然后在鼠标移开时返回到正常状态 当用户单击时 它
  • Bootstrap 导航栏与 Google 位置重叠自动完成下拉菜单

    我有一个导航栏 我试图在其中添加一个地点搜索框 除了谷歌位置提示框的一小部分被导航栏重叠 如下图所示 之外 一切几乎都有效 我尝试过改变z index输入框的值改为10或2000或90000但似乎没有效果 我还缺少其他需要做的事情吗 这是
  • 如何设置透明叠加 WMS 图层的样式

    我成功了覆盖WMS层 http blog sumbera com 2010 11 02 tiled wms overlay on google map v3 然而 在谷歌地图v3中 由于图块上的信息是透明的黑色 因此在深色背景 如卫星地图
  • Google 地图 - 使用自定义 json 样式*和* 地形视图

    因此 我创建了一些自定义 JSON 以使海洋更加饱和的蓝色 但现在似乎无法将地图默认为地形视图 它只是转到标准路线图视图 似乎无法弄清楚为什么会这样正在发生 有什么想法吗 function initialize Create an arra
  • Javascript - 将值从下拉框传递到 Google Maps API

    我正在使用 Google 地图 API 为一家出租车公司创建报价表 目前 用户在 2 个文本框中输入出发点和接载点 API 会计算两点之间的距离以及行程费用 我正在尝试添加两个具有设定位置的下拉框 以便用户可以选择这些位置之一或使用文本框输
  • 带孔的世界地图多边形(谷歌地图)

    我正在尝试绘制一个带孔的矩形多边形 我的问题是我无法创建一个覆盖整个世界的多边形 多边形被反转 以便仅选择一条线而不是整个世界 下面是我能够做出的最大选择的示例 例如 如果我尝试更改 0 在 new google maps LatLng 8
  • 使用 AngularJS 动态加载 Google 地图 API

    我正在尝试使用 AngularJS 加载 Google Maps API 以及该部分的控制器 search controller GoogleMaps scope sce function GoogleMaps scope sce var
  • Google API 和 OAuth 2.0 的正确重定向 URI

    我正在使用 Google Maps API 制作一个应用程序 我希望能够让一个人在一台计算机上观看另一个人在地图上编辑的内容 我正在考虑将地图信息传递到 Google Fusion Table 另一个人将能够将所有内容视为一层 我希望该程序
  • 单击标记时 agm-marker iconUrl 发生变化

    我试图在单击标记时更改其 iconUrl 我正在使用有角度的谷歌地图 iconUrl 我使用本地资产文件夹而不是服务 API 进行设置
  • 缩放更改后获取谷歌地图 v3 的边界

    我试图在缩放更改后获取地图的边界 但是 Zoom changed 事件会触发before边界已被重新计算 因此 在 Zoom changed 处理程序中 您将获得之前的边界 而不是新的边界 有没有办法获得缩放变化的正确范围 这是一个bug
  • 谷歌地图不显示 Android

    我想在我的应用程序中实现谷歌地图 我添加了谷歌地图活动并创建了一个密钥 我没有更改其他地方的代码中的任何内容 我应该工作 但没有 地图活动 public class MapsActivity extends FragmentActivity
  • 为什么我无法将动态事件处理程序附加到该元素?

    My code http jsfiddle net arEWv 7 HTML div style width 500px height 500px div div div

随机推荐

  • 如何退出 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 中函数的一些