<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
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |