zoukankan      html  css  js  c++  java
  • 百度地图上添加多个标记,标记上添加信息展示窗口、跳转到导航界面

    结果如下:

    代码如下:

     1 <html lang="en">
     2 <head>
     3     <title>地图上瞄点</title>
     4     <metcharset=utf-8">
     5     <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=此处替换为自己在百度地图api中申请的ak值&s=1"></script>
     6 </head>
     7 <body style="background:#CBE1FF">
     8     <div style="730px;margin:auto;">
     9         <div id="container"
    10          style=" 730px;height: 680px;border: 1px solid gray;">
    11         </div>
    12     </div>
    13 </body>
    14 <script type="text/javascript">
    15     var map = new BMap.Map("container");
    16     // map.centerAndZoom("青岛", 10);
    17     map.centerAndZoom(new BMap.Point(120.32,36.39),10)
    18     map.enableScrollWheelZoom();    //启用滚轮放大缩小,默认禁用
    19     map.enableContinuousZoom();    //启用地图惯性拖拽,默认禁用
    20 
    21     map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
    22     map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
    23     map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));   //右下角,打开
    24 
    25     var localSearch = new BMap.LocalSearch(map);
    26     localSearch.enableAutoViewport(); //允许自动调节窗体大小
    27 
    28 
    29     function searchByStationName() {
    30         var index = '';
    31         map.clearOverlays();//清空原来的标注
    32         var keyword =['青岛市民中心(市南区福州南路17,27号)',
    33         '市北区敦化路328号诺德广场A座5楼',
    34         '李沧区京口路47号百通大厦7楼',
    35         '崂山区海尔路182-8号半岛国际大厦5楼',
    36         '城阳区正阳路205号B座6楼',
    37         '黄岛区长江东路313号',
    38         '黄岛区双珠路399号光大商务中心3楼',
    39         '即墨区蓝鳌路788号德馨大厦3楼',
    40         '胶州市澳门路333号天泰金融广场4号楼10楼',
    41         '平度市红旗路23号鼎峰大厦6楼',
    42         '莱西市长岛路156号交通银行3楼'];
    43         localSearch.setSearchCompleteCallback(function (searchResult) {
    44             var poi = searchResult.getPoi(0);
    45             //输出poi,可根据poi中的值进行获取标记点的经纬度等内容。
    46             console.log(poi)
    47 
    48             // map.centerAndZoom(poi.point, 10); //可根据标记修改地图的中心和zoom大小;
    49             var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));  // 创建标记
    50             map.addOverlay(marker);
    51 
    52             marker.addEventListener("click", function () {
    53                 //content中为展示信息窗口中的内容
    54                 var content = poi.title + "<br/><br/>经度:" + poi.point.lng + "<br/>纬度:" + poi.point.lat;
    55                 var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
    56                 //打开信息窗口
    57                 this.openInfoWindow(infoWindow);
    58                 //进入导航页面,现起始点是已知的,未进行定位操作,第一个origin后为起始点,destination后为导航的终点,第二个origin后为所在城市
    59                 // window.open(encodeURI("http://api.map.baidu.com/direction?origin=中山公园&destination="+ poi.title +"&mode=driving&region=青岛&output=html&src=webapp.baidu.openAPIdemo"),'_blank');
    60             });
    61             //marker跳动的动画
    62             // marker.setAnimation(BMAP_ANIMATION_BOUNCE);
    63          });
    64 
    65         // localSearch.search(keyword);//当标记点为一个点,keyword为位置字符串
    66 
    67         //标记点为多个点,keyword为列表。
    68         for(var i = 0;  i< keyword.length;i ++){
    69             index = i;
    70             localSearch.search(keyword[i]);
    71         }
    72     }
    73 
    74     //调用函数,在地图上添加marker标记
    75     searchByStationName();
    76 </script>
    77 </html>
  • 相关阅读:
    Unix命令大全
    vs2008 与 IE8出现的兼容性问题
    Java 创建文件、文件夹以及临时文件
    如何修改Wamp中mysql默认空密码
    PAT 乙级真题 1003.数素数
    Tags support in htmlText flash as3
    DelphiXE4 FireMonkey 试玩记录,开发IOS应用 还是移植
    10 Great iphone App Review sites to Promote your Apps!
    HTML tags in textfield
    Delphi XE4 IOS 开发, "No eligible applications were found“
  • 原文地址:https://www.cnblogs.com/qing0228/p/14357679.html
Copyright © 2011-2022 走看看