个人中心
文章发布
退出
作者热门文章
- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
27
4
我正在开发一个使用 Google Maps v3 的项目，该项目将允许用户拖放随机放置的标记(用 php 生成的数量、坐标和标签)。
我想要移动标记的纬度和经度来更新页面上的 html 输入字段。不幸的是，我对 js 了解不够，无法通过使用数组和/或“可变变量”以有效的方式为每个标记赋予唯一标识。
到目前为止，这是我的代码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function initialize()
{
var latlng = new google.maps.LatLng(39.3939,-119.861);
var myOptions =
{
zoom: 17,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
// Set Border Coords
var BorderCoords =
[
new google.maps.LatLng(39.3952726888,-119.85922848),
new google.maps.LatLng(39.3925273112,-119.85922848),
new google.maps.LatLng(39.3925273112,-119.86277152),
new google.maps.LatLng(39.3952726888,-119.86277152)
];
// Define Border
Border = new google.maps.Polygon
({
map: map,
paths: BorderCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2
});
// Set marker coords
var MarkerCoords =
[
[39.3930761,-119.8612324],
[39.3947606,-119.8617452],
[39.3948516,-119.8619689],
[39.3929412,-119.859542],
[39.3947902,-119.8601571],
[39.3940501,-119.8593369]
];
// Set marker properties
var MarkerProp =
[
["Red","A"],
["Red","B"],
["Red","C"],
["Blue","A"],
["Blue","B"],
["Blue","C"]
];
// Define marker coords
for (var i = 0; i < MarkerCoords.length; i++)
{
var markers = new google.maps.Marker
({
map: map,
position: new google.maps.LatLng(MarkerCoords[i][0],MarkerCoords[i][1]),
clickable: true,
draggable: true,
icon: 'img/icons/'+MarkerProp[i][0]+'/letter_'+MarkerProp[i][1]+'.png'
});
google.maps.event.addListener(markers, "dragend", function()
{
//These variables will not work
//var latstr = eval('lat_'+MarkerProp[i][0]+'_'+MarkerProp[i][1]);
//var lngstr = eval('lng_'+MarkerProp[i][0]+'_'+MarkerProp[i][1]);
//var lat = document.getElementById(latstr);
//var lng = document.getElementById(lngstr);
//these lat/lng variables work for only one set of input fields
var lat = document.getElementById('lat_Blue_C');
var lng = document.getElementById('lng_Blue_C');
var coords = this.getPosition()
lat.value = coords.lat();
lng.value = coords.lng();
});
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:700px; height:400px"></div>
<br/>
<input id="lat_Red_A" type="text">
<input id="lng_Red_A" type="text">
<br/>
<input id="lat_Red_B" type="text">
<input id="lng_Red_B" type="text">
<br/>
<input id="lat_Red_C" type="text">
<input id="lng_Red_C" type="text">
<br/>
<input id="lat_Blue_A" type="text">
<input id="lng_Blue_A" type="text">
<br/>
<input id="lat_Blue_B" type="text">
<input id="lng_Blue_B" type="text">
<br/>
<input id="lat_Blue_C" type="text">
<input id="lng_Blue_C" type="text">
<br/>
</body>
</html>
最佳答案
答案在这里。根据您的标记属性和您输入字段 ID 的访问权限定义自定义 ID:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function initialize()
{
var latlng = new google.maps.LatLng(39.3939,-119.861);
var myOptions =
{
zoom: 17,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
// Set Border Coords
var BorderCoords =
[
new google.maps.LatLng(39.3952726888,-119.85922848),
new google.maps.LatLng(39.3925273112,-119.85922848),
new google.maps.LatLng(39.3925273112,-119.86277152),
new google.maps.LatLng(39.3952726888,-119.86277152)
];
// Define Border
Border = new google.maps.Polygon
({
map: map,
paths: BorderCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2
});
// Set marker coords
var MarkerCoords =
[
[39.3930761,-119.8612324],
[39.3947606,-119.8617452],
[39.3948516,-119.8619689],
[39.3929412,-119.859542],
[39.3947902,-119.8601571],
[39.3940501,-119.8593369]
];
// Set marker properties
var MarkerProp =
[
["Red","A",],
["Red","B"],
["Red","C"],
["Blue","A"],
["Blue","B"],
["Blue","C"]
];
// Define marker coords
for (var i = 0; i < MarkerCoords.length; i++)
{
var markers = new google.maps.Marker
({
map: map,
position: new google.maps.LatLng(MarkerCoords[i][0],MarkerCoords[i][1]),
clickable: true,
draggable: true,
//define a custom id based on marker properties
my_id: MarkerProp[i][0] +"_"+MarkerProp[i][1],
icon: 'img/icons/'+MarkerProp[i][0]+'/letter_'+MarkerProp[i][1]+'.png'
});
google.maps.event.addListener(markers, "dragend", function()
{
//These variables will not work
//var latstr = eval('lat_'+MarkerProp[i][0]+'_'+MarkerProp[i][1]);
//var lngstr = eval('lng_'+MarkerProp[i][0]+'_'+MarkerProp[i][1]);
//var lat = document.getElementById(latstr);
//var lng = document.getElementById(lngstr);
//get the id of the marker
var marker_id = this.my_id;
//match the fields to update
var lat = document.getElementById('lat_' + marker_id);
var lng = document.getElementById('lng_' + marker_id);
var coords = this.getPosition()
lat.value = coords.lat();
lng.value = coords.lng();
});
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:700px; height:400px"></div>
<br/>
<input id="lat_Red_A" type="text">
<input id="lng_Red_A" type="text">
<br/>
<input id="lat_Red_B" type="text">
<input id="lng_Red_B" type="text">
<br/>
<input id="lat_Red_C" type="text">
<input id="lng_Red_C" type="text">
<br/>
<input id="lat_Blue_A" type="text">
<input id="lng_Blue_A" type="text">
<br/>
<input id="lat_Blue_B" type="text">
<input id="lng_Blue_B" type="text">
<br/>
<input id="lat_Blue_C" type="text">
<input id="lng_Blue_C" type="text">
<br/>
</body>
</html>
关于javascript - 谷歌地图 v3 : need multiple draggable markers to update HTML input fields，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6510781/
27
4
0
更新: See latest updates at the bottom. 原装 我有 flutter Draggable 和 DragTarget 小部件，它们正在工作，但在放置 DragTarge
我有下面的板。有一个覆盖( Stack )的 2 x 10 小部件，一些透明的小部件是 DragTargets在它们之上，相同的宽度和高度有 Draggable . Draggable那些是包含图像的
当前输出 预期输出 正如我们在第一张图片中看到的，可拖动的 ul li 位于可放置区域的右侧。 当我从数据库中获取内容时，我将在可拖动的 ul 中拥有 n 个元素。 但是当我尝试将 height :
对 jquery 有点陌生，我正在使用可拖动和可放置的东西。我有两个可拖动对象和一个可放置对象。我不太清楚如何让它根据我放置的盒子做不同的事情。这是我的 jquery: $(funct
我在拖动列表中有一个项目池，它使用 connectToSortable 选项连接到一个可排序对象。现在我想从这个排序列表中删除一些项目并将它们移回拖动列表。有点像撤消。假设用户将大约 5 个项目移动到
当使用 jQuery UI draggable+sortable 时，draggable 元素在放入 sortable 时会丢失它的 css。这是我的代码，这是一个 js fiddle demo 尝试
我正在使用 jQuery 构建一个座位应用程序。我的 table 周围有椅子，可能有客人坐在椅子上。每个表格都有一个可拖动的包装 div。 table 里面有任意数量的椅子分区。客人可以在任何椅子座位
这是我从 http://jqueryui.com/demos/draggable/ 中获取的代码 jQuery UI Draggable - Default functionalit
我在使用 Vue.js 和 VueDraggable 库时遇到问题 ( https://github.com/SortableJS/Vue.Draggable )这是一个代码示例:
我使用 jQuery UI 制作了一个可拖动对象，并将帮助器选项设置为“克隆”。如果我开始拖动元素，则会创建克隆，并且它会按预期工作，此外，初始元素中应用的类不会传递给克隆。如果我改为使用辅助选项的函
根据 jQuery UI 文档，将 addClasses 选项设置为 false“将阻止将 ui-draggable 类添加到”可拖动元素: http://api.jqueryui.com/dragg
使用 jQuery Draggable 如何限制可拖动对象被拖动 仅在一个方向 ? 即当 axis: 'y' 时只有顶部或只有底部 并且只有在 axis: 'x' 时才向左或仅向右 这意味着如果我想要
我试图包含我的可拖动元素，这样它就不能被拖动到可查看窗口之外，如果用户位于页面顶部，这种方法效果很好，但是如果你向下滚动，那么它就会把一切搞乱. 我该怎么做？ $(".chat-wrapper > l
我有几个draggable & droppable我页面上的元素，它们具有 accept 属性。 目前我的代码设置如下: $(".answer." + answer).draggable({
我正在做一个小项目，并且使用 jquery 的 draggable 有一个有趣的遏制问题。 : 基本上，我有两个 div - 顶部和底部。然后，我有第三个 div，它是 .draggable({})，
如何防止用户将元素拖到窗口之外？ elm.css({ top : $(window).scrollTop() + ($(window).height() - elm.height())
我有一个问题需要你帮我解决。我有两个这样的列表。 itemA itemB Add Item itemC Add Item 这里的问题是当我将 itemC 拖动到
我有一个 jQuery Draggable() 函数，并且在拖动时基于 if 执行几个其他函数。像这样的事情: $("div.element").draggable({ drag: funct
我有一个可拖动的 div。现在，我希望该 div 粘在浏览器窗口的边框上。这可能吗？或者也许有一些扩展插件可以实现这一点？ 最佳答案 由于我无法模仿 jsfiddle 框架中的 window，因此我将
背景 我正在构建一个 meteor 应用程序，在其中保存相应 div 的对象位置和大小。当再次访问此页面时，我重新创建所有 div 并适本地重新填充对象大小和位置。我正在重新填充 div 和相应的对象
我是一名优秀的程序员,十分优秀！