极念网欢迎您!
JS实现百度地图自由标注并保存
作者:翅膀的初衷来源:本站原创发布时间:2014/7/24 22:18:31查看数:60335

百度地图应用越来越受喜欢,开发也极为方便,本文介绍如何用JS通过百度地图 API接口来实现地图自由标注地标及显示。

我们需要实现以下功能:

1.城市自由定位

2.可以自定创建标注并保存到数据库

3.从数据库加载数据显示到地图

4.自由定义标注的图标

下面正式开始CODEING:

第一步:申请百度地图API KEY。登录百度开发者中心,然后进入 http://lbsyun.baidu.com/apiconsole/key 点创建应用:

申请成功后,访问应用(ak)下面的那串数据就是我们的API KEY!

第二步,加载地图,先将百度地图的API文件加载进来:

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的KEY"></script>

然后初始与创建地图:

var map = new BMap.Map("allmap"); // 创建Map实例 map.centerAndZoom('长沙', 13); // 初始化地图,设置中心点坐标和地图级别 map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件 map.enableScrollWheelZoom(); //启用滚轮放大缩小 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
\

如果我们需要切换地图,只要执行下面的代码就行了:

map.centerAndZoom('城市名', 13);

添加标注:

var p = new BMap.Point('经度','纬度'); var marker = new BMap.Marker(p);//创建一个标准 map.addOverlay(marker);//将标注添加到地图 marker.enableDragging();//设置标注可以移动 var label = new BMap.Label('这是我添加的', { offset: new BMap.Size(25, 0) }); label.setStyles({ border: "solid 1px #00f", color: "#00f", padding: "0 5px" }); marker.setLabel(label); //这里是添加一个文字 ,显示在标注的右边 var icon = new BMap.Icon('images/k.gif', new BMap.Size(20, 20), { anchor: new BMap.Size(10, 22) }); marker.setIcon(icon); //自定义图标,如果不需要自定义,可以删掉

标注添加完成后,我们怎么将结果保存到数据库呢?我们只要遍历标注对象,然后通过marker.getPosition()取到它的经纬度,保存即可:

上完整代码(保存下来即可直接运行,数据库数据操作略)

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>地图标记</title> <script src="Scripts/json2.js"></script> <script src="http://www.jiniannet.com/Resources/Script/JQuery.js"></script> <style type="text/css"> body, html, #allmap { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; } #bar { width:380px; position:absolute; background:#000000; left:50%; height:25px; border:solid 1px #808080; top:20px; background:#f5f5f5; padding:10px; margin-left:-195px; } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的API"></script> <script> function addMarker(id, name, x, y) { var p = new BMap.Point(x, y); var marker = new BMap.Marker(p);//, px = map.pointToPixel(p); M.addOverlay(marker); marker.enableDragging(); marker.setTitle(id); var label = new BMap.Label(name, { offset: new BMap.Size(25, 0) }); label.setStyles({ border: "solid 1px #00f", color: "#00f", padding: "0 5px" }); marker.setLabel(label); var icon = new BMap.Icon('images/k.gif', new BMap.Size(20, 20), { anchor: new BMap.Size(10, 22) }); marker.setIcon(icon); var markerMenu = new BMap.ContextMenu(); var ci = config.marker.index; markerMenu.addItem(new BMap.MenuItem('重命名', function () { var win = new BMap.InfoWindow('<input type="text" value="' + label.getContent() + '" id="txt_rename_' + ci + '" maxlength="20" style="width:100px" /> <input type="button" onclick="rename(' + ci + ')" value="重命名" />'); marker.openInfoWindow(win); }, 100)); markerMenu.addItem(new BMap.MenuItem('移除', function () { //alert('AJAX移除操作'); //config.save = false; if(parseInt(id)>0){ $.ajax({ url:'Delete.aspx', type:"post", data:"id="+id, success:function(r){ if(r=="ok"){ config.marker.remove(ci); }else{ alert(r); } } }); }else{ config.marker.remove(ci); } }, 100)); marker.addContextMenu(markerMenu); config.marker.add(marker); } var config = { runn: false, //是否开始拾取坐标 marker: { list: [], add: function (data) { config.marker.index++; config.marker.list.push(data); config.save = false; }, remove: function (i) { config.marker.list[i].remove(); config.marker.list[i] = null; }, index:0 }, save: true //当前设置是否已保存 }; function save() { var data = []; var html = ''; for (var i = 0; i < config.marker.list.length; i++) { var marker = config.marker.list[i]; if (marker) { data.push({ id: parseInt(marker.getTitle()), title: marker.getLabel().getContent(), x: marker.getPosition().lng, y: marker.getPosition().lat }); html += ''; } } $.ajax({ url:'Save.aspx', type:"post", data:"data="+escape(JSON.stringify(data)), success:function(r){ if(r=="ok"){ config.save = true; alert('保存成功'); }else{ alert(r); } } }); } function rename(i) { //重命名 if (config.marker.list[i]) { var t = $("#txt_rename_" + i).val(); config.marker.list[i].getLabel().setContent(t); M.closeInfoWindow(M.getInfoWindow()); config.save = false; } } $(function () { var w = $(window).width(); var h = $(window).height(); var map = new BMap.Map("allmap"); // 创建Map实例 map.centerAndZoom($("#city").val(), 13); // 初始化地图,设置中心点坐标和地图级别 map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件 map.enableScrollWheelZoom(); //启用滚轮放大缩小 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 var contextMenu = new BMap.ContextMenu();//添加右键菜单 var txtMenuItem = [ { text: '放大', callback: function () { map.zoomIn() } }, { text: '缩小', callback: function () { map.zoomOut() } }, { text: '放置到最大级', callback: function () { map.setZoom(18) } }, { text: '查看全国', callback: function () { map.setZoom(4) } }, { text: '在此添加标注', callback: function (p) { addMarker('0', '未命名', p.lng, p.lat); } } ]; for (var i = 0; i < txtMenuItem.length; i++) { contextMenu.addItem(new BMap.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100)); if (i == 1 || i == 3) { contextMenu.addSeparator(); } } map.addContextMenu(contextMenu);设置的 $('#begin').click(function () { // if (!document.getElementById('begin').disabled) { map.centerAndZoom($("#city").val(), 13); } }); window.M = map; //加载数据库中保存的数据 $.ajax({ url:'Output.aspx', type:"get", success:function(json){ for(var i=0;i<json.length;i++){ addMarker(json[i].id,json[i].title, json[i].x,json[i].y); } } }); }); // 百度地图API功能 </script> </head> <body> <div id="allmap"></div> <div id="bar"> 城市:<input type="text" id="city" value="长沙" /> <input type="button" id="begin" value="定位" /> <input type="button" id="save" value="保存" onclick="save()" /> <input type="button" id="reset" value="复位" /> </div> </body> </html>

最后我们来看结果图: