87,907
社区成员
发帖
与我相关
我的任务
分享
var markerArr = [{title:"鹊缘鲜花",content:"我的备注",point:"116.735183|39.514914",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}];
var plPoints = [{style:"solid",weight:4,color:"#f00",opacity:0.6,points:["116.702988|39.536064","116.675392|39.499549","116.727422|39.469699","116.77399|39.514246","116.727997|39.553646","116.702701|39.536286","116.701263|39.536064"]}];
alert(plPoints[0].points);
alert(markerArr[0].title);
var title = markerArr[0].title;
var point = plPoints[0].points.join(",");
var sendData = [];
$.ajax({
type: "post",
data: {
title:title,
point:point
},
url: "action/cz_detail.php",
dataType: "JSON",
success: function callback(data) {
}
});
然后后台类似这样。
insert table_a ("A字段","B字段") values (title,point).
如果你并不只一条的话,也可以传递一个 titleArr,PointArr到后台
然后在后台 循环插入
insert table_a ("A字段","B字段") values (titleArr[i],pointArr[i]).
大概这样吧。
var plPoints = [{style:"solid",weight:4,color:"#f00",opacity:0.6,points:["116.702988|39.536064","116.675392|39.499549","116.727422|39.469699","116.77399|39.514246","116.727997|39.553646","116.702701|39.536286","116.701263|39.536064"]}];
alert(plPoints[0].style);
alert(plPoints[0].points);
不过这个points是个数组的话大概要把它 join一下搞成字符串存。
把数据提取出来,用ajax传递到后台去处理。 后台再用sql语句就可以了啊。
insert table_a ("style","points") values (style,points).
asp我不熟悉。后台 我用php的。
var markerArr = [{title:"鹊缘鲜花",content:"我的备注",point:"116.735183|39.514914",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
中间省略其他代码
var plPoints = [{style:"solid",weight:4,color:"#f00",opacity:0.6,points:["116.702988|39.536064","116.675392|39.499549","116.727422|39.469699","116.77399|39.514246","116.727997|39.553646","116.702701|39.536286","116.701263|39.536064"]}
function loaddata() {
var points = new Array();
var odis = document.getElementById("radselectid").value;
var centpoint = map.getCenter();
var objs = eval(jsons);
for(var i=0;i<objs.length;i++){
var newPoint = new BMap.Point(objs[i].lng, objs[i].lat);
var dis = map.getDistance(centpoint,newPoint);
if(new Number(odis)-new Number(dis)>=0){
var tmpmarker = new BMap.Marker(newPoint);
tmpmarker.setTitle("坐标:["+objs[i].lng+","+objs[i].lat+"]");
map.addOverlay(tmpmarker);
(function() {
var thePoint = objs[i];
var opts = {
position : newPoint, // 指定文本标注所在的地理位置
offset : new BMap.Size(-10, -0) //设置文本偏移量
}
var label = new BMap.Label(thePoint.name, opts); // 创建文本标注对象
label.setStyle({
color : "red",
fontSize : "12px",
height : "20px",
lineHeight : "20px",
fontFamily:"微软雅黑"
});
map.addOverlay(label);
tmpmarker.addEventListener("click",function(){
window.location.href=thePoint.url;
});
})();
}
}
}
var jsons = [
{"lng":"114.128686","lat":"22.56122","name":"p1","url":"http://www.baidu.com"},
{"lng":"114.127572","lat":"22.561854","name":"p2","url":"http://www.sina.com"},
{"lng":"114.126674","lat":"22.56067","name":"p3","url":"http://www.google.com"},
{"lng":"114.126117","lat":"22.561437","name":"p4","url":"http://www.taobao.com"},
{"lng":"114.126889","lat":"22.562255","name":"p5","url":"http://www.youku.com"}
];
只能帮你到这儿了。。你自己要调下偏移量。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>搜索</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script type="text/javascript">
// 查询点击方法
function search() {
var addr = document.getElementById("addrpointid").value;
if(addr!="") {
var myGeo = new BMap.Geocoder();
myGeo.getPoint(addr, function(point){
if(point) {
initlng = point.lng;
initlat = point.lat;
map.clearOverlays();
rebuildMark(initlng, initlat);
rebuildResult(buildCircle(initlng, initlat));
}else{
alert("无法定位到该地址,请重新输入详细地址.");
}
}, "");
}else{
map.clearOverlays();
rebuildMark("", "");
rebuildResult(buildCircle("", ""));
}
}
// 拖拽中间节点定位方法
function dragendMarker(newlng, newlat){
map.clearOverlays();
rebuildMark(newlng, newlat);
rebuildResult(buildCircle(newlng, newlat));
}
// 重新生成新的中心标记方法,如果当没有传递新的坐标值,则默认选取当前地图中的中心点为新的点。
// 参数 newlng: 新的纬度坐标值
// 参数 newlat: 新的精度坐标值
function rebuildMark(newlng, newlat) {
var newPoint;
if(newlng==""||newlat==""){
newPoint = map.getCenter();
}else{
newPoint = new BMap.Point(newlng, newlat);
}
map.centerAndZoom(newPoint, bili);
var marker = new BMap.Marker(newPoint);
marker.enableDragging(true);
marker.setTitle("可以拖拽节点");
marker.addEventListener("dragend", function(e){
dragendMarker(e.point.lng, e.point.lat);
});
map.addOverlay(marker);
}
// 重新刷新生成新的数据结果
// 参数 circle: 传递的圆形对象
function rebuildResult(circle) {
map.addOverlay(circle);
var source = document.getElementById("sourceselectid").value;
if("1"==source) {
loaddata();
}
else if("2"==source) {
var local = new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});
var bounds = getSquareBounds(circle.getCenter(), circle.getRadius());
var rules = document.getElementById("conselectid").value;
local.searchInBounds(rules, bounds);
}
}
function loaddata() {
var points = new Array();
var odis = document.getElementById("radselectid").value;
var centpoint = map.getCenter();
var objs = eval(jsons);
for(var i=0;i<objs.length;i++){
var newPoint = new BMap.Point(objs[i].lng, objs[i].lat);
var dis = map.getDistance(centpoint,newPoint);
if(new Number(odis)-new Number(dis)>=0){
var tmpmarker = new BMap.Marker(newPoint);
tmpmarker.setTitle("坐标:["+objs[i].lng+","+objs[i].lat+"]");
map.addOverlay(tmpmarker);
}
}
}
// 生成圆形对象
function buildCircle(centlng, centlat) {
var rad = document.getElementById("radselectid").value;
var centPoint;
if(centlng==""||centlat==""){
centPoint = map.getCenter();
}else{
centPoint = new BMap.Point(centlng, centlat);
}
return new BMap.Circle(centPoint, rad, {fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.2, strokeOpacity: 0.1});
}
// 生成地图对象
var res = "";
function buildMap(initlng, initlat) {
var map = new BMap.Map("container");
map.enableScrollWheelZoom();
var initPoint = new BMap.Point(initlng, initlat);
map.centerAndZoom(initPoint, bili);
return map;
}
/**
* 得到圆的内接正方形bounds
* @param {Point} centerPoi 圆形范围的圆心
* @param {Number} r 圆形范围的半径
* @return 无返回值
*/
function getSquareBounds(centerPoi,r){
var a = Math.sqrt(2) * r; //正方形边长
mPoi = getMecator(centerPoi);
var x0 = mPoi.x, y0 = mPoi.y;
var x1 = x0 + a / 2 , y1 = y0 + a / 2;//东北点
var x2 = x0 - a / 2 , y2 = y0 - a / 2;//西南点
var ne = getPoi(new BMap.Pixel(x1, y1)), sw = getPoi(new BMap.Pixel(x2, y2));
return new BMap.Bounds(sw, ne);
}
//根据球面坐标获得平面坐标。
function getMecator(poi){
return map.getMapType().getProjection().lngLatToPoint(poi);
}
//根据平面坐标获得球面坐标。
function getPoi(mecator){
return map.getMapType().getProjection().pointToLngLat(mecator);
}
</script>
</head>
<body>
<div style="background-color: #eeeeee; height: 30px; border: 1px;">
<table width="100%" border="0">
<tbody>
<tr style="font-family: Tahoma; font-size: 12px; font-weight: bold;">
<td style="width: 60px; text-align: right;">范围大小:</td>
<td style="width: 80px;">
<select id="radselectid">
<option value="500">
500米
</option>
<option value="550">
550米
</option>
<option value="600">
600米
</option>
<option value="650">
650米
</option>
<option value="700">
700米
</option>
<option value="750">
750米
</option>
<option value="800">
800米
</option>
<option value="900">
900米
</option>
<option value="1000">
1000米
</option>
</select>
</td>
<td style="width: 60px; text-align: right;">查询指标:</td>
<td style="width: 80px;">
<select id="conselectid">
<option value="酒店">
酒店
</option>
<option value="学校">
学校
</option>
<option value="医院">
医院
</option>
<option value="维修">
维修
</option>
</select>
</td>
<td style="width: 60px; text-align: right;">定位地址:</td>
<td style="width: 300px;"><input id="addrpointid" type="text" size="50"></input></td>
<td style="width: 60px; text-align: right;">数据来源:</td>
<td style="width: 80px;">
<select id="sourceselectid">
<option value="1">
本地数据库
</option>
<option value="2">
网络数据库
</option>
</select>
</td>
<td><input type="button" value="查询显示" onClick="search();"></input></td>
</tr>
</tbody>
</table>
</div>
<div style="height: 600px;" id="container"></div>
</body>
</html>
<script type="text/javascript">
var jsons = [
{"lng":"114.128686","lat":"22.56122"},
{"lng":"114.127572","lat":"22.561854"},
{"lng":"114.126674","lat":"22.56067"},
{"lng":"114.126117","lat":"22.561437"},
{"lng":"114.126889","lat":"22.562255"},
{"lng":"114.126943","lat":"22.561387"},
{"lng":"114.127698","lat":"22.560186"},
{"lng":"114.126602","lat":"22.560119"},
{"lng":"114.125452","lat":"22.561237"},
{"lng":"114.125075","lat":"22.562505"},
{"lng":"114.125578","lat":"22.563039"},
{"lng":"114.126979","lat":"22.56374"},
{"lng":"114.128308","lat":"22.564057"},
{"lng":"114.128847","lat":"22.562889"},
{"lng":"114.129836","lat":"22.562305"},
{"lng":"114.130375","lat":"22.561704"},
{"lng":"114.130446","lat":"22.560736"},
{"lng":"114.130464","lat":"22.559201"},
{"lng":"114.129243","lat":"22.557582"},
{"lng":"114.12662","lat":"22.557315"},
{"lng":"114.129027","lat":"22.558917"},
{"lng":"114.128057","lat":"22.559168"},
{"lng":"114.12511","lat":"22.559335"},
{"lng":"114.124625","lat":"22.56097"},
{"lng":"114.126063","lat":"22.559752"},
{"lng":"114.12653","lat":"22.558834"},
{"lng":"114.123601","lat":"22.559251"},
{"lng":"114.123511","lat":"22.561137"},
{"lng":"114.123817","lat":"22.563123"},
{"lng":"114.124643","lat":"22.564107"},
{"lng":"114.126494","lat":"22.564791"},
{"lng":"114.117026","lat":"22.557232"},
{"lng":"114.11769","lat":"22.55795"},
{"lng":"114.117888","lat":"22.559501"},
{"lng":"114.118373","lat":"22.561154"},
{"lng":"114.118355","lat":"22.562889"},
{"lng":"114.118499","lat":"22.564341"},
{"lng":"114.120493","lat":"22.564658"},
{"lng":"114.1222","lat":"22.564992"},
{"lng":"114.120835","lat":"22.562405"},
{"lng":"114.1222","lat":"22.556414"},
{"lng":"114.121643","lat":"22.5585"},
{"lng":"114.119631","lat":"22.557132"},
{"lng":"114.126242","lat":"22.556281"},
{"lng":"114.129764","lat":"22.557933"},
{"lng":"114.132584","lat":"22.556548"},
{"lng":"114.134129","lat":"22.557098"},
{"lng":"114.136375","lat":"22.556731"},
{"lng":"114.137741","lat":"22.557249"},
{"lng":"114.136735","lat":"22.558617"},
{"lng":"114.134165","lat":"22.55845"},
{"lng":"114.131884","lat":"22.558166"},
{"lng":"114.1305","lat":"22.556915"},
{"lng":"114.132009","lat":"22.559451"},
{"lng":"114.134597","lat":"22.560119"},
{"lng":"114.137345","lat":"22.560353"},
{"lng":"114.13704","lat":"22.561921"},
{"lng":"114.135567","lat":"22.561537"},
{"lng":"114.1328","lat":"22.561821"},
{"lng":"114.132117","lat":"22.562372"},
{"lng":"114.134165","lat":"22.563056"},
{"lng":"114.133716","lat":"22.56127"},
{"lng":"114.1328","lat":"22.560486"},
{"lng":"114.132099","lat":"22.564374"},
{"lng":"114.12962","lat":"22.564942"},
{"lng":"114.131596","lat":"22.565609"},
{"lng":"114.135171","lat":"22.565359"},
{"lng":"114.13686","lat":"22.56384"},
{"lng":"114.13607","lat":"22.564358"},
{"lng":"114.134848","lat":"22.564007"},
{"lng":"114.133644","lat":"22.564791"},
{"lng":"114.138423","lat":"22.565192"},
{"lng":"114.137992","lat":"22.563573"},
{"lng":"114.137094","lat":"22.565642"},
{"lng":"114.137848","lat":"22.565893"},
{"lng":"114.137795","lat":"22.559652"},
{"lng":"114.13792","lat":"22.556314"},
{"lng":"114.133213","lat":"22.556264"},
{"lng":"114.118391","lat":"22.556564"}
];
var bili = 17;
var initlng = "114.127464";
var initlat = "22.56097";
//生成地图对象
var map = buildMap(initlng, initlat);
//生成中心标记
rebuildMark("","");
//生成圆形对象
var circle = buildCircle("", "");
//生成查询结果
rebuildResult(circle);
</script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=你的钥匙"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMap.Map("container");
var points = [{"lng":116,"lat":40,"url":"http://www.baidu.com","id":50},
{"lng":117,"lat":31,"url":"http://www.sina.com","id":2},
{"lng":116,"lat":34,"url":"http://www.google.com","id":3}
]
map.centerAndZoom(new BMap.Point(103.388611,35.563611), 5);
map.enableScrollWheelZoom();
function addMarker(points){ // 创建图标对象
// 创建标注对象并添加到地图
for(var i = 0,pointsLen = points.length;i <pointsLen;i++){
var point = new BMap.Point(points[i].lng,points[i].lat);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
(function() {
var thePoint = points[i];
marker.addEventListener("click",function(){
showInfo(this,thePoint);
});
})();
}
}
function showInfo(thisMaker,point){
var sContent =
'<ul style="margin:0 0 5px 0;padding:0.2em 0">'
+'<li style="line-height: 26px;font-size: 15px;">'
+'<span style="width: 50px;display: inline-block;">id:</span>' + point.id + '</li>'
+'<li style="line-height: 26px;font-size: 15px;"><span style="width: 50px;display: inline-block;">查看:</span><a href="'+point.url+'">详情</a></li>'
+'</ul>';
var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
thisMaker.openInfoWindow(infoWindow); //图片加载完毕重绘infowindow
}
addMarker(points);
</script>
</body>
</html>
符合要求么。
记得把 <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=你的钥匙"></script>
这里替换一下。