baidu map百度地图添加点标注
1、使用editplus创建一个Html Page，会生成如下内容：<!doctype html><html><head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title></head><body></body></html>
3、在body之间，声明一个百度地图的容器，比如div，<div id="mymap"></div>
5、添加坐标数组信息，编写批量添加点标注的js方法，该坐标数盲褓梆尺组是作者随机添加的// 编写自定义函数,创建标注 function addMarker(point, i, name) { var myIcon = new BMap.Icon("http://192.168.188.69:10001/img/marker.png", new BMap.Size(20, 26), { }); var marker = new BMap.Marker(point, { icon: myIcon }); map.addOverlay(marker); marker.setLabel(getNumberLabel(i, name)); marker.setTitle(name); marker.enableDragging(); marker.addEventListener("click", function (e) { var input = document.getElementById("input"); input.value = marker.getTitle(); // 修改文本框的内容 input.select(); // 选中文本 document.execCommand("copy"); // 执行浏览器复制命令 alert("复制成功"); }); }
7、保存文件，双击保存的文件，即可查看效果
9、修改添加坐标方法，把列表的数据同时添加进去，同时添加点击定位坐标var html = ''; for (即枢潋雳var i = 0; i < points.length; i++) { var point = new BMap.Point(points[i][0], points[i][1]); addMarker(point, points[i][3], points[i][2]); html += '<tr onclick="moveCenter(' + points[i][0] + ',' + points[i][1] + ')">'; html += '<td>' + points[i][3] + '</td>'; html += '<td>' + points[i][2] + '</td>'; html += '<td>' + points[i][0] + '</td>'; html += '<td>' + points[i][1] + '</td>'; html += '</tr>'; } document.getElementById("tmpData").innerHTML = html;//重置地图中心点 function moveCenter(lat, lng) { var point = new BMap.Point(lat, lng); map.panTo(point); setTimeout(function () { map.setZoom(16); // setZoom 方法，负责设置级别，只有停留几秒，才能看到效果 }, 2000); }
