zoukankan      html  css  js  c++  java

  • 百度地图显示多个标注点

    效果图：

     

    [html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
     
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head>  
    4.     <title>百度地图API显示多个标注点带提示的代码</title>  
    5.     <!--css-->  
    6.     <link href="style/demo.css" rel="stylesheet" type="text/css" />  
    7.     <!--javascript-->  
    8.     <script src="scripts/jquery-1.9.1.js" type="text/javascript"></script>  
    9.     <script src="scripts/demo.js" type="text/javascript"></script>  
    10. </head>  
    11. <body>  
    12.     <div class="demo_main">  
    13.         <fieldset class="demo_title">  
    14.             百度地图API显示多个标注点带提示的代码  
    15.         </fieldset>  
    16.         <fieldset class="demo_content">  
    17.             <div style="min-height: 300px;  100%;" id="map">  
    18.             </div>  
    19.             <script type="text/javascript">  
    20.                 var markerArr = [  
    21.                     { title: "名称：广州火车站", point: "113.264531,23.157003", address: "广东省广州市广州火车站", tel: "12306" },  
    22.                     { title: "名称：广州塔（赤岗塔）", point: "113.330934,23.113401", address: "广东省广州市广州塔（赤岗塔） ", tel: "18500000000" },  
    23.                     { title: "名称：广州动物园", point: "113.312213,23.147267", address: "广东省广州市广州动物园", tel: "18500000000" },  
    24.                     { title: "名称：天河公园", point: "113.372867,23.134274", address: "广东省广州市天河公园", tel: "18500000000" }  
    25.   
    26.                 ];  
    27.   
    28.                 function map_init() {  
    29.                     var map = new BMap.Map("map"); // 创建Map实例  
    30.                     var point = new BMap.Point(113.312213, 23.147267); //地图中心点，广州市  
    31.                     map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别。  
    32.                     map.enableScrollWheelZoom(true); //启用滚轮放大缩小  
    33.                     //向地图中添加缩放控件  
    34.                     var ctrlNav = new window.BMap.NavigationControl({  
    35.                         anchor: BMAP_ANCHOR_TOP_LEFT,  
    36.                         type: BMAP_NAVIGATION_CONTROL_LARGE  
    37.                     });  
    38.                     map.addControl(ctrlNav);  
    39.   
    40.                     //向地图中添加缩略图控件  
    41.                     var ctrlOve = new window.BMap.OverviewMapControl({  
    42.                         anchor: BMAP_ANCHOR_BOTTOM_RIGHT,  
    43.                         isOpen: 1  
    44.                     });  
    45.                     map.addControl(ctrlOve);  
    46.   
    47.                     //向地图中添加比例尺控件  
    48.                     var ctrlSca = new window.BMap.ScaleControl({  
    49.                         anchor: BMAP_ANCHOR_BOTTOM_LEFT  
    50.                     });  
    51.                     map.addControl(ctrlSca);  
    52.   
    53.                     var point = new Array(); //存放标注点经纬信息的数组  
    54.                     var marker = new Array(); //存放标注点对象的数组  
    55.                     var info = new Array(); //存放提示信息窗口对象的数组  
    56.                     for (var i = 0; i < markerArr.length; i++) {  
    57.                         var p0 = markerArr[i].point.split(",")[0]; //  
    58.                         var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来  
    59.                         point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点  
    60.                         marker[i] = new window.BMap.Marker(point[i]); //按照地图点坐标生成标记  
    61.                         map.addOverlay(marker[i]);  
    62.                         marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画  
    63.                         var label = new window.BMap.Label(markerArr[i].title, { offset: new window.BMap.Size(20, -10) });  
    64.                         marker[i].setLabel(label);  
    65.                         info[i] = new window.BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;’>" + markerArr[i].title + "</br>地址：" + markerArr[i].address + "</br> 电话：" + markerArr[i].tel + "</br></p>"); // 创建信息窗口对象  
    66.                     }  
    67.                     marker[0].addEventListener("mouseover", function () {  
    68.                         this.openInfoWindow(info[0]);  
    69.                     });  
    70.                     marker[1].addEventListener("mouseover", function () {  
    71.                         this.openInfoWindow(info[1]);  
    72.                     });  
    73.                     marker[2].addEventListener("mouseover", function () {  
    74.                         this.openInfoWindow(info[2]);  
    75.                     });  
    76.                 }  
    77.                 //异步调用百度js  
    78.                 function map_load() {  
    79.                     var load = document.createElement("script");  
    80.                     load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";  
    81.                     document.body.appendChild(load);  
    82.                 }  
    83.                 window.onload = map_load;  
    84.             </script>  
    85.         </fieldset>  
    86.     </div>  
    87. </body>  
    88. </html>  
    转载：http://blog.csdn.net/a497785609/article/details/24009031
  • 相关阅读:
    统计nginx日志里访问次数最多的前十个IP
    while 格式化输出 运算符 字符编码
    Python 软件安装
    Python 基础
    Typora 基础的使用方法
    Django ORM (四) annotate,F,Q 查询
    Django 惰性机制
    Django ORM (三) 查询，删除，更新操作
    Django ORM (二) 增加操作
    Django ORM (一) 创建数据库和模型常用的字段类型参数及Field 重要参数介绍
  • 原文地址：https://www.cnblogs.com/yelanggu/p/6757156.html
Copyright © 2011-2022 走看看