현재 Google지도가 포함 된 웹 응용 프로그램을 개발 중입니다. GMAP3이라는 Jquery와 lib를 사용하여 개발 중입니다. 원하면 여기를보세요. http://gmap3.net/ 운전 방향 기능과 반경 순환 기능을 만들었습니다. 자바 스크립트 메뉴를 사용하여 함수를 실행합니다. 예를 들어, orgin 위치를 마우스 오른쪽 버튼으로 클릭하여 배치하고 메뉴를 사용하여 place orgin 위치를 선택할 수 있습니다. 그 부분은 올바르게 작동합니다. 마커가 그 위치에 추가되고 또한 그 위치를 중심으로하는 원이 추가됩니다. 하지만, 운전 방향 목적지 마커를 움직이는 경우 원은 여전히 그 자리에 있습니다. 나는 이것에 약간의 도움이 정말로 필요하다. 감사.Google지도 radius circle
자바 스크립트 코드 : 나는 gmap3 플러그인에서 해당 구문 어떻게 될지 모르지만 당신이 마커를 드래그 경우가 재배치 될하려는 경우 마커 원을 바인드 할 필요가
/**************************************************
* Menu
**************************************************/
function Menu($div){
var that = this,
ts = null;
this.$div = $div;
this.items = [];
// create an item using a new closure
this.create = function(item){
var $item = $('<div class="item '+item.cl+'">'+item.label+'</div>');
$item
// bind click on item
.click(function(){
if (typeof(item.fnc) === 'function'){
item.fnc.apply($(this), []);
}
})
// manage mouse over coloration
.hover(
function(){$(this).addClass('hover');},
function(){$(this).removeClass('hover');}
);
return $item;
};
this.clearTs = function(){
if (ts){
clearTimeout(ts);
ts = null;
}
};
this.initTs = function(t){
ts = setTimeout(function(){that.close()}, t);
};
}
// add item
Menu.prototype.add = function(label, cl, fnc){
this.items.push({
label:label,
fnc:fnc,
cl:cl
});
}
// close previous and open a new menu
Menu.prototype.open = function(event){
this.close();
var k,
that = this,
offset = {
x:0,
y:0
},
$menu = $('<div id="menu"></div>');
// add items in menu
for(k in this.items){
$menu.append(this.create(this.items[k]));
}
// manage auto-close menu on mouse hover/out
$menu.hover(
function(){that.clearTs();},
function(){that.initTs(3000);}
);
// change the offset to get the menu visible (#menu width & height must be defined in CSS to use this simple code)
if (event.pixel.y + $menu.height() > this.$div.height()){
offset.y = -$menu.height();
}
if (event.pixel.x + $menu.width() > this.$div.width()){
offset.x = -$menu.width();
}
// use menu as overlay
this.$div.gmap3({
action:'addOverlay',
latLng: event.latLng,
content: $menu,
offset: offset
});
// start auto-close
this.initTs(5000);
}
// close the menu
Menu.prototype.close = function(){
this.clearTs();
this.$div.gmap3({action:'clear', name:'overlay'});
}
/**************************************************
* Main
**************************************************/
$(function(){
var $map = $('#googleMap'),
menu = new Menu($map),
current, // current click event (used to save as start/end position)
m1, // marker "from"
m2, // marker "to"
center = [48.85861640881589, 2.3459243774414062];
// update marker
function updateMarker(marker, isM1){
if (isM1){
m1 = marker;
} else {
m2 = marker;
}
updateDirections();
}
function Startdistancewidget()
{
$map.gmap3({
action: 'addCircle',
circle:{
options:{
center: current.latLng,
radius : 75000,
fillColor : "Green",
strokeColor : "White"
}
}
})
}
function Finishdistancewidget()
{
$map.gmap3({
action: 'addCircle',
circle:{
options:{
center: current.latLng,
radius : 75000,
fillColor : "Red",
strokeColor : "White"
}
}
})
}
// add marker and manage which one it is (A, B)
function addMarker(isM1){
// clear previous marker if set
var clear = {action:'clear', name:'marker', tag:''};
if (isM1 && m1) {
clear.tag = 'from';
$map.gmap3(clear);
} else if (!isM1 && m2){
clear.tag = 'to';
$map.gmap3(clear);
}
// add marker and store it
$map.gmap3({
action:'addMarker',
latLng:current.latLng,
options:{
draggable:true,
icon:new google.maps.MarkerImage('images/icon_big_' + (isM1 ? 'start' : 'stop') + '.png')
},
tag: (isM1 ? 'from' : 'to'),
events: {
dragend: function(marker){
updateMarker(marker, isM1);
}
},
callback: function(marker){
updateMarker(marker, isM1);
}
});
}
// function called to update direction is m1 and m2 are set
function updateDirections(){
if (!(m1 && m2)){
return;
}
$map.gmap3({
action:'getRoute',
options:{
origin:m1.getPosition(),
destination:m2.getPosition(),
travelMode: google.maps.DirectionsTravelMode.DRIVING
},
callback: function(results){
if (!results) return;
$map.gmap3({ action: 'setDirections', directions:results});
}
});
}
// MENU : ITEM 1
menu.add('Allign start position here', 'itemA',
function(){
menu.close();
addMarker(true);
Startdistancewidget();
});
// MENU : ITEM 2
menu.add('Allign checkpoint position here', 'itemB',
function(){
menu.close();
addMarker(false);
})
// MENU : ITEM 3
menu.add('Allign finish position here', 'itemC separator',
function(){
menu.close();
addMarker(false);
Finishdistancewidget();
})
// MENU : ITEM 4
menu.add('Zoom in', 'zoomIn',
function(){
var map = $map.gmap3('get');
map.setZoom(map.getZoom() + 1);
menu.close();
});
// MENU : ITEM 5
menu.add('Zoom out', 'zoomOut',
function(){
var map = $map.gmap3('get');
map.setZoom(map.getZoom() - 1);
menu.close();
});
// MENU : ITEM 6
menu.add('Center here', 'centerHere',
function(){
$map.gmap3('get').setCenter(current.latLng);
menu.close();
});
// INITIALIZE GOOGLE MAP
$map.gmap3(
{ action: 'init',
options:{
center:center,
zoom: 5
},
events:{
rightclick:function(map, event){
current = event;
menu.open(current);
},
click: function(){
menu.close();
},
dragstart: function(){
menu.close();
},
zoom_changed: function(){
menu.close();
}
}
},
// add direction renderer to configure options (else, automatically created with default options)
{ action:'addDirectionsRenderer',
preserveViewport: true,
markerOptions:{
visible: false
}
},
// add a direction panel
{ action:'setDirectionsPanel',
id : 'directions'
}
);
});