在谷歌地图api上用id覆盖标记点

Overlay Marker Points with ids on google maps api

本文关键字：覆盖 id 谷歌地图 api 上用      更新时间：2023-09-26

我有一个我认为很棘手的问题，但希望这里有人能阻止我把头发扯掉！

我目前正试图弄清楚如何在谷歌地图上覆盖一堆标记，并覆盖一个托管的tileJson层。

我也在尝试遵循这个教程，这样当用户点击任何地图点时，我就可以将图片和文本加载到侧边栏中：

http://www.dougv.com/2007/07/12/using-ajax-to-update-a-non-map-div-via-google-maps-apis-gdownload-and-gmarker-onclick-event/

本教程是为映射api2设计的（我使用的是3），尽管它看起来可以很容易地为api3更新。

现在，部分原因是javascript连接器简化了自定义瓦片的导入，我似乎无法让标记工作，更不用说将它们连接到数据库，并从地图窗口外访问它们了。

https://mywebspace.wisc.edu/axler/Web%20Deep%20Map/Web%20Map%20Google%20Maps/index2.html实时地图分幅。。。在上面的链接。目前还没有工作点，但我在代码的列表中放了一些示例点。

有什么建议吗？这是我的密码。

<html>
    <head>
        <title>GOOGLE MAPS TILEMILL</title>
     <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD6VG2UbuMLDCQoZ-GOPZl_PU7r1jXzejU&sensor=false">
        </script>
      <script
        src='wax/dist/wax.g.min.js'
        type='text/javascript'></script>
      <link href='wax/theme/controls.css' rel='stylesheet' type='text/css' />
        <link href='style.css' rel = 'stylesheet' type ='text/css' />
        <link href='controls.css' rel = 'stylesheet' type = 'text/css' /><script>
    var map;
    var sidebar;

    function pageLoad() {
    sidebar = document.getElementById('sidebar');
    addPoint(1, 'Howards Fish House', 46.72.30616121527788, -92.15);
    addPoint(2, 'Rices Point', 46.78, -92.18);
    addPoint(3, 'Wild Rice Seeding Area', 46.80, -92.22);
        wax.tilejson('http://a.tiles.mapbox.com/v3/slre.st-louis-river-estuary.jsonp',
      function(tilejson) {
      var map = new google.maps.Map(
        document.getElementById('mymap'), {
        center: new google.maps.LatLng(46.72, -92.15),
        disableDefaultUI: false,
        zoom: 12,
        panControl: false,
        zoomControl: true,
        zoomControlOptions: {
        position: google.maps.ControlPosition.TOP_RIGHT
        },
        scaleControl: true,
        streetViewControl: false,
        mapTypeControl: false,
          mapTypeId: google.maps.MapTypeId.ROADMAP });
      // Use this code to set a new layer as a baselayer -
      // which means that it'll be on the bottom of any other
      // layers and you won't see Google tiles
      map.mapTypes.set('mb', new wax.g.connector(tilejson));
      map.setMapTypeId('mb');
    //I want to place a number of points on top of the MapBox hosted tile layer that is specified by wax.tilejson

    });

    }
function addPoint(pid, name, lat, lng) {
                var point = new google.maps.LatLng(lat, lng);
                var marker = new google.maps.Marker(point);
                map.setMap(marker);
                var info = '<strong>' + name + '</strong><br />';
                info += 'For more information, click the icon.';
                google.maps.event.addListener(marker, 'mouseover', function() {
                    marker.openInfoWindow(info);
                });
                google.maps.event.addListener(marker, 'mouseout', function() {
                    map.closeInfoWindow();
                });
                google.maps.event.addListener(marker, 'click', function() {
                    details.innerHTML = '<em>Loading information ...</em>';
                    showDivInfo(pid);
                });
            }
    </script>
    </head>

    <body onload="pageLoad()" onunload="pageUnload()">
    <div id='sidebar'>
        <h2>Explore the St. Louis River Estuary</h2>
        <p>Click on the map points to learn about the stories and science that define the region!</p>
        <p><span class='source'>Source: <a href='http://www.stlre.pebbleonline.com'>Main Web Page</a></span></p>
    </div>
    <div id='mymap'></div>

    </body>

    </html>

This map.setMap（marker）；看起来不对。

应该是

marker.setMap(map);

：）

相关文章：