Google地图切换按钮

时间:2013-06-09 01:26:03

标签: google-maps google-maps-api-3

我整天都在苦苦挣扎。我已经制作了新的按钮,可以更好地在地图上找到与Google地图按钮相匹配的按钮。我一直试图让他们使用地图上方的当前按钮,所以我可以删除它们,但我似乎无法让它们工作。我错过了什么

以下是该页面的链接,以便您查看。地图上方的按钮工作,我将删除它们。地图上的按钮不起作用,我试图开始工作。

DEMO LINK

这是代码。 var radarButton和var satButton是新的。下面的那些是当前按钮。

    jQuery(document).ready(function($) {
        var mapTypeId = wundermap.getMapTypeId("hyb");
        var googlemap = new google.maps.Map($("#map")[0], {
            center: new google.maps.LatLng(32.782878, -96.609862),
              panControl: false,
              zoom: 6,
              mapTypeId: mapTypeId,
              mapTypeControl: true,
              mapTypeControlOptions: {
          style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        zoomControl: true,
        zoomControlOptions: {
          style: google.maps.ZoomControlStyle.SMALL,
          position: google.maps.ControlPosition.RIGHT_TOP
        },
    });

    var radarOptions = {
        gmap: googlemap,
        name: 'Radar',
        position: google.maps.ControlPosition.TOP_RIGHT,
        action: function(){
                if (wundermap.map.overlayMapTypes.length==0) {
                  wundermap.map.overlayMapTypes.push(null); // create empty overlay entry
                  wundermap.map.overlayMapTypes.setAt("1",Radar);
                }
                else {
                    wundermap.map.overlayMapTypes.clear();
                }

            }
}
var radarButton = new buttonControl(radarOptions);

var satOptions = {
        gmap: googlemap,
        name: 'Satellite',
        position: google.maps.ControlPosition.TOP_RIGHT,
        action: function(){
                if (wundermap.map.overlayMapTypes.length==0) {
                  wundermap.map.overlayMapTypes.push(null); // create empty overlay entry
                  wundermap.map.overlayMapTypes.setAt("1",Satellite);
                }
                else {
                    wundermap.map.overlayMapTypes.clear();
                }

            }
}
var satButton = new buttonControl(satOptions);

        wundermap.setOptions({
            map: googlemap,
            refreshPeriod: 60000,
            units: "english",
            debug: 0,
            source: "wxmap",
            StreetsOverlay: true,
            layers: [
            {
            layer: "Radar",
            active: "on",
            opacity: 70,
            type: "N0R",
            type2: "",
            animation: {
            num: 6,
            max: 10,
            delay: 25
            },
            stormtracks: "off",
            smooth: "on",
            subdomain: "radblast-aws"
            },
            {
            layer: "Satellite",
            defaultUI: 0,
            opacity: "85",
            source: "",
            active: "off",
            animation: {
            num: 1,
            max: 8,
            delay: 25
            }
            },
            ],

        });
        wundermap.initialize();
    });

以下是实际图层代码的链接。代码要发布很长,但叠加层称为雷达。

RADAR CODE

1 个答案:

答案 0 :(得分:1)

开始的地方是JavaScript控制台。那里的错误信息告诉你问题是什么。

首先,当页面加载时,你在wxgr3radar.php的第286行有一个错误:

<body onload="initialize()">

您的initialize()函数定义在哪里?我在你的代码中没有看到它。

然后,当我单击Satellite按钮时,它会在imap.js的第41行停止,因为map.overlayMapTypes未定义:

if (map.overlayMapTypes.length==0) {

您希望map成为Maps API对象,但map不是您认为的那样。在调试器中查看它。它是DOM元素,而不是Maps API地图。您的Maps API地图位于名为googlemap的变量中,您在imap.js的第3行中创建。