जियोजोन का उपयोग करके Google मानचित्र में infowindow और कस्टम आइकन जोड़ें

Question 1

मेरे पास Web2py एप्लिकेशन में यह सरल Google मानचित्र है। मैं फीचर आइकन चुनने के लिए स्विच की तरह कुछ लागू करना चाहता हूं और जेसन टेक्स्ट से एक जानकारीविंडो भी सेट करना चाहता हूं।

कोई जानता है कि मैं यह कैसे कर सकता हूँ?

var map;

function initMap() {
    map = new google.maps.Map(document.getElementById("events_map"), {
        center: {lat: 45.070309, lng: 7.686580999999933},
        zoom: 13,
        mapTypeControl: false
    });

    var largeInfowindow = new google.maps.InfoWindow();

    google.maps.event.addListener(map, 'idle', function() {
        var ne = map.getBounds().getNorthEast();
        var north = ne.lat();
        var east = ne.lng();
        var sw = map.getBounds().getSouthWest();
        var south = sw.lat();
        var west = sw.lng();
        var queryString = '?east=' + east + '&west=' + west + '&south=' + south + '&north=' + north + '&zoom=8'
        map.data.loadGeoJson('{{=URL('f_ajax', 'get_locations_g')}}' + queryString);
    });
}

json data has a category field that can have 1, 2, 3, or 4 as value.
So with a switch I would like to set the icon in this way:
var icon;
switch (feature.properties.category) {
    case '1':
        icon = greenIcon;
        break;
    case '2':
        icon = bluIcon;
        break;
    case '3':
        icon = redIcon;
        break;
    case '4':
        icon = blackIcon;
        break;
}

लेकिन मुझे नहीं पता कि कैसे।

इन्फोविंडो के लिए, क्या मैं इस फ़ंक्शन का उपयोग कर सकता हूं और जेसन फ़ील्ड 'विवरण' को कैसे प्रदर्शित कर सकता हूं?

धन्यवाद।

function populateInfoWindow(marker, infowindow) {
    // Check to make sure the infowindow is not already opened on this marker.
    if (infowindow.marker != marker) {
        infowindow.marker = marker;
        infowindow.setContent("<div><a href='" + marker.link + "'>" + marker.title + '</a></div>');
        infowindow.open(map, marker);
        // Make sure the marker property is cleared if the infowindow is closed.
        infowindow.addListener('closeclick', function() {
            infowindow.marker = null;
        });
    }
}

javascript google-maps-api-3 web2py geojson

0

Gael Princivalle 21 सितंबर 2016, 23:49

Answer

आइकन के लिए आपको सेट स्टाइल-फ़ंक्शन का उपयोग करना होगा।

आइकन वाली कोई वस्तु यहां सबसे आसान तरीका होना चाहिए

  map.data.setStyle(function(feature) {
    return {
      icon:({1:greenIcon,
             2:redIcon,
             3:blueIcon,
             4:blackIcon})[feature.getProperty('category')]
    };
  });

InfoWindow के लिए फ़ंक्शन का उपयोग नहीं किया जा सकता है, क्योंकि क्लिक-हैंडलर में कोई मार्कर उपलब्ध नहीं है, आपको क्लिक किए गए feature के आधार पर InfoWindow के विकल्प सेट करने होंगे।

  map.data.addListener('click', function(event) {
    largeInfowindow.setOptions({
      map     : map,
      position: event.feature.getGeometry().get(),
      content : '<strong>'+event.feature.getProperty('description')+'</strong>'
    })
  });

डेमो:

function initMap() {
 
  var greenIcon       = 'http://maps.gstatic.com/mapfiles/markers2/icon_green.png',
      redIcon         = 'http://maps.gstatic.com/mapfiles/markers2/marker.png',
      blueIcon        = 'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png',
      blackIcon       = 'http://maps.gstatic.com/mapfiles/markers2/drag_cross_67_16.png',
     
      map             = new google.maps.Map(document.getElementById('map'), {
                          zoom: 4,
                          center: {lat:52.41, lng: 9.74}
                        }),
      largeInfowindow = new google.maps.InfoWindow({pixelOffset:new google.maps.Size(0,-30)});
  
  
  map.data.setStyle(function(feature) {
    return {
      icon:({1:greenIcon,
             2:redIcon,
             3:blueIcon,
             4:blackIcon})[feature.getProperty('category')]
    };
  });
  
  map.data.addListener('click', function(event) {
    largeInfowindow.setOptions({
      map     : map,
      position: event.feature.getGeometry().get(),
      content : '<strong>'+event.feature.getProperty('description')+'</strong>'
    })
  });

  map.data.addGeoJson(json);

}
var json={
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {category:1,description:'Berlin'},
      "geometry": {
        "type": "Point",
        "coordinates": [
          13.392333984375,
          52.53627304145948
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {category:2,description:'Hamburg'},
      "geometry": {
        "type": "Point",
        "coordinates": [
          10.008544921875,
          53.57293832648609
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {category:3,description:'Cologne'},
      "geometry": {
        "type": "Point",
        "coordinates": [
          6.954345703125,
          50.951506094481545
        ]
      }
    }
  ]
};

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

<script async defer
        src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<div id="map"></div>

0

Dr.Molle 22 सितंबर 2016, 04:49

बहुत - बहुत धन्यवाद। यह पूरी तरह से काम करता है। मुझे गूगल मैप्स एपीआई के ऑब्जेक्ट अप्रोच पर अधिक काम करना है।

–

Gael Princivalle

23 सितंबर 2016, 23:10

Question 2

आइकन के लिए आपको सेट स्टाइल-फ़ंक्शन का उपयोग करना होगा।

आइकन वाली कोई वस्तु यहां सबसे आसान तरीका होना चाहिए

  map.data.setStyle(function(feature) {
    return {
      icon:({1:greenIcon,
             2:redIcon,
             3:blueIcon,
             4:blackIcon})[feature.getProperty('category')]
    };
  });

InfoWindow के लिए फ़ंक्शन का उपयोग नहीं किया जा सकता है, क्योंकि क्लिक-हैंडलर में कोई मार्कर उपलब्ध नहीं है, आपको क्लिक किए गए feature के आधार पर InfoWindow के विकल्प सेट करने होंगे।

  map.data.addListener('click', function(event) {
    largeInfowindow.setOptions({
      map     : map,
      position: event.feature.getGeometry().get(),
      content : '<strong>'+event.feature.getProperty('description')+'</strong>'
    })
  });

डेमो:

function initMap() {
 
  var greenIcon       = 'http://maps.gstatic.com/mapfiles/markers2/icon_green.png',
      redIcon         = 'http://maps.gstatic.com/mapfiles/markers2/marker.png',
      blueIcon        = 'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png',
      blackIcon       = 'http://maps.gstatic.com/mapfiles/markers2/drag_cross_67_16.png',
     
      map             = new google.maps.Map(document.getElementById('map'), {
                          zoom: 4,
                          center: {lat:52.41, lng: 9.74}
                        }),
      largeInfowindow = new google.maps.InfoWindow({pixelOffset:new google.maps.Size(0,-30)});
  
  
  map.data.setStyle(function(feature) {
    return {
      icon:({1:greenIcon,
             2:redIcon,
             3:blueIcon,
             4:blackIcon})[feature.getProperty('category')]
    };
  });
  
  map.data.addListener('click', function(event) {
    largeInfowindow.setOptions({
      map     : map,
      position: event.feature.getGeometry().get(),
      content : '<strong>'+event.feature.getProperty('description')+'</strong>'
    })
  });

  map.data.addGeoJson(json);

}
var json={
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {category:1,description:'Berlin'},
      "geometry": {
        "type": "Point",
        "coordinates": [
          13.392333984375,
          52.53627304145948
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {category:2,description:'Hamburg'},
      "geometry": {
        "type": "Point",
        "coordinates": [
          10.008544921875,
          53.57293832648609
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {category:3,description:'Cologne'},
      "geometry": {
        "type": "Point",
        "coordinates": [
          6.954345703125,
          50.951506094481545
        ]
      }
    }
  ]
};

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

<script async defer
        src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<div id="map"></div>

0

Dr.Molle 22 सितंबर 2016, 04:49

बहुत - बहुत धन्यवाद। यह पूरी तरह से काम करता है। मुझे गूगल मैप्स एपीआई के ऑब्जेक्ट अप्रोच पर अधिक काम करना है।

–

Gael Princivalle

23 सितंबर 2016, 23:10

जियोजोन का उपयोग करके Google मानचित्र में infowindow और कस्टम आइकन जोड़ें

1 उत्तर

डेमो:

संबंधित सवाल

नए सवाल