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>
  • 相关阅读:
    HDU1058Humble Numbers(DP)
    HDU1285确定比赛名次(拓扑排序)
    HDU2602Bone Collector(DP,0/1背包)
    HDU1869六度分离(最短路floyd)
    HDU3342Legal or Not(拓扑)
    Dijkstra不能得到含有负权边图的单源最短路径
    HDU1069Monkey and Banana(DP)
    HDU1176免费馅饼(DP)
    DAG上的动态规划
    网络分析中数据包结构的定义
  • 原文地址:https://www.cnblogs.com/qing0228/p/14357679.html
Copyright © 2011-2022 走看看