鱼C论坛

 找回密码
 立即注册
查看: 168|回复: 1

【急】百度地图API地图标签,如何添加对应的类别option,使地图的点根据选择后进行

[复制链接]
最佳答案
0 
发表于 2018-9-6 15:01:22 | 显示全部楼层 |阅读模式
100鱼币
本帖最后由 kitt 于 2018-9-7 11:21 编辑

想在data_info中增加一个类别,如何添加一个对应的类别option,使地图的点根据选择后进行显示。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  6.         <style type="text/css">
  7.                 body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
  8.                 #allmap{width:100%;height:500px;}
  9.                 p{margin-left:5px; font-size:14px;}
  10.         </style>
  11.         <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
  12.         <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  13.         <title>给多个点添加信息窗口</title>
  14. </head>
  15. <body>
  16.         <div id="allmap"></div>
  17.         <p>点击标注点,可查看由纯文本构成的简单型信息窗口</p>
  18. </body>
  19. </html>
  20. <script type="text/javascript">
  21.         // 百度地图API功能
  22.         map = new BMap.Map("allmap");
  23.         map.centerAndZoom(new BMap.Point(116.417854,39.921988), 15);
  24.         var data_info = [[116.417854,39.921988,"地址:北京市东城区王府井大街88号乐天银泰百货八层"],
  25.                                          [116.406605,39.921585,"地址:北京市东城区东华门大街"],
  26.                                          [116.412222,39.912345,"地址:北京市东城区正义路甲5号"]
  27.                                         ];
  28.         var opts = {
  29.                                 width : 250,     // 信息窗口宽度
  30.                                 height: 80,     // 信息窗口高度
  31.                                 title : "信息窗口" , // 信息窗口标题
  32.                                 enableMessage:true//设置允许信息窗发送短息
  33.                            };
  34.         for(var i=0;i<data_info.length;i++){
  35.                 var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]));  // 创建标注
  36.                 var content = data_info[i][2];
  37.                 map.addOverlay(marker);               // 将标注添加到地图中
  38.                 addClickHandler(content,marker);
  39.         }
  40.         function addClickHandler(content,marker){
  41.                 marker.addEventListener("click",function(e){
  42.                         openInfo(content,e)}
  43.                 );
  44.         }
  45.         function openInfo(content,e){
  46.                 var p = e.target;
  47.                 var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
  48.                 var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
  49.                 map.openInfoWindow(infoWindow,point); //开启信息窗口
  50.         }
  51. </script>
复制代码

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
 楼主| 发表于 2018-9-7 11:23:45 | 显示全部楼层
求助求助 大神在哪里
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

小甲鱼强烈推荐上一条 /1 下一条

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号

GMT+8, 2018-11-17 12:27

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表