Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
  <head>
    <title>Yandex Map API</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.2.1/lodash.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <meta charset=utf-8 />
    <script src="http://api-maps.yandex.ru/2.1-dev/?lang=ru-RU&load=package.full" type="text/javascript"></script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>
 
#map{
  width:600px;
  height: 500px;
}
 
/**
* Переменные: 
* map - карта 
* selectedShape - выделеный полигон 
* geoQuery - обьекты которые попадают в выбоку, клаÑÑ ymaps.geoQuery
*/
var map, selectedShape, geoQuery;
// Координаты полигона
var polygonBounds = [
  [48.4545968, 35.0563474], 
  [48.4530993, 35.0834043], 
  [48.4768317, 35.0622041]
];
// Координаты 2 точек
var points = [
  {lat:48.4535968, lng:35.0363474},
  {lat:48.4439968, lng:35.0903274}
];
// Ð˜Ð½Ð¸Ñ†Ð¸Ð°Ð»Ð¸Ð·Ð°Ñ†Ð¸Ñ ÐºÐ°Ñ€Ñ‚Ñ‹
ymaps.ready(initYMap);
function initYMap(){
  map = new ymaps.Map('map', {
    center: [48.468020, 35.063892],
    zoom: 13,
    controls:[]
  });
  map.controls.add('zoomControl', {position:{ left: 10, top: 10 }});
  map.controls.add('fullscreenControl');
  
  // При клике на пуÑтое меÑто карты, оÑтанавливаем редактирование выделенного полигона
  map.events.add(['click'], function(){
    if(selectedShape && selectedShape.editor && selectedShape.editor.stopEditing){
      selectedShape.editor.stopEditing();
    }
    selectedShape = null;
  });
  
  // ÐиÑуем полигон
  drawPolygon(polygonBounds);
  
  // ÐиÑуем маркеры
  // _.map() - Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ lo-dash, вернёт [placemark1, placemark2]
  // placemark1 и placemark2 - тип: ymaps.Placemark
  var placemarks = _.map(points, function(point){
    return drawPlacemark(point);
  });
  
  geoQuery = ymaps.geoQuery(placemarks);
  
}
function drawPolygon(bounds){
  var polygon = new ymaps.Polygon([bounds, []], {}, {
    editorDrawingCursor: "crosshair",
    fillColor: '#4B0082',
    strokeColor: '#4B0082',
    strokeWidth: 2,
    fillOpacity: 0.2
  });
  
  // при клике на плигон, включаем его редактирование
  polygon.events.add(['click', 'geometrychange'], function(e){
    if(e.get('type') == 'click'){
      selectedShape = e.get('target');
      selectedShape.editor.startEditing();
      console.log('click', selectedShape.geometry.getCoordinates());
    }
     
  }); 
  
  polygon.editor.geometry.events.add('pixelgeometrychange', function(e1){
    var objectsInsidePolygon = geoQuery.searchInside(e1.originalEvent.target);
    objectsInsidePolygon.setOptions('preset', 'islands#greenDotIcon');
    // ОÑтавшиеÑÑ Ð¾Ð±ÑŠÐµÐºÑ‚Ñ‹ - краÑными.
    geoQuery.remove(objectsInsidePolygon).setOptions('preset', 'islands#redDotIcon');
  });
  
  map.geoObjects.add(polygon);
}
function drawPlacemark(point){
  var placemark = new ymaps.Placemark([point.lat, point.lng], {}, {
    preset: 'islands#redDotIcon'
  });
  map.geoObjects.add(placemark);
  return placemark;
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers