原文:百度地图API 添加自定义标注 多点标注
分四个文件 location.php map.css 图片 数据库 数据库配置自己改下
------------------------------------------------------------ 华丽的分割线 ----------------------------------------------------- location.php 主文件
<link rel="stylesheet" type="text/css" href="map.css"> <?php $config=mysql_connect("localhost","root","root"); mysql_select_db("baidu_map"); mysql_query("set names utf8"); $query=mysql_query("select * from location"); $sql_num=mysql_num_rows($query); while($rows=mysql_fetch_array($query)) { $rows_latitude[]=$rows['latitude']; //经度 $rows_longitude[]=$rows['longitude']; //纬度 $rows_store_name[]=$rows['store_name']; //店铺名称 $rows_info[]=$rows['info']; //详细信息 } ?>
<style type="text/css"> body{margin:0px;padding:0px} #container { height:480px; width:750px; margin-top:15px; margin-bottom:15px; border:1px solid #E9E7D4; } .BMap_bubble_content { font-size:12px;} </style> <script type="text/javascript" src="http://api./api?v=1.3"></script> <script> function visitMap(theArea) { switch(theArea) { case "01": map.centerAndZoom(new BMap.Point(119.2689127612,26.0497002276),14)//仓山区 break case "02": map.centerAndZoom(new BMap.Point(119.32851499999992,26.082105),14)//晋安区 break case "03": map.centerAndZoom(new BMap.Point(119.304217,26.082593),14)//鼓楼区 break case "04": map.centerAndZoom(new BMap.Point(119.314123,26.052837),14)//台江区 break case "05": map.centerAndZoom(new BMap.Point(119.45558900000005,25.9962505191156),14)//马尾区 break } } </script>
<div class="white_container"> <h2>怎样集飞币</h2> <div class="clear"></div> <h4 class="sub_heading"> 你可以在联盟商家消费或者参与商家活动获取飞币， 使用下面的地图可以搜索到飞买网的联盟商家。 </h4> <div id="r-result"> <label class="h4title">请输入查询地址:</label><br /><input type="text" id="suggestId" class="addressSearchInput" /></div> <div id="searchResultPanel"> </div> <label class="h4title">请选择查询位置</label> <br /> <select class="flyaddress" onChange="visitMap(this.value)"> <option value="01">仓山区</option> <option value="02">晋安区</option> <option value="03">鼓楼区</option> <option value="04">台江区</option> <option value="05">马尾区</option> </select> <div id="container"></div> </div> <script type="text/javascript"> var map = new BMap.Map("container");// 创建地图实例 var point = new BMap.Point(119.29649399999994,26.074508); // 创建点坐标 map.centerAndZoom(point, 13); // 初始化地图，设置中心点坐标和地图级别
map.addControl(new BMap.NavigationControl()); //比例尺 map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用 map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用 map.addControl(new BMap.MapTypeControl()); //切换地图类型 map.enableContinuousZoom(); // 开启连续缩放效果 map.enableInertialDragging();// 开启惯性拖拽效果
var icon = new BMap.Icon('fblogo.png', new BMap.Size(43, 38), { anchor: new BMap.Size(43, 38) });//定义图标
// 编写自定义函数,创建标注 function addMarker(point,info,title){ var marker = new BMap.Marker(point,{icon:icon}); var rows_title=eval(<?php echo json_encode($rows_store_name);?>); var opts = { width : 200, // 信息窗口宽度 height: 50, // 信息窗口高度 title : title, // 信息窗口标题 } var infoWindow = new BMap.InfoWindow(info,opts,{offset:new BMap.Size(-5,-20)}); // 创建信息窗口对象 map.addOverlay(marker); marker.addEventListener("click", function(){this.openInfoWindow(infoWindow); map.zoomIn(); }); marker.setLabel(new BMap.Label(title,{offset:new BMap.Size(43,0)})); }
// 向地图添加标注 var rows_latitude=eval(<?php echo json_encode($rows_latitude);?>); var rows_longitude=eval(<?php echo json_encode($rows_longitude);?>); var rows_store_name=eval(<?php echo json_encode($rows_store_name);?>); var rows_info=eval(<?php echo json_encode($rows_info);?>); for (var i = 0; i < <?php echo $sql_num;?>; i ++) { var point = new BMap.Point(rows_latitude[i], rows_longitude[i]); addMarker(point,rows_info[i],rows_store_name[i]); }
function G(id) { return document.getElementById(id); }
var ac = new BMap.Autocomplete( //建立一个自动完成的对象 {"input" : "suggestId" ,"location" : map });
ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件 var str = ""; var _value = e.fromitem.value; var value = ""; if (e.fromitem.index > -1) { value = _value.province + _value.city + _value.district + _value.street + _value.business; } str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value; value = ""; if (e.toitem.index > -1) { _value = e.toitem.value; value = _value.province + _value.city + _value.district + _value.street + _value.business; } str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value; G("searchResultPanel").innerHTML = str; });
var myValue; ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件 var _value = e.item.value; myValue = _value.province + _value.city + _value.district + _value.street + _value.business; // G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue; G("searchResultPanel").innerHTML =myValue; setPlace(); });
function setPlace(){ // map.clearOverlays(); //清除地图上所有覆盖物 function myFun(){ var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果 map.centerAndZoom(pp, 15); // map.addOverlay(new BMap.Marker(pp)); //添加标注 } var local = new BMap.LocalSearch(map, { //智能搜索 onSearchComplete: myFun }); local.search(myValue); }
</script>
------------------------------------------------------------ 华丽的分割线 ----------------------------------------------------- css样式
@charset "utf-8"; /* CSS Document */ .white_container { font-size:12px; width:975px; padding-left:10px; } .white_container h2 { color: #78326E; font-family: "Arial Black", Gadget, sans-serif; font-size:25px; font-weight: bold; margin: 0.3em 0; text-rendering: optimizelegibility } .white_container h4 { margin:0; line-height:20px; } .white_container option { border:none;}
#searchResultPanel { display:none;} #suggestId { background: none repeat scroll 0 0 #F3FCFF; border-color: #7FD8F5; border-style: solid; border-width: 1px; padding: 4px 10px; width:400px; margin-top:2px; } #r-result { margin-bottom:15px; margin-top:10px; } .h4title { font-size:13px; margin-bottom:5px;} .flyaddress { background: none repeat scroll 0 0 #F3FCFF; border-color: #7FD8F5; border-style: solid; border-width: 1px; padding: 10px; min-width:250px; margin-top:2px; } .sub_heading{ border-bottom: 1px solid #D5D4D5; color: #4C6E84; font-size: 16px; font-weight: bold; line-height: 1.7; margin-bottom: 20px; padding-bottom: 6px; width:750px; }
------------------------------------------------------------ 华丽的分割线 ----------------------------------------------------- 数据库文件
CREATE TABLE `location` ( `id` int(10) NOT NULL auto_increment, `latitude` varchar(30) NOT NULL, `longitude` varchar(30) NOT NULL, `address` varchar(255) character set gbk NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=latin1;
INSERT INTO `location` VALUES ('1', '119.298974', '26.06724929', '宝龙城市广场A幢'); INSERT INTO `location` VALUES ('2', '119.307171', '26.070835', '博美诗邦'); INSERT INTO `location` VALUES ('3', '119.317156\r\n', '26.058129', '中亭街唯唯');
------------------------------------------------------------ 华丽的分割线 ----------------------------------------------------- 图片
