谷歌地图KML上的自定义图标消失了

时间:2016-05-26 15:35:49

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

海关图标正在我的谷歌地图上(使用KML文件),但它们消失了。我看过the related post on stackoverflow,但由于我还没有使用过<color/>我在地图上可以做些什么?

您可以看到 example page here,脚本如下:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/kmz/ZipFile.complete.js">
        </script>
        <script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/kmz/geoxml3.js">
        </script>
        <script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js">
        </script> 
        <script type="text/javascript">
var geoXml = null;
var geoXmlDoc = null;
var map = null;
var myLatLng = null;
var myGeoXml3Zoom = true;
var sidebarHtml = "";
var infowindow = null;
var kmlLayer = null;
var filename = "footballteams-uk.xml";
  function MapTypeId2UrlValue(maptype) { 
    var urlValue = 'm';
    switch(maptype){
      case google.maps.MapTypeId.HYBRID:    urlValue='h';
                        break;
      case google.maps.MapTypeId.SATELLITE: urlValue='k';
                        break;
      case google.maps.MapTypeId.TERRAIN:   urlValue='t';
                        break;
      default:
      case google.maps.MapTypeId.ROADMAP:   urlValue='m';
                        break;
    }
    return urlValue;
  }


    function initialize() {
      myLatLng = new google.maps.LatLng(52.82,-1.63);
      // these set the initial center, zoom and maptype for the map 
      // if it is not specified in the query string
      var lat = 52.82;
      var lng = -1.63;
      var zoom = 7;
      var maptype = google.maps.MapTypeId.TERRAIN;
			
		

      // If there are any parameters at eh end of the URL, they will be in  location.search
      // looking something like  "?marker=3"
 
      // skip the first character, we are not interested in the "?"
      var query = location.search.substring(1);
 
      // split the rest at each "&" character to give a list of  "argname=value"  pairs
      var pairs = query.split("&");
      for (var i=0; i<pairs.length; i++) {
        // break each pair at the first "=" to obtain the argname and value
	var pos = pairs[i].indexOf("=");
	var argname = pairs[i].substring(0,pos).toLowerCase();
	var value = pairs[i].substring(pos+1).toLowerCase();
 
        // process each possible argname  -  use unescape() if theres any chance of spaces
        if (argname == "id") {id = unescape(value);}
        if (argname == "filename") {filename = unescape(value);}
        if (argname == "marker") {index = parseFloat(value);}
        if (argname == "lat") {lat = parseFloat(value);}
        if (argname == "lng") {lng = parseFloat(value);}
        if (argname == "zoom") {
	  zoom = parseInt(value);
	  myGeoXml3Zoom = false;
	}
        if (argname == "type") {
// from the v3 documentation 8/24/2010
// HYBRID This map type displays a transparent layer of major streets on satellite images. 
// ROADMAP This map type displays a normal street map. 
// SATELLITE This map type displays satellite images. 
// TERRAIN This map type displays maps with physical features such as terrain and vegetation. 
          if (value == "m") {maptype = google.maps.MapTypeId.ROADMAP;}
          if (value == "k") {maptype = google.maps.MapTypeId.SATELLITE;}
          if (value == "h") {maptype = google.maps.MapTypeId.HYBRID;}
          if (value == "t") {maptype = google.maps.MapTypeId.TERRAIN;}

        }
      }
      if (!isNaN(lat) && !isNaN(lng)) {
        myLatLng = new google.maps.LatLng(lat, lng);
      }
              	

 var myOptions = {
                    zoom: zoom,
                    center: myLatLng,
                    // zoom: 5,
                    // center: myLatlng,
                    mapTypeId: maptype
                };
                map = new google.maps.Map(document.getElementById("map_canvas"),
                      myOptions);
                infowindow = new google.maps.InfoWindow({});
								
	 	//adsense start
var adUnitDiv = document.createElement('div');   
var adUnitOptions = {     format: google.maps.adsense.AdFormat.LEADERBOARD,  
   position: google.maps.ControlPosition.BOTTOM, 
	 backgroundColor: '#FFFF33',
    borderColor: '#e5ecf9',
    titleColor: '#0000cc',
    textColor: '#000000',
    urlColor: '#009900',      
	  map: map,    
		 visible: true,    
		  publisherId: 'pub-3506441846587527',
			channelNumber:'4940650139'   
			}  
			 adUnit = new google.maps.adsense.AdUnit(adUnitDiv, adUnitOptions); 
//adsense end 


   geoXml = new geoXML3.parser({
                    map: map,
                    zoom: myGeoXml3Zoom, 
                    infoWindow: infowindow,
                    singleInfoWindow: true,
                    afterParse: useTheData
                });
                geoXml.parse(filename);
		google.maps.event.addListener(map, "bounds_changed", makeSidebar);
		google.maps.event.addListener(map, "center_changed", makeSidebar);
		google.maps.event.addListener(map, "zoom_changed", makeSidebar);
      // Make the link the first time when the page opens
      makeLink();

      // Make the link again whenever the map changes
      google.maps.event.addListener(map, 'maptypeid_changed', makeLink);
      google.maps.event.addListener(map, 'center_changed', makeLink);
      google.maps.event.addListener(map, 'bounds_changed', makeLink);
      google.maps.event.addListener(map, 'zoom_changed', makeLink);
            };

function kmlPgClick(pm) {
   if (geoXml.docs[0].placemarks[pm].polygon.getMap()) {
      google.maps.event.trigger(geoXmlDoc.placemarks[pm].polygon,"click");
   } else {
      geoXmlDoc.placemarks[pm].polygon.setMap(map);
      google.maps.event.trigger(geoXmlDoc.placemarks[pm].polygon,"click");
   }
}
function kmlPlClick(pm) {
   if (geoXml.docs[0].placemarks[pm].polyline.getMap()) {
      google.maps.event.trigger(geoXmlDoc.placemarks[pm].polyline,"click");
   } else {
      geoXmlDoc.placemarks[pm].polyline.setMap(map);
      google.maps.event.trigger(geoXmlDoc.placemarks[pm].polyline,"click");
   }
}
function kmlClick(pm) {
   if (geoXml.docs[0].placemarks[pm].marker.getMap()) {
      google.maps.event.trigger(geoXml.docs[0].placemarks[pm].marker,"click");
   } else {
      geoXmlDoc.placemarks[pm].marker.setMap(map);
      google.maps.event.trigger(geoXmlDoc.placemarks[pm].marker,"click");
   }
}

function kmlShowPlacemark(pm) {
  if (geoXmlDoc.placemarks[pm].polygon) {
    map.fitBounds(geoXmlDoc.placemarks[pm].polygon.bounds);
  } else if (geoXmlDoc.placemarks[pm].polyline) {
    map.fitBounds(geoXmlDoc.placemarks[pm].polyline.bounds);
  } else if (geoXmlDoc.placemarks[pm].marker) {
    map.setCenter(geoXmlDoc.placemarks[pm].marker.getPosition());
  } 
   
   for (var i=0;i<geoXmlDoc.placemarks.length;i++) {
     var placemark = geoXmlDoc.placemarks[i];
     if (i == pm) {
       if (placemark.polygon) placemark.polygon.setMap(map);
       if (placemark.polyline) placemark.polyline.setMap(map);
       if (placemark.marker) placemark.marker.setMap(map);
     } else {
       if (placemark.polygon) placemark.polygon.setMap(null);
       if (placemark.polyline) placemark.polyline.setMap(null);
       if (placemark.marker) placemark.marker.setMap(null);
     }
   }
}





function showAll() {
   map.fitBounds(geoXmlDoc.bounds);
   for (var i=0;i<geoXmlDoc.placemarks.length;i++) {
     var placemark = geoXmlDoc.placemarks[i];
     if (placemark.polygon) placemark.polygon.setMap(map);
     if (placemark.polyline) placemark.polyline.setMap(map);
     if (placemark.marker) placemark.marker.setMap(map);
   }
}



// == rebuilds the sidebar to match the markers currently displayed ==
function makeSidebarPolygonEntry(i) {
  var name = geoXmlDoc.placemarks[i].name;
   if (!name  || (name.length == 0)) name = "polygon #"+i;
   // alert(name);
   sidebarHtml += '<tr id="row'+i+'"><td onmouseover="kmlHighlightPoly('+i+');" onmouseout="kmlUnHighlightPoly('+i+');"><a href="javascript:kmlPgClick('+i+');">'+name+'</a> - <a href="javascript:kmlShowPlacemark('+i+');">show</a></td></tr>';
 
}
function makeSidebarPolylineEntry(i) {
  var name = geoXmlDoc.placemarks[i].name;
   if (!name  || (name.length == 0)) name = "polyline #"+i;
   // alert(name);
   sidebarHtml += '<tr id="row'+i+'"><td onmouseover="kmlHighlightPoly('+i+');" onmouseout="kmlUnHighlightPoly('+i+');"><a href="javascript:kmlPlClick('+i+');">'+name+'</a> - <a href="javascript:kmlShowPlacemark('+i+');">show</a></td></tr>';
 
}
function makeSidebarEntry(i) {
  var name = geoXmlDoc.placemarks[i].name;
   if (!name  || (name.length == 0)) name = "marker #"+i;
   // alert(name);
   sidebarHtml += '<tr id="row'+i+'"><td><a href="javascript:kmlClick('+i+');">'+name+'</a></td></tr>';
}

function makeSidebar() {
  sidebarHtml = '<table><tr><td><a href="javascript:showAll();"style="background-color: #FFFF99;">SHOW ALL CLUBS</a></td></tr>';
  var currentBounds = map.getBounds();
// if bounds not yet available, just use the empty bounds object;
if (!currentBounds) currentBounds=new google.maps.LatLngBounds();
if (geoXmlDoc) {
  for (var i=0; i<geoXmlDoc.placemarks.length; i++) {
    if (geoXmlDoc.placemarks[i].polygon) {
      if (currentBounds.intersects(geoXmlDoc.placemarks[i].polygon.bounds)) {
         makeSidebarPolygonEntry(i);
      }
    }
    if (geoXmlDoc.placemarks[i].polyline) {
      if (currentBounds.intersects(geoXmlDoc.placemarks[i].polyline.bounds)) {
         makeSidebarPolylineEntry(i);
      }
    }
    if (geoXmlDoc.placemarks[i].marker) {
      if (currentBounds.contains(geoXmlDoc.placemarks[i].marker.getPosition())) {
         makeSidebarEntry(i);
      }
    }
  }
}
  sidebarHtml += "</table>";
  document.getElementById("sidebar").innerHTML = sidebarHtml;
}

function useTheData(doc){
  var currentBounds = map.getBounds();
  if (!currentBounds) currentBounds=new google.maps.LatLngBounds();
  // Geodata handling goes here, using JSON properties of the doc object
  sidebarHtml = '<table><tr><td><a href="javascript:showAll();">Show All</a></td></tr>';
//  var sidebarHtml = '<table>';
  geoXmlDoc = doc[0];
  for (var i = 0; i < geoXmlDoc.placemarks.length; i++) {
    // console.log(doc[0].markers[i].title);
    var placemark = geoXmlDoc.placemarks[i];
    if (placemark.polygon) {
      if (currentBounds.intersects(placemark.polygon.bounds)) {
        makeSidebarPolygonEntry(i);
      }
      var normalStyle = {
          strokeColor: placemark.polygon.get('strokeColor'),
          strokeWeight: placemark.polygon.get('strokeWeight'),
          strokeOpacity: placemark.polygon.get('strokeOpacity'),
          fillColor: placemark.polygon.get('fillColor'),
          fillOpacity: placemark.polygon.get('fillOpacity')
          };
      placemark.polygon.normalStyle = normalStyle;

      highlightPoly(placemark.polygon, i);
    }
    if (placemark.polyline) {
      if (currentBounds.intersects(placemark.polyline.bounds)) {
         makeSidebarPolylineEntry(i);
      }
      var normalStyle = {
          strokeColor: placemark.polyline.get('strokeColor'),
          strokeWeight: placemark.polyline.get('strokeWeight'),
          strokeOpacity: placemark.polyline.get('strokeOpacity')
          };
      placemark.polyline.normalStyle = normalStyle;

      highlightPoly(placemark.polyline, i);
    }
    if (placemark.marker) {
      if (currentBounds.contains(placemark.marker.getPosition())) {
         makeSidebarEntry(i);
      }
    }

/*    doc[0].markers[i].setVisible(false); */
  }
  sidebarHtml += "</table>";
  document.getElementById("sidebar").innerHTML = sidebarHtml;
};
            


        </script>

0 个答案:

没有答案