高德地图API+JQuery+JSon构建的异步活点地图初级版

产生把照片点在地图上这个想法已经近一年了，最近终于有机会将其付诸实践，也算是婚后忙碌时光告一段落的标志吧w

我把网站命名为“猫&鱼的异步活点地图”，哈利波特读者应该都懂吧w最初计划的是自制地图，但查过之后感觉工程量过于巨大，所以选择了调用高德地图的API，考虑到安全，地图标记点的数据没有使用数据库，简单地将数据存储在JSon文件里。点击地图弹出信息框提示输入图片地址，然后在信息框显示这个页面，最后再把这些点的数据保存到JSon文件里。

接下来介绍技术细节

1、html方面：

在html文件引用高德API和JQuery，

<script src="http://webapi.amap.com/maps?v=1.4.0&key=自己申请的API key" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>

在地图所在标签下引用自写的核心代码，我命名为marauder.js
<script type="text/javascript" src="js/marauder.js"></script>

2、json文件方面

分别保存标记点的坐标和关联的照片地址，数据结构如下

{"x":117.744083,"y":34.559554,"add":"http://timeline.catfish.ren/114.html#content"}
3、js方面
运行流程很简单，增加标记点的时候，提示输入此点所关联的网页地址，然后保存地址并显示。
分别用markers、windows、add这三个数组存储点标记、信息框、标记点关联地址，并分别为地图和标记点绑定点击事件，使用JQuery的getJSON()读取JSON文件。
初始化函数如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

//初始化点标记数据
function init() {
console.log("test");
$.getJSON("js/positions.js", function (result) {
$.each(result, function (i, field) {
console.log( "success" );
addMarker(field.x, field.y);
addAdd(field.add);
var pos = markers.length - 1;
addWindow('<iframe src="' + add[pos] + '" frameBorder="0"></iframe>');
//增加点击事件
AMap.event.addListener(markers[pos], 'click', function () {
windows[pos].open(map, markers[pos].getPosition());
});
});
})
.done(function() {
console.log( "second success" );
})
.fail(function() {
console.log( "error" );
})
.always(function() {
console.log( "complete" );
});

1
2
3
4
5
6
7
8

//点击增加点标记，并保存信息框中输入该点指向的图片地址到add[]
var clickMapEventListener = map.on('click', function (e) {
addMarker(e.lnglat.getLng(), e.lnglat.getLat());
addWindow('<iframe id="site" src="" frameborder="0" style="position:relative;width:100%;height:100%;display:none"></iframe>'
+ '<input type="text" id="text1" value="" />'
+ '<input type="button" id="button1" onclick="op()" value="进入" />');
var pos = markers.length - 1;
windows[pos].open(map, markers[pos].getPosition());

1
2
3
4
5
6

//点击事件绑定
AMap.event.addListener(markers[pos], 'click', function () {
windows[pos].open(map, markers[pos].getPosition());
});
});
}

标记点、信息框、关联地址三个数组

1
2
3
4
5
6
7
8
9
10
11

//增加点标记
function addMarker(x, y) {
marker = new AMap.Marker({
map: map,
icon: 'styles/logo.png',
zIndex: 9999999,
position: [x, y]
});
markers[markers.length] = marker;
markers[markers.length - 1].setMap(map);
}

1
2
3
4
5
6
7
8
9

//增加新的信息框
function addWindow(add) {
var infoWindow = new AMap.InfoWindow({
content: add,
//基点指向marker的头部位置
offset: new AMap.Pixel(0, -31)
});
windows[windows.length] = infoWindow;
}

1
2
3
4

//保存关联地址
function addAdd(target) {
add[add.length] = target;
}

向新标记点信息框输入关联地址

1
2
3
4
5
6
7
8
9

//打开网页并保存网页地址
function op() {
document.getElementById("site").style.display = "block";
var target = document.getElementById("text1").value;
document.getElementById("site").src = target;
document.getElementById("text1").style.display = "none";
document.getElementById("button1").style.display = "none";
add[add.length] = target;
}

完整的代码，去网站上看吧，以上w

参考文献：

Blob JavaScript API

JS实现页面HTML内容以另存为的文件形式下载保存

jQuery提交JSON文件至php网页，保存为文档文件

js函数中参数的传递

javascript获取json对象的key名称的两种方法

怎样在网页中加载别的页面

如何记住滚动条的垂直坐标，以便页面提交后还能回到刚才的位置？

jQuery ajax - getJSON() 方法

HTML onclick 事件属性

剪切板的使用(clipboardData.setData)和js中match函数