将一组地区名字在list中显示，同时点击名字的时候可以将对应的经纬度作为参数调用googlemap的函数。
这个例子只完成一部分：
function addlist(mzs,zoom)
{
var $list=document.getElementById("list");
for(i=0;i<mzs.length;i++)
{
$list.innerHTML+="<span style=\"width:200px;\" οnclick=\"alert('ok')\">" ;
$list.innerHTML+=mzs[i].name;
$list.innerHTML+="</span>"
if(i%2==0)
$list.innerHTML += "<br/>";
}
}
mzs是个js对象，ruby对象通过json转换得到的，如下面的cunzhuangs
<script type="text/javascript">
var cunzhuangs=<%=(@cunzhuangs.collect{|s| s.attributes}).to_json %>;
var zoomlarger=10;
</script>
addlist函数可以将mzs里面的数据动态的写入div中。
下面这个例子是提问的时候xieye给出的。放这里参考：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript">
//定义全局变量
var area_arr = [
{name:'北京', x:100, y:200},
{name:'南京', x:300, y:400},
{name:'东京', x:500, y:600}
] ;
//当点击li时，显示某个地区的数据
function alert_data(li){
s = li.innerHTML + ' x:' + li.getAttribute('value_x') + 'y:'+ li.getAttribute('value_y');
alert(s);
}
//显示所有地区，内容由全局变量提供
function display_area() {
var arr = area_arr;
var div = document.getElementById('div1');
var html = '<ul>';
for (var i=0, j = arr.length; i<j ; i++) {
html += '<li value_x="'+arr[i].x + '" value_y="' + arr[i].y + '">' + arr[i].name + '</li>';
}
html += '</ul>';
div.innerHTML = html;
//下面加事件
var lis = div.getElementsByTagName('li');
for (var i=0, j=lis.length;i<j ; i++) {
lis[i].οnclick= function(e){alert_data(this) };
}
}
</script>
</head>
<body>
<div id="div1"></div>
<input type="button" value="显示地区" οnclick="display_area()" />
</body>
</html>
注意：1、最好给li加上a链接，对用户友好
2、不要使用innerText，有浏览器兼容问题。
3、事件也可以直接在html写进去。
4、如果地区不多而且地区名唯一，就可以不给li元素加value_x和value_y属性。而是获取名称后在数组中遍历来找到其经纬度。
5、还有很多种方法可以实现。
这个例子只完成一部分：
function addlist(mzs,zoom)
{
var $list=document.getElementById("list");
for(i=0;i<mzs.length;i++)
{
$list.innerHTML+="<span style=\"width:200px;\" οnclick=\"alert('ok')\">" ;
$list.innerHTML+=mzs[i].name;
$list.innerHTML+="</span>"
if(i%2==0)
$list.innerHTML += "<br/>";
}
}
mzs是个js对象，ruby对象通过json转换得到的，如下面的cunzhuangs
<script type="text/javascript">
var cunzhuangs=<%=(@cunzhuangs.collect{|s| s.attributes}).to_json %>;
var zoomlarger=10;
</script>
addlist函数可以将mzs里面的数据动态的写入div中。
下面这个例子是提问的时候xieye给出的。放这里参考：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript">
//定义全局变量
var area_arr = [
{name:'北京', x:100, y:200},
{name:'南京', x:300, y:400},
{name:'东京', x:500, y:600}
] ;
//当点击li时，显示某个地区的数据
function alert_data(li){
s = li.innerHTML + ' x:' + li.getAttribute('value_x') + 'y:'+ li.getAttribute('value_y');
alert(s);
}
//显示所有地区，内容由全局变量提供
function display_area() {
var arr = area_arr;
var div = document.getElementById('div1');
var html = '<ul>';
for (var i=0, j = arr.length; i<j ; i++) {
html += '<li value_x="'+arr[i].x + '" value_y="' + arr[i].y + '">' + arr[i].name + '</li>';
}
html += '</ul>';
div.innerHTML = html;
//下面加事件
var lis = div.getElementsByTagName('li');
for (var i=0, j=lis.length;i<j ; i++) {
lis[i].οnclick= function(e){alert_data(this) };
}
}
</script>
</head>
<body>
<div id="div1"></div>
<input type="button" value="显示地区" οnclick="display_area()" />
</body>
</html>
注意：1、最好给li加上a链接，对用户友好
2、不要使用innerText，有浏览器兼容问题。
3、事件也可以直接在html写进去。
4、如果地区不多而且地区名唯一，就可以不给li元素加value_x和value_y属性。而是获取名称后在数组中遍历来找到其经纬度。
5、还有很多种方法可以实现。
102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
