百度地图API学习---多标注显示

最新推荐文章于 2024-07-21 10:17:51 发布

baba1902

最新推荐文章于 2024-07-21 10:17:51 发布

阅读量125

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hk2013/p/3181301.html

版权

由于项目的需要，建设方要求我们为其搭建一个餐饮行业地图，我当时从来没弄过这方面的东西，后来仔细看api又四处找资料，东拼西凑把功能做出来了。但是很多地方还不是很完善，酸奶小妹的博客给了我莫大的帮助，详细的注释让我理解了很多东西，首先表示感谢。。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html{width: 100%;height: 100%;overflow: hidden;margin:0;}
#allmap {margin-right: 234px;height: 100%;overflow: hidden;}
#result {border-left:1px dotted #999;height:100%;width:235px;position:absolute;top:0px;right:0px;font-size:12px;}
dl,dt,dd,ul,li{
    margin:0;
    padding:0;
    list-style:none;
}
dt{
    font-size:14px;
    font-family:"微软雅黑";
    font-weight:bold;
    border-bottom:1px dotted #000;
    padding:5px 0 5px 5px;
    margin:5px 0;
}
dd{
    padding:5px 0 0 5px;
}
li{
    line-height:28px;
}


</style>
<script type="text/javascript" src=http://api.map.baidu.com/api?v=1.5&ak=你的密钥></script>
<script>
function tijiao()
{
    document.form1.submit(); 
    }
</script>
<title>餐饮服务行业电子地图</title>

</head>
<body>
<div id="allmap" style="overflow:hidden;zoom:1;position:relative;">    
<div id="container" style="height:100%;"></div>



</div>
<form action="" name="form1" id="from1">
</form>
</body>
<script type="text/javascript">

var map =new BMap.Map("container");
var point =new BMap.Point(116.011,29.711);
map.centerAndZoom(point,15);

map.addControl(new BMap.MapTypeControl());          //添加地图类型控件
map.addControl(new BMap.NavigationControl());  //初始化地图控件              
map.addControl(new BMap.ScaleControl());                   
map.addControl(new BMap.OverviewMapControl());    
map.enableScrollWheelZoom();//启动鼠标滚轮缩放地图
map.enableKeyboard();//启动键盘操作地图          

var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT,offset:new BMap.Size(12,0)});
map.addControl(cr); //添加版权控件

var bs = map.getBounds();
cr.addCopyright({id: 1, content: "<a href='http://www.gtkj.com.cn' style='font-size:15px;' target='_blank'>技术支持：江西省国泰科技有限公司</a>", bounds: bs});


 var points =[
     
 new BMap.Point(115.995307,29.733113),
      
 new BMap.Point(116.000005,29.731799),
      
 new BMap.Point(115.998702,29.730478)];   //X个坐标点

    var marker0 =new BMap.Marker(points[0]);  // 创建X个标注
    
    var marker1 =new BMap.Marker(points[1]);  // 创建X个标注
    
    var marker2 =new BMap.Marker(points[2]);  // 创建X个标注
    
    
    

    map.addOverlay(marker0);              // 将标注添加到地图中
    
    map.addOverlay(marker1);              // 将标注添加到地图中
    
    map.addOverlay(marker2);              // 将标注添加到地图中
    
    


map.setViewport(points);         //调整地图的最佳视野为显示标注数组point





var opts0 = {title : '<span style="font-size:14px;color:#0A8021">九江信华建国酒店有限公司</span>'};





var opts1 = {title : '<span style="font-size:14px;color:#0A8021">喜唰唰火锅二店</span>'};





var opts2 = {title : '<span style="font-size:14px;color:#0A8021">喜唰唰火锅三店</span>'};








var infoWindow0 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>单位地址:</b>滨江路299号</br><b>量化分级等级：</b><img src='./lianghua/youxiu.png' width='25' height='25' align='middle'  /></br><b>监管负责人：</b>胡昌国</div>",opts0);

// 创建信息窗口对象，引号里可以书写任意的html语句。

var infoWindow1 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>单位地址:</b>浔阳路310号</br><b>量化分级等级：</b><img src='./lianghua/youxiu.png' width='25' height='25' align='middle'  /></br><b>监管负责人：</b>胡昌国</div>",opts1);

// 创建信息窗口对象，引号里可以书写任意的html语句。

var infoWindow2 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>单位地址:</b>大中路689号</br><b>量化分级等级：</b><img src='./lianghua/youxiu.png' width='25' height='25' align='middle'  /></br><b>监管负责人：</b>胡昌国</div>",opts2);

// 创建信息窗口对象，引号里可以书写任意的html语句。



    
marker0.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow0);});


    
marker1.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow1);});


    
marker2.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow2);});


    


</script>

转载于:https://www.cnblogs.com/hk2013/p/3181301.html

baba1902

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图API学习---多标注显示

由于项目的需要，建设方要求我们为其搭建一个餐饮行业地图，我当时从来没弄过这方面的东西，后来仔细看api又四处找资料，东拼西凑把功能做出来了。但是很多地方还不是很完善，酸奶小妹的博客给了我莫大的帮助，详细的注释让我理解了很多东西，首先表示感谢。。<!DOCTYPE html><html><head><meta http-...
复制链接

扫一扫