javascript - 标记管理器不会显示标记-6ren

javascript - 标记管理器不会显示标记

转载作者：行者123 更新时间：2023-11-28 00:02:07

我正在尝试制作一个带有 Google map 窗口的简单网页。在这个窗口中，我有一个站点位置标记(可以通过填写新的纬度和经度并单击“检查站点”按钮来更改)。按下时，它会将站点标记和中心移动到站点。除此之外，我想用标记管理器加载范围标记。我已经预定义了一些要测试的标记。稍后，这将是一个巨大的标记列表(NOAA 站点 FYI)。我希望这些站点标记中的每一个都可以单击，并在单击时选中相应的复选框。我尝试实现这个，但似乎我的标记没有显示。我搜索了又搜索，但似乎无法找出它们不显示的原因。我的网页代码如下。

附带问题:将数千 (10k+) 个这些标记(分布在世界各地)加载到应用程序中的合适方法是什么。标记管理器仅通过显示边界内的标记真的那么有效，还是仍然有限制。我还可以想象加载数千个标记需要加载的数据相当多。也请您在这里输入。谢谢!

<!DOCTYPE html>
<html>
  <head>
    <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=AIzaSyBPtpV_saW7qtACfPVYBWIB-Jw253iBca4&sensor=false"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markermanager/src/markermanager.js"></script>
    <script type="text/javascript">
        var stations =[
            { "name": "Oostende", "posn": [51.233, 2.917], "code":"(64080,99999)" },
            { "name": "Gent", "posn": [51.183, 3.817], "code":"(64310,99999)" },
            { "name": "Koksijde", "posn": [51.083, 2.65], "code":"(64000,99999)" },
            { "name": "Wevelgem", "posn": [80.817, 3.2], "code":"(64160,99999)" },
            { "name": "Melle", "posn": [50.983, 3.983], "code":"(64340,99999)" },
            { "name": "Uccle", "posn": [50.8, 4.35], "code":"(64470,99999)" },
            { "name": "Antwerpen", "posn": [51.2, 4.467], "code":"(64500,99999)" },
            { "name": "Retie", "posn": [51.217, 5.033], "code":"(64640,99999)" },
            { "name": "Goetsenhoven", "posn": [50.783, 4.95], "code":"(64630,99999)" },
            { "name": "Schaffen", "posn": [51, 5.067], "code":"(64650,99999)" },
            { "name": "Diepenbeek", "posn": [50.917, 5.45], "code":"(64770,99999)" },
            { "name": "Chievres", "posn": [50.567, 3.833], "code":"(64320,99999)" },
            { "name": "Bierset", "posn": [50.65, 5.45], "code":"(64780,99999)" },
            { "name": "Kleine Brogel", "posn": [51.167, 5.467], "code":"(64790,99999)" },
            { "name": "Ernage", "posn": [50.567, 4.683], "code":"(64590,99999)" }
        ];
        var red_marker = "http://maps.google.com/mapfiles/ms/icons/red-dot.png";
        var green_marker = "http://maps.google.com/mapfiles/ms/icons/green-dot.png";
        var map;
        var mgr;
        var site_marker;
        var markers;
        function setupMap() {
            var latlng = new google.maps.LatLng(50.85, 4.35);
            var mapElem = document.getElementById("map-canvas-9");
            var mapOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
                };
            map = new google.maps.Map(mapElem, mapOptions);
            site_marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: " latitude N, longitude ",
                icon: red_marker
                });
            var listener = google.maps.event.addListener(map, 'bounds_changed', function(){
                setupNoaaMarkers();
                google.maps.event.removeListener(listener);
            });              
        }
        function setupNoaaMarkers() {
            mgr = new MarkerManager(map);
            google.maps.event.addListener(mgr, 'loaded', function(){
                mgr.addMarkers(getNoaaMarkers(),8);
                mgr.refresh();
            });      
        }
        function getNoaaMarkers() {
            var markers=[];
            for (var place in stations) {
                var title = place.name;
                var posn = new google.maps.LatLng(place.posn[0], place.posn[1]);
                var code = place.code;
                var marker = createMarker(posn, title, code);
                google.maps.event.addListener(marker, 'click', function() {
                    if (document.getElementById(code).checked)
                    {
                        document.getElementById(code).checked=false;
                    }
                    else
                    {
                        document.getElementById(code).checked=true;
                    }
                });
                markers.push(marker);
            }
            return markers;
        }
        function changeSitePosition() {
            var lat = document.getElementById("id_latitude").value;
            var lon = document.getElementById("id_longitude").value;
            if (lat === 0 & lon===0)
            {
                lat = 50.85;
                lon = 4.35;
            }
            var latlng = new google.maps.LatLng(lat, lon);
            site_marker.setPosition(latlng);
            map.setCenter(latlng);
        }
    </script>
  </head>
  <body onload="setupMap()">
    <div id="map-canvas-9" style="width: 800px; height: 300px;" class="easy-map-googlemap">
    </div>
    <table>
        <tr>
            <td>Latitude</td>
            <td><input id="id_latitude" max="90" min="-90" name="latitude" step="0.0001" type="number" /></td>
            <td></td>
            <td>In decimal degree, within [-90,90], max. 4 decimals, e.g. : 45.5 </td>
        </tr>
        <tr>
            <td>Longitude</td>
            <td><input id="id_longitude" max="180" min="-180" name="longitude" step="0.0001" type="number" /></td>
            <td></td>
            <td>In decimal degree, within [0,360], max. 4 decimals, e.g. : 12.3 </td>
        </tr>
        <tr>
            <td><button onclick="changeSitePosition()">Check site</button></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64080, 99999)" /> Oostende</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64310, 99999)" /> Gent</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64000, 99999)" /> Koksijde</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64160, 99999)" /> Wevelgem</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64340, 99999)" /> Melle</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64470, 99999)" /> Uccle</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64500, 99999)" /> Antwerpen</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64640, 99999)" /> Retie</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64630, 99999)" /> Goetsenhoven</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64650, 99999)" /> Schaffen</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64770, 99999)" /> Diepenbeek</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64320, 99999)" /> Chievres</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64780, 99999)" /> Bierset</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64790, 99999)" /> Kleine Brogel</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64590, 99999)" /> Ernage</label></td>
        </tr>
    </table>
  </body>
</html>

最佳答案

使用调试器。

对于place(0)的第一个值place.posn(0.posn)未定义；应该是 stations[place].posn
您的代码中没有 createMarker 函数。

HTML id's may not contain spaces

<!DOCTYPE html>
<html>
  <head>
    <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=AIzaSyBPtpV_saW7qtACfPVYBWIB-Jw253iBca4&sensor=false"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markermanager/src/markermanager.js"></script>
    <script type="text/javascript">
        var stations =[
            { "name": "Oostende", "posn": [51.233, 2.917], "code":"(64080,99999)" },
            { "name": "Gent", "posn": [51.183, 3.817], "code":"(64310,99999)" },
            { "name": "Koksijde", "posn": [51.083, 2.65], "code":"(64000,99999)" },
            { "name": "Wevelgem", "posn": [80.817, 3.2], "code":"(64160,99999)" },
            { "name": "Melle", "posn": [50.983, 3.983], "code":"(64340,99999)" },
            { "name": "Uccle", "posn": [50.8, 4.35], "code":"(64470,99999)" },
            { "name": "Antwerpen", "posn": [51.2, 4.467], "code":"(64500,99999)" },
            { "name": "Retie", "posn": [51.217, 5.033], "code":"(64640,99999)" },
            { "name": "Goetsenhoven", "posn": [50.783, 4.95], "code":"(64630,99999)" },
            { "name": "Schaffen", "posn": [51, 5.067], "code":"(64650,99999)" },
            { "name": "Diepenbeek", "posn": [50.917, 5.45], "code":"(64770,99999)" },
            { "name": "Chievres", "posn": [50.567, 3.833], "code":"(64320,99999)" },
            { "name": "Bierset", "posn": [50.65, 5.45], "code":"(64780,99999)" },
            { "name": "Kleine Brogel", "posn": [51.167, 5.467], "code":"(64790,99999)" },
            { "name": "Ernage", "posn": [50.567, 4.683], "code":"(64590,99999)" }
        ];
        var red_marker = "http://maps.google.com/mapfiles/ms/icons/red-dot.png";
        var green_marker = "http://maps.google.com/mapfiles/ms/icons/green-dot.png";
        var map;
        var mgr;
        var site_marker;
        var markers;
    var infowindow = new google.maps.InfoWindow({});
        function setupMap() {
            var latlng = new google.maps.LatLng(50.85, 4.35);
            var mapElem = document.getElementById("map-canvas-9");
            var mapOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
                };
            map = new google.maps.Map(mapElem, mapOptions);
            site_marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: " latitude N, longitude ",
                icon: red_marker
                });
            var listener = google.maps.event.addListener(map, 'bounds_changed', function(){
                setupNoaaMarkers();
                google.maps.event.removeListener(listener);
            });              
        }
        function setupNoaaMarkers() {
            mgr = new MarkerManager(map);
            google.maps.event.addListener(mgr, 'loaded', function(){
                mgr.addMarkers(getNoaaMarkers(),8);
                mgr.refresh();
            });      
        }
        function getNoaaMarkers() {
            var markers=[];
            for (var place in stations) {
                var title = place.name;
                var posn = new google.maps.LatLng(stations[place].posn[0], stations[place].posn[1]);
                var code = stations[place].code;
                var marker = createMarker(posn, title, code);
            }
            return markers;
        }
        function changeSitePosition() {
            var lat = document.getElementById("id_latitude").value;
            var lon = document.getElementById("id_longitude").value;
            if (lat === 0 & lon===0)
            {
                lat = 50.85;
                lon = 4.35;
            }
            var latlng = new google.maps.LatLng(lat, lon);
            site_marker.setPosition(latlng);
            map.setCenter(latlng);
        }
  function createMarker(latlng,title,code) {
    var marker = new google.maps.Marker({
      map: map,
      title: title,
      position: latlng
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(code);
      infowindow.open(map, this);
    });
    google.maps.event.addListener(marker, 'click', function() {
      if (document.getElementById(code).checked) {
        document.getElementById(code).checked=false;
      } else {
        document.getElementById(code).checked=true;
      }
    });


    return marker;
  }

    </script>
  </head>
  <body onload="setupMap()">
    <div id="map-canvas-9" style="width: 800px; height: 300px;" class="easy-map-googlemap">
    </div>
    <table>
        <tr>
            <td>Latitude</td>
            <td><input id="id_latitude" max="90" min="-90" name="latitude" step="0.0001" type="number" /></td>
            <td></td>
            <td>In decimal degree, within [-90,90], max. 4 decimals, e.g. : 45.5 </td>
        </tr>
        <tr>
            <td>Longitude</td>
            <td><input id="id_longitude" max="180" min="-180" name="longitude" step="0.0001" type="number" /></td>
            <td></td>
            <td>In decimal degree, within [0,360], max. 4 decimals, e.g. : 12.3 </td>
        </tr>
        <tr>
            <td><button onclick="changeSitePosition()">Check site</button></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64080,99999)" /> Oostende</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64310,99999)" /> Gent</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64000,99999)" /> Koksijde</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64160,99999)" /> Wevelgem</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64340,99999)" /> Melle</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64470,99999)" /> Uccle</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64500,99999)" /> Antwerpen</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64640,99999)" /> Retie</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64630,99999)" /> Goetsenhoven</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64650,99999)" /> Schaffen</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64770,99999)" /> Diepenbeek</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64320,99999)" /> Chievres</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64780,99999)" /> Bierset</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64790,99999)" /> Kleine Brogel</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64590,99999)" /> Ernage</label></td>
        </tr>
    </table>
  </body>
</html>

working example

关于javascript - 标记管理器不会显示标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20783939/

文章推荐： javascript - 纹理未正确映射到正方形 WebGL

文章推荐： javascript - 使用 jQuery/Javascript 获取 csv 文件的总行数

文章推荐： javascript - 允许行中的列宽度不同

文章推荐： jquery - 如何将网页内容保持在用户 View 之下？

javascript - 执行存在于输入值字段中的 javascript - JavaScript
我有一个 html 格式的表单: 我需要得到 JavaScript在value input 字段执行，但只能通过表单的 submit .原因是页面是一个模板所以我不控制它(不能有
javascript - JavaScript 代码片段正在破坏其他 JavaScript
我管理的论坛是托管软件，因此我无法访问源代码，我只能向页面添加 JavaScript 来实现我需要完成的任务。我正在尝试用超链接替换所有页面上某些文本关键字的第一个实例。我还根据国家/地区代码对这些
javascript - JavaScript 如何使新页面包含更多 JavaScript？
我正在使用 JS 打开新页面并将 HTML 代码写入其中，但是当我尝试使用 document.write() 在新页面中编写 JS 时功能不起作用。显然，一旦看到，主 JS 就会关闭。用于即将打开的
javascript - Javascript 引擎如何在浏览器中执行 Javascript？
提问不是为了解决问题，提问是为了更好地理解系统专家!我知道每当你将 javascript 代码输入 javascript 引擎时，它会立即由 javascript 引擎执行。由于没有看过Engi
javascript - 如何将 JavaScript 变量从一个 JavaScript 文件传递到另一个 JavaScript 文件？
我在一个文件夹中有两个 javascript 文件。我想将一个变量的 javascript 文件传递到另一个。我应该使用什么程序？最佳答案 window.postMessage用于跨文档消息。使
javascript - javascript 中的 javascript 输入问题
我有一个练习，我需要输入两个输入并检查它们是否都等于一个。如果是 console.log 正则 console.log false 我试过这样的事情: function isPositive(fir
javascript - 在加载其他 javascript 库的页面上嵌入 Javascript？
我正在做一个Web应用程序，计划允许其他网站(客户端)在其页面上嵌入以下javascript: 我的网络应用程序位于 http://example.org 。我不能假设客户端网站的页面有 JQue
javascript - 从 Javascript 内部调用 Javascript
目前我正在使用三个外部 JS 文件。我喜欢将所有三个 JS 文件合而为一。尽一切可能。我创建 aio.js 并在 aio.js 中 src="https://code.jquery.com/
javascript - AngularJS/javascript javascript 对象的特殊排序顺序
我有例如像这样的数组: var myArray = []; var item1 = { start: '08:00', end: '09:30' } var item2 = {
javascript - 在 Javascript 内部执行 Javascript？
所以我正在制作一个 Chrome 扩展，它使用我制作的一些 TamperMonkey 脚本。我想要一个“主”javascript 文件，您可以在其中包含并执行其他脚本。我很擅长使用以下行将其他 jav
javascript - 如何将变量从 javascript 移动到 javascript？
我有 A、B html 和 A、B javascript 文件。并且，如何将 A JavaScript 中使用的全局变量直接移动到 B JavaScript 中？示例 JavaScript) va
javascript - 从 javascript 调用 javascript
我需要将以下整个代码放入名为 activate.js 的 JavaScript 中。你能告诉我怎么做吗？ var int = new int({ seconds: 30, mark
javascript - 将变量值从一个 JavaScript 传递到另一个 JavaScript
我已经为我的 .net Web 应用程序创建了母版页 EXAMPLE1.Master。他们的 I 将值存储在 JavaScript 变量中。我想在另一个 JS 文件中检索该变量。示例1.大师:-
javascript - 有没有开源库可以在浏览器中使用 Javascript 来整理 Javascript？
是否有任何库可以用来转换这样的代码: function () { var a = 1; } 像这样的代码: function () { var a = 1; } 在我的浏览器中。因为我在 Gi
javascript - javascript 中的参数列表后缺少语法 javascript 错误 )
我收到语法缺失 ) 错误 $(document).ready(function changeText() { var p = document.getElementById('bidp
javascript - 第一个 JavaScript 完成后启动第二个 JavaScript
我正在制作进度条。它有一个标签。我想调整某个脚本完成的标签。在找到可能的解决方案的一些答案后，我想出了以下脚本。第一个启动并按预期工作。然而，第二个却没有。它出什么问题了？代码如下: HTML:
javascript - 为什么外部 javascript 库会阻止我页面上的 javascript？
这里有一个很简单的问题，我简单的头脑无法回答:为什么我在外部库中加载时，下面的匿名和onload函数没有运行？我错过了一些非常非常基本的东西。 Library.js 只有一行:console.log(
javascript - 如何区分代码内 javascript 和客户端 javascript
我知道 javascript 是一种客户端语言，但如果实际代码中嵌入的 javascript 代码以某种方式与在控制台上运行的代码不同，我会尝试找到答案。让我用一个例子来解释它: 我想创建一个像 Mi
javascript - 将 Javascript 内联到不显眼的 JavaScript？
我如何将这个内联 javascript 更改为 Unobtrusive JavaScript？谢谢! 感谢您的回答，但它不起作用。我的代码是: PHP js文件 document.getElem
javascript - 如何将 JavaScript 对象导出为 JavaScript？
我正在寻找将简单的 JavaScript 对象“转储”到动态生成的 JavaScript 源代码中的最优雅的方法。目的:假设我们有 node.js 服务器生成 HTML。我们在服务器端有一个对象x。

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 标记管理器不会显示标记