百度地图问题 小白问个很简单的问题

偷麦 2015-11-27 12:26:48
{"lng":"116.73274","lat":"39.509125"},
{"lng":"114.127572","lat":"22.561854"},
{"lng":"114.126674","lat":"22.56067"},
{"lng":"114.126117","lat":"22.561437"},
{"lng":"114.126889","lat":"22.562255"},
在我的程序里 地图上显示的全是坐标的小点点 我想把这些地址 显示名称 而且能点击 点击后去我自定义的一个连接里
...全文
155 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
偷麦 2015-11-27
  • 打赏
  • 举报
回复
引用 1 楼 KK3K2005 的回复:
自己定一个make里面的html
大师 不懂 我是小白 能具体吗
KK3K2005 2015-11-27
  • 打赏
  • 举报
回复
自己定一个make里面的html
liusaint1992 2015-11-27
  • 打赏
  • 举报
回复

		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]). 大概这样吧。
liusaint1992 2015-11-27
  • 打赏
  • 举报
回复

 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的。
偷麦 2015-11-27
  • 打赏
  • 举报
回复
谢谢 liusaint1992 我这就去结算积分 还一个小问题 哈哈 我想从一段代固定的代码里取值 加入到数据库不同的字段里 该怎么做 比如 title:"鹊缘鲜花" 我取 鹊缘鲜花 添加到A字段 ,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"] 里的"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"到B字段

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"]}
偷麦 2015-11-27
  • 打赏
  • 举报
回复
用ASP语言或者JavaScript
liusaint1992 2015-11-27
  • 打赏
  • 举报
回复

			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"}

		];
只能帮你到这儿了。。你自己要调下偏移量。
偷麦 2015-11-27
  • 打赏
  • 举报
回复
我想在这里的坐标上显示名称 和点击进入对应的链接
<!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>
liusaint1992 2015-11-27
  • 打赏
  • 举报
回复

<!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> 这里替换一下。

87,907

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧