原文:百度地图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', '中亭街唯唯');


------------------------------------------------------------  华丽的分割线   -----------------------------------------------------
图片

百度地图API 添加自定义标注 多点标注的更多相关文章

  1. 百度地图API显示多个标注点并添加百度样式检索窗口

    原作者博客地址:http://blog.csdn.net/a497785609/article/details/24009031 在此基础上进行了修改: 1.添加闭包,将i传入内部 2.添加地图和卫星 ...

  2. 百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法

    原文:百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法 公司的网站改版要求在一个页面显示百度地图.上面要同时显示很多标注点,标注点当然要有提示信息嘛,提 ...

  3. 【百度地图API】——如何让标注自动呈现在最佳视野内

    原文:[百度地图API]--如何让标注自动呈现在最佳视野内 摘要: “我有一堆标注,不规则的散落在地图的各个地方,我想把它们展示在一个最佳视野中,怎么办呢?”一位API爱好者咨询道. -------- ...

  4. 百度地图API显示多个标注点带百度样式信息检索窗口的代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 百度地图API显示多个标注点带提示的代码 / 单个标注点带提示代码

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. 百度地图API二:根据标注点坐标范围计算显示缩放级别zoom自适应显示地图

    原文:百度地图API二:根据标注点坐标范围计算显示缩放级别zoom自适应显示地图 版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/liusaint1992/ ...

  7. 百度地图API示例之文本标注

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  8. 百度地图api之如何自定义标注图标

    在百度地图api中,默认的地图图标是一个红色的椭圆形.但是在项目中常常要求我们建立自己的图标,类似于我的这个 操作很简单,分如下几步进行 步骤一:先ps一个图标,大小要合适,如果要背景透明的,记得保存 ...

  9. 百度地图API显示多个标注点带检索框

    通过百度地图的api,可以在地图上显示多个标注点,并给所有的标注点实现了带检索功能的信息框 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

随机推荐

  1. 详谈socket请求Web服务器过程(转)

    最开始我们需要明白一件事情,因为这是这篇文章的前提: HTTP协议只是一个应用层协议,它底层是通过TCP进行传输数据的.因此,浏览器访问Web服务器的过程必须先有“连接建立”的发生. 而有人或许会问: ...

  2. 查看SQLServer 代理作业的历史信息

    原文:查看SQLServer 代理作业的历史信息 不敢说众所周知,但是大部分人都应该知道SQLServer的代理作业情况都存储在SQLServer5大系统数据库(master/msdb/model/t ...

  3. asp.net web api KnownTypeAttribute

    项目里用到了继承,在序列化的时候遇到了问题. 源代码 public class Segment { public SegmentType Type { get; set; } public strin ...

  4. python使用smtplib库和smtp.qq.com邮件服务器发送邮件(转)

    使用qq的邮件服务器需要注意的两个地方主要是: 1.协议问题 使用465端口 SSL 协议 2.口令问题 出现SMTPAuthenticationError 主要的原因就是口令和帐号信息不对,这里我们 ...

  5. 基于VMware的虚拟Linux集群搭建-lvs+keepalived

    基于VMware的虚拟Linux集群搭建-lvs+keepalived 本文通过keepalived实现lvsserver的的双机热备和真实server之间的负载均衡.这方面的blog挺多,可是每一个 ...

  6. Benchmark与Profiler---性能调优得力助手

    转载请注明出处:http://blog.csdn.net/gaoyanjie55/article/details/34981077 性能优化.它是一种诊断性能瓶颈,能问题点进行优化的过程.前两天听完s ...

  7. 设计模式之空对象(Null Object)模式

    通过引用Null Object,用于取消业务逻辑中对对象的为空推断 类图: Nullable: package com.demo.user; public interface Nullable { b ...

  8. 【C++ Primer每天刷牙】一间 迭代器

    迭代器的介绍 概述 迭代器是一种检查容器内元素并遍历元素的数据类型. 迭代器(iterator)是一种对象,它能够用来遍历标准模板库容器中的部分或所有元素,每一个迭代器对象代表容器中的确定的地址.迭代 ...

  9. hdu4419 Colourful Rectangle 12年杭州网络赛 扫描线+线段树

    题意:给定n个矩形,每个矩形有一种颜色,RGB中的一种.相交的部分可能为RG,RB,GB,RGB,问这n个矩形覆盖的面积中,7种颜色的面积分别为多少 思路:把x轴离散化做扫描线,线段树维护一个扫描区间 ...

  10. 【剑指offer】最大和连续子阵列

    个開始,到第3个为止).你会不会被他忽悠住? 输入: 输入有多组数据,每组測试数据包括两行. 第一行为一个整数n(0<=n<=100000),当n=0时,输入结束.接下去的一行包括n个整数 ...