原文:
百度地图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.map.baidu.com/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', '中亭街唯唯');
---------------------
---------------------------------------
华丽的分割线 -----------------------------------------------------
图片
