2017-11-22 14 views
-1

私は2つのマーカーグループを持つGoogleマップを持っています。グループA(赤いマーカー)とグループB(紫色のマーカー)と呼ぶことにしましょう。私はこれらの2つのグループのマーカーをオン/オフに切り替えるために私のページにチェックボックスを持っています。私は、 groupAと表示されるミックス(灰色のマーカー)に3番目のマーカーを追加したいと思います。私は明らかに思ったいくつかの変更を試みましたが、この初心者のための運はありません。灰色のマーカーはマップ上にとどまり、GroupAマーカーでオン/オフを切り替えません。私はこれが簡単な修正だと確信しています。何か助けてくれてありがとう!ここでGoogle Maps API Javascript - 1つのマーカーグループに2つの異なるマーカーを切り替える

私が試み変化と私のjavascriptです:

<script>   
     var markerGroups = { 
    "GroupA": [], 
    "GroupB": [] 
    "GroupC": [] 
}; 
var customIcons = { 
// Maps Icons Collection https://mapicons.mapsmarker.com 
    GroupA: { 
     icon: '/icon_red.png' 
    }, 
    GroupB: { 
     icon: '/icon_purple.png' 
    }, 
    GroupC: { 
     icon: '/icon_grey.png' 
    } 
}; 
var map; 
function load() { 
    map = new google.maps.Map(document.getElementById("map"), { 
     center: new google.maps.LatLng(40.357250, -75.272855), 
     zoom: 7, 
     mapTypeId: 'terrain', 
     gestureHandling: 'greedy', 

     mapTypeControl: true, 
      mapTypeControlOptions: { 
       style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, 
       position: google.maps.ControlPosition.TOP_LEFT 
      }, 
      zoomControl: true, 
      zoomControlOptions: { 
       position: google.maps.ControlPosition.TOP_LEFT 
      }, 
      fullscreenControl: true, 
      fullscreenControlOptions: { 
       position: google.maps.ControlPosition.TOP_RIGHT 
      }, 
      scaleControl: true, 
      streetViewControl: false, 
      streetViewControlOptions: { 
       position: google.maps.ControlPosition.TOP_LEFT 
      }, 
      fullscreenControl: true 



    }); 
    var infoWindow = new google.maps.InfoWindow(); 
    // downloadUrl("phpsqlajax_genxml.php", function(data) { 
    var xml = parseXml(xmlStr); // data.responseXML; 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < markers.length; i++) { 
     var name = markers[i].getAttribute("name"); 
     var address = markers[i].getAttribute("address"); 
     var point = new google.maps.LatLng(
     parseFloat(markers[i].getAttribute("lat")), 
     parseFloat(markers[i].getAttribute("lng"))); 
     bounds.extend(point); 
     var type = markers[i].getAttribute("type"); 
     var html = "<b>" + name + "</b> <br/>" + address; 
     var icon = customIcons[type] || {}; 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: point, 
      icon: icon.icon 
     }); 
     markerGroups[type].push(marker); 
     bindInfoWindow(marker, map, infoWindow, html); 
    } 
    // }); 
    map.fitBounds(bounds); 
} 

function bindInfoWindow(marker, map, infoWindow, html) { 
    google.maps.event.addListener(marker, 'click', function() { 
     infoWindow.setContent(html); 
     infoWindow.open(map, marker); 
    }); 
} 

function downloadUrl(url, callback) { 
    var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; 

    request.onreadystatechange = function() { 
     if (request.readyState == 4) { 
      request.onreadystatechange = doNothing; 
      callback(request, request.status); 
     } 
    }; 

    request.open('GET', url, true); 
    request.send(null); 
} 

function doNothing() {} 

function toggleGroup(type) { 
    for (var i = 0; i < markerGroups[type].length; i++) { 
     // alert(markerGroups[type][i]); 
     var marker = markerGroups[type][i]; 
     if (!marker.getVisible()) { 
      marker.setVisible(true); 
     } else { 
      marker.setVisible(false); 
     } 
    } 
} 
google.maps.event.addDomListener(window, 'load', load); 

function parseXml(str) { 
    if (window.ActiveXObject) { 
     var doc = new ActiveXObject('MicrosoftXMLDOM'); 
     doc.loadXML(str); 
     return doc; 
    } else if (window.DOMParser) { 
     return (new DOMParser).parseFromString(str, 'text/xml'); 
    } 
} 

var xmlStr = '<markers><marker name="This is a red marker" address="" lat="" lng="" type="GroupA"/><marker name="This is a purple maker" address="" lat="" lng="" type="GroupB"/><marker name="This is a grey marker " address="" lat="" lng="" type="GroupC"/></markers>'; 

これはHTMLです:

<input type="checkbox" id="GroupA" onclick="toggleGroup('GroupA', 'GroupC')" CHECKED/>GroupA 

<input type="checkbox" id="GroupB" onclick="toggleGroup('GroupB')" CHECKED/>GroupB 

<div id="map"></div> 

答えて

0

あなたは配列

HTML

<input type="checkbox" id="GroupA" onclick="toggleGroup(['GroupA', 'GroupC'])" CHECKED/>GroupA 

<input type="checkbox" id="GroupB" onclick="toggleGroup(['GroupB'])" CHECKED/>GroupB 

<div id="map"></div> 

JSを使用することができます

function toggleGroup(type) { 
    type.forEach(element => { 
     for (var i = 0; i < markerGroups[element].length; i++) { 
      alert(markerGroups[element][i]); 
      var marker = markerGroups[element][i]; 
      if (!marker.getVisible()) { 
       marker.setVisible(true); 
      } else { 
       marker.setVisible(false); 
      } 
     } 
    }); 
} 
0

あなたははGroupCはチェックボックスがクリックされたときにちょうど両方toggleGroup('GroupA')toggleGroup('GroupC')を呼び出して、グループAに切り替えたい常に場合:

<input type="checkbox" id="GroupA" onclick="toggleGroup('GroupA');toggleGroup('GroupC')" CHECKED/>GroupA 

proof of concept fiddle

コードスニペット:

var markerGroups = { 
 
    "GroupA": [], 
 
    "GroupB": [], 
 
    "GroupC": [] 
 
}; 
 
var customIcons = { 
 
    // Maps Icons Collection https://mapicons.mapsmarker.com 
 
    GroupA: { 
 
    icon: 'http://maps.google.com/mapfiles/ms/micons/red.png' 
 
    }, 
 
    GroupB: { 
 
    icon: 'http://maps.google.com/mapfiles/ms/micons/purple.png' 
 
    }, 
 
    GroupC: { 
 
    icon: 'http://maps.google.com/mapfiles/ms/micons/grey.png' 
 
    } 
 
}; 
 
var map; 
 

 
function load() { 
 
    map = new google.maps.Map(document.getElementById("map"), { 
 
    center: new google.maps.LatLng(40.357250, -75.272855), 
 
    zoom: 7, 
 
    mapTypeId: 'terrain', 
 
    gestureHandling: 'greedy', 
 

 
    mapTypeControl: true, 
 
    mapTypeControlOptions: { 
 
     style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, 
 
     position: google.maps.ControlPosition.TOP_LEFT 
 
    }, 
 
    zoomControl: true, 
 
    zoomControlOptions: { 
 
     position: google.maps.ControlPosition.TOP_LEFT 
 
    }, 
 
    fullscreenControl: true, 
 
    fullscreenControlOptions: { 
 
     position: google.maps.ControlPosition.TOP_RIGHT 
 
    }, 
 
    scaleControl: true, 
 
    streetViewControl: false, 
 
    streetViewControlOptions: { 
 
     position: google.maps.ControlPosition.TOP_LEFT 
 
    }, 
 
    fullscreenControl: true 
 
    }); 
 
    var infoWindow = new google.maps.InfoWindow(); 
 
    // downloadUrl("phpsqlajax_genxml.php", function(data) { 
 
    var xml = parseXml(xmlStr); // data.responseXML; 
 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    for (var i = 0; i < markers.length; i++) { 
 
    var name = markers[i].getAttribute("name"); 
 
    var address = markers[i].getAttribute("address"); 
 
    var point = new google.maps.LatLng(
 
     parseFloat(markers[i].getAttribute("lat")), 
 
     parseFloat(markers[i].getAttribute("lng"))); 
 
    bounds.extend(point); 
 
    var type = markers[i].getAttribute("type"); 
 
    var html = "<b>" + name + "</b> <br/>" + address; 
 
    var icon = customIcons[type] || {}; 
 
    var marker = new google.maps.Marker({ 
 
     map: map, 
 
     position: point, 
 
     icon: icon.icon 
 
    }); 
 
    markerGroups[type].push(marker); 
 
    bindInfoWindow(marker, map, infoWindow, html); 
 
    } 
 
    // }); 
 
    map.fitBounds(bounds); 
 
} 
 

 
function bindInfoWindow(marker, map, infoWindow, html) { 
 
    google.maps.event.addListener(marker, 'click', function() { 
 
    infoWindow.setContent(html); 
 
    infoWindow.open(map, marker); 
 
    }); 
 
} 
 

 
function downloadUrl(url, callback) { 
 
    var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; 
 

 
    request.onreadystatechange = function() { 
 
    if (request.readyState == 4) { 
 
     request.onreadystatechange = doNothing; 
 
     callback(request, request.status); 
 
    } 
 
    }; 
 

 
    request.open('GET', url, true); 
 
    request.send(null); 
 
} 
 

 
function doNothing() {} 
 

 
function toggleGroup(type) { 
 
    for (var i = 0; i < markerGroups[type].length; i++) { 
 
    // alert(markerGroups[type][i]); 
 
    var marker = markerGroups[type][i]; 
 
    if (!marker.getVisible()) { 
 
     marker.setVisible(true); 
 
    } else { 
 
     marker.setVisible(false); 
 
    } 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, 'load', load); 
 

 
function parseXml(str) { 
 
    if (window.ActiveXObject) { 
 
    var doc = new ActiveXObject('MicrosoftXMLDOM'); 
 
    doc.loadXML(str); 
 
    return doc; 
 
    } else if (window.DOMParser) { 
 
    return (new DOMParser).parseFromString(str, 'text/xml'); 
 
    } 
 
} 
 

 
var xmlStr = '<markers><marker name="This is a red marker" address="" lat="40" lng="-117" type="GroupA"/><marker name="This is a purple maker" address="" lat="41" lng="-117.5" type="GroupB"/><marker name="This is a grey marker " address="" lat="40" lng="-117.8" type="GroupC"/></markers>';
html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<input type="checkbox" id="GroupA" onclick="toggleGroup('GroupA');toggleGroup('GroupC')" CHECKED/>GroupA 
 

 
<input type="checkbox" id="GroupB" onclick="toggleGroup('GroupB')" CHECKED/>GroupB 
 

 
<div id="map"></div>

+0

パーフェクト!ありがとうございました! – dlc3172

関連する問題