相关疑难解决方法(0)

如何隐藏或显示Google地图图层？

我准备了一个简化的测试用例和截图.

我想我错过了一点点,只需几行代码.

我在JavaScript Google地图中有2个叠加层(天气和云),并且想要在点击相应的复选框时隐藏或显示它们:

在此输入图像描述

这是测试用例,只需将其粘贴到.html文件中即可运行:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
    h1,p { 
        text-align: center; 
    }

    #map { 
        width: 700px; 
        height: 400px; 
        margin-left: auto; 
        margin-right: auto; 
        background-color: #CCCCFF; 
    }
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&language=de&libraries=weather"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">

$(function() {
    findCity('Berlin');

    $('#weather_box,#clouds_box').click(function(){
        alert('How to hide/show layers? Checked: ' + $(this).is(':checked'));
    });
});

function createMap(center) {
    var opts = {
        zoom: 6,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    return new google.maps.Map(document.getElementById('map'), opts);
}

function findCity(city) {
    var gc = new …

Run Code Online (Sandbox Code Playgroud)

google-maps weather weather-api google-maps-api-3 google-weather-api

Ale*_*ber

2012 04-27

5
推荐指数

1
解决办法

2万
查看次数

如何使用Google Maps API v3和Fusion Tables打开/关闭图层？

我正在尝试制作具有多个融合表层的地图.每个融合表层将显示特定年份中与卡特尔相关的杀人案件的数量(包括所有年份的总和).由于每个图层都具有相同的几何图形,因此我需要让用户一次查看一个图层.有没有办法使用单选按钮打开/关闭每一层？我已经搜索了几个小时的教程或示例,并且已经空了,所以我希望有人可以提供帮助.

以下是地图副本的链接:https://mywebspace.wisc.edu/csterling/web/cartel%20map/index%20-%20practice.html

这是代码(抱歉格式化)

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDRngi4TwTlx3r9zRXxIGzbSAq6OcEpxjA&sensor=false"></script>
<link rel='stylesheet' href='stylesheet.css' />
<script type="text/javascript" src="script.js"></script>


<script type='text/javascript'>

window.onload = function () {

    var oceanStyle = [
        {
         featureType: "ocean",
         stylers: [
            { saturation: -100 }
            ]
        },
        {
         featureType: "all",
         elementType: "labels",
         stylers: [
         { visibility: "off"}
         ]
         }

    ];

    var oceanMapType = new google.maps.StyledMapType(oceanStyle, 
        {name: "Grayscale"});


    var myLatlng = new google.maps.LatLng(0,0);

    var mapOptions = {
        center: new google.maps.LatLng(24,-103),
        zoom: 5,
        //mapTypeId: google.maps.MapTypeId.HYBRID,
        mapTypeControl: true,
        mapTypeControlOptions: {                
            position: google.maps.ControlPosition.RIGHT_TOP, …

Run Code Online (Sandbox Code Playgroud)

javascript google-maps google-maps-api-3 google-fusion-tables

cst*_*ing

2015 02-07

3
推荐指数

1
解决办法

1万
查看次数