将 Jquery 拖放到 Google 地图 V3
Drag and Drop Jquery to Google Map V3
场景:
我希望能够将项目放入 Google 地图并同时使用搜索框。
将 "New York" (ui.draggable.text()) 列出的可拖动项目拖入 Google 地图,它会在好的地图中拉起纽约中心。
结果:
它有效,但它覆盖了原来的 "Place Search box",我完全失去了搜索框,因为它填充了一张新地图...不知道如何调整下面的代码,所以我保存了所有掉落的项目 + 选项删除并保留搜索框
可在地图上投放 div:
$('.dropit').droppable({
drop: function(event, ui) {
geocoder = new google.maps.Geocoder();
var address = ui.draggable.text();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
var mapOptions = {
// center: ui.draggable.text().geometry.location(),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
//ui.draggable.text() DISPLAY THIS ON MAP
}
});
不确定我是否清楚地理解您的问题,但这是一个示例地图,您可以在其中拖放位置项 和 同时使用“地点搜索”框。
HTML:
<div id="map-canvas"></div>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<ul>
<li>New York, USA</li>
<li>Shanghai, PRC</li>
<li>London, UK</li>
<li>Paris, France</li>
<li>Sydney, Australia</li>
</ul>
JavaScript(拖放):
$("ul li").each(function () {
$(this).draggable({
cursor: 'move',
revert: true
});
});
$('#map-canvas').droppable({
drop: function (event, ui) {
var el = ui.draggable;
codeAddress(el.text());
el.remove();
}
});
JavaScript(地点搜索):
function codeAddress(address) {
geocoder.geocode({
'address': address
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
下面是一个工作演示。
场景:
我希望能够将项目放入 Google 地图并同时使用搜索框。 将 "New York" (ui.draggable.text()) 列出的可拖动项目拖入 Google 地图,它会在好的地图中拉起纽约中心。
结果:
它有效,但它覆盖了原来的 "Place Search box",我完全失去了搜索框,因为它填充了一张新地图...不知道如何调整下面的代码,所以我保存了所有掉落的项目 + 选项删除并保留搜索框
可在地图上投放 div:
$('.dropit').droppable({
drop: function(event, ui) {
geocoder = new google.maps.Geocoder();
var address = ui.draggable.text();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
var mapOptions = {
// center: ui.draggable.text().geometry.location(),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
//ui.draggable.text() DISPLAY THIS ON MAP
}
});
不确定我是否清楚地理解您的问题,但这是一个示例地图,您可以在其中拖放位置项 和 同时使用“地点搜索”框。
HTML:
<div id="map-canvas"></div>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<ul>
<li>New York, USA</li>
<li>Shanghai, PRC</li>
<li>London, UK</li>
<li>Paris, France</li>
<li>Sydney, Australia</li>
</ul>
JavaScript(拖放):
$("ul li").each(function () {
$(this).draggable({
cursor: 'move',
revert: true
});
});
$('#map-canvas').droppable({
drop: function (event, ui) {
var el = ui.draggable;
codeAddress(el.text());
el.remove();
}
});
JavaScript(地点搜索):
function codeAddress(address) {
geocoder.geocode({
'address': address
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
下面是一个工作演示。