loadGeoJson()

Question

के माध्यम से लोड की गई सुविधाओं पर इन्फॉविंडोज बनाना, यदि यह मूल है, तो मैं क्षमा चाहता हूं, लेकिन मेरे पास जावास्क्रिप्ट ज्ञान बहुत सीमित है।

मैं एक नक्शा बना रहा हूं जो मैंने जोजीओएसओएन डेटा लोड किया है जिसे मैंने आर्कगिस में बनाया है, ओग 2ोग्र का उपयोग करके जियोजसन में सुधार किया गया है। मुझे नक्शा लोड हो रहा है और मेरी जियोज़ोन फ़ाइल से पॉइंट मार्कर दिखा रहा है, और मुझे अपने गुणों के आधार पर सुविधाओं पर स्टाइल सेट करने के लिए styleFeature() फ़ंक्शन भी मिला है।

मेरी समस्या यह है कि जब कोई बिंदु सुविधा क्लिक की जाती है तो समस्याएं पॉप अप करने की कोशिश कर रही हैं।

map.data.loadGeoJson('http://www.myurl.com/file.json'); 

map.data.setStyle(styleFeature); 

map.data.addListener('click', function(event) { 
    var myHTML = event.feature.getProperty('Description'); 
    document.getElementById('info-box').innerHTML = myHTML; 
}); 

मैं बजाय क्या करना चाहते हैं क्या एक है:

मैं सफलतापूर्वक एक क्लिक किया सुविधा से जानकारी के साथ एक div की सामग्री को एक घटना श्रोता सेट और अद्यतन करने के लिए कोड का इस्तेमाल किया है घटना में है कि इस तरह की एक infowindow, जो काम नहीं करता है की शुरूआत:

map.data.loadGeoJson('http://www.myurl.com/file.json'); 

map.data.setStyle(styleFeature); 

map.data.addListener('click', function(event) { 
    var myHTML = event.feature.getProperty('Description'); 
    var infowindow = new google.maps.InfoWindow({content: myHTML}); 
}); 

मेरे डाटासेट हजार से अधिक अंक तो infowindows काम नहीं करता है हार्ड-कोड के होते हैं, और मैं किसी भी उदाहरण है कि दिखाने के नहीं देखा है इन्फॉन्डोज़ की सरणी कैसे बनाएं, क्योंकि सुविधाओं में लूप हो रहा है समारोह setStyle() या तो कहा जाता है।

मुझे पता है कि इसे समझने की संभावना, घटनाओं और ऑब्जेक्ट सरणी की कमी के साथ मुझे करना है, लेकिन मैं बस दीवार पर टक्कर मार रहा हूं।

किसी भी मदद की सराहना की जाएगी।

Answer 1

एक क्लिक पर प्रदर्शित करने के लिए infowindow प्राप्त करने के लिए आपको खुले() को कॉल करने की आवश्यकता है।

// global infowindow 
    var infowindow = new google.maps.InfoWindow(); 

    // When the user clicks, open an infowindow 
    map.data.addListener('click', function(event) { 
     var myHTML = event.feature.getProperty("Description"); 
     infowindow.setContent("<div style='width:150px; text-align: center;'>"+myHTML+"</div>"); 
     infowindow.setPosition(event.feature.getGeometry().get()); 
     infowindow.setOptions({pixelOffset: new google.maps.Size(0,-30)}); 
     infowindow.open(map); 
    }); 

working fiddle

कोड स्निपेट:

var infowindow = new google.maps.InfoWindow(); 
 
function gotoFeature(featureNum) { 
 
    var feature = map.data.getFeatureById(features[featureNum].getId()); 
 
    if (!!feature) google.maps.event.trigger(feature, 'changeto', {feature: feature}); 
 
    else alert('feature not found!'); 
 
} 
 

 
function initialize() { 
 
    // Create a simple map. 
 
    features=[]; 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
    zoom: 4, 
 
    center: {lat: -28, lng: 137.883} 
 
    }); 
 
    google.maps.event.addListener(map,'click',function() { 
 
     infowindow.close(); 
 
    }); 
 
    map.data.setStyle({fillOpacity:.8}); 
 
    // Load a GeoJSON from the same server as our demo. 
 
    var featureId = 0; 
 
    google.maps.event.addListener(map.data,'addfeature',function(e){ 
 
     if(e.feature.getGeometry().getType()==='Polygon'){ 
 
      features.push(e.feature); 
 
      var bounds=new google.maps.LatLngBounds(); 
 
      
 
      e.feature.getGeometry().getArray().forEach(function(path){ 
 
      
 
      path.getArray().forEach(function(latLng){bounds.extend(latLng);}) 
 
      
 
      }); 
 
      e.feature.setProperty('bounds',bounds); 
 
      e.feature.setProperty('featureNum',features.length-1); 
 
      
 
      
 
     
 
     } 
 
    }); 
 
    // When the user clicks, open an infowindow 
 
    map.data.addListener('click', function(event) { 
 
      var myHTML = event.feature.getProperty("Description"); 
 
     infowindow.setContent("<div style='width:150px; text-align: center;'>"+myHTML+"</div>"); 
 
      infowindow.setPosition(event.feature.getGeometry().get()); 
 
     infowindow.setOptions({pixelOffset: new google.maps.Size(0,-30)}); 
 
      infowindow.open(map); 
 
    });  
 
    map.data.addGeoJson(googleJSON); 
 
    
 
    
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize); 
 
var googleJSON = { 
 
    "type": "FeatureCollection", 
 
    "features": [ 
 
    { 
 
     "id":0, 
 
     "type": "Feature", 
 
     "properties": { 
 
     "letter": "G", 
 
     "color": "blue", 
 
     "rank": "7", 
 
     "ascii": "71", 
 
     "Description": "the letter G" 
 
     }, 
 
     "geometry": { 
 
     "type": "Point", 
 
     "coordinates": [123.61, -22.14] 
 
      
 
     } 
 
    }, 
 
    { 
 
     "id":1, 
 
     "type": "Feature", 
 
     "properties": { 
 
     "letter": "o", 
 
     "color": "red", 
 
     "rank": "15", 
 
     "ascii": "111", 
 
     "Description": "the first letter o"   
 
     }, 
 
     "geometry": { 
 
     "type": "Point", 
 
     "coordinates": [128.84, -25.76] 
 
     } 
 
    }, 
 
    { 
 
     "id":2, 
 
     "type": "Feature", 
 
     "properties": { 
 
     "letter": "o", 
 
     "color": "yellow", 
 
     "rank": "15", 
 
     "ascii": "111", 
 
     "Description": "the second letter o" 
 
     }, 
 
     "geometry": { 
 
     "type": "Point", 
 
     "coordinates": [131.87, -25.76] 
 
     } 
 
    }, 
 
    { 
 
     "id":3, 
 
     "type": "Feature", 
 
     "properties": { 
 
     "letter": "g", 
 
     "color": "blue", 
 
     "rank": "7", 
 
     "ascii": "103", 
 
     "Description": "the letter g" 
 
     }, 
 
     "geometry": { 
 
     "type": "Point", 
 
     "coordinates": [138.12, -25.04] 
 
     } 
 
    }, 
 
    { 
 
     "id":4, 
 
     "type": "Feature", 
 
     "properties": { 
 
     "letter": "l", 
 
     "color": "green", 
 
     "rank": "12", 
 
     "ascii": "108", 
 
     "Description": "the letter l" 
 
     }, 
 
     "geometry": { 
 
     "type": "Point", 
 
     "coordinates": [140.14,-21.04] 
 
     } 
 
    }, 
 
    { 
 
     "id":5, 
 
     "type": "Feature", 
 
     "properties": { 
 
     "letter": "e", 
 
     "color": "red", 
 
     "rank": "5", 
 
     "ascii": "101", 
 
     "Description": "the letter e" 
 
     }, 
 
     "geometry": { 
 
     "type": "Point", 
 
     "coordinates": [144.14, -27.41] 
 
     } 
 
    } 
 
    ] 
 
};

html, body, #map-canvas { 
 
     height: 100%; 
 
     margin: 0px; 
 
     padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?ext=.js"></script> 
 
<div id="map-canvas"></div>