百度地图标注点+搜索

来源：互联网发布：电脑防护软件编辑：程序博客网时间：2024/05/19 04:02
最近的项目需要一个百度地图，经过查询一些资料，参照了一下这篇博客 http://blog.csdn.net/a497785609/article/details/24009031整理了一下实现了如下的效果。
具体代码如下：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=F5dadeb87de65231081fe88229c124e2"></script><script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script><link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />    <style type="text/css">body, html{width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}#r-result{width:20%;height:90%}#map{height:100%;width:79.9%;}</style></head><body><div><input type="text" onkeypress="EnterPress()" style="width:16%;height:25px" id="txtContent"><input type="button" style="width:50px;height:25px" id="search" value="搜索" onclick="searchMap()"/></div><br><div><div id="r-result" style="width:20%;float:left"></div><div style="width:79.9%;float:right;" id="map"></div></div></body></html>            <script type="text/javascript">                var markerArr = [                    { title: "名称：广州火车站", point: "113.264531,23.157003", address: "广东省广州市广州火车站", tel: "12306" },                    { title: "名称：广州塔（赤岗塔）", point: "113.330934,23.113401", address: "广东省广州市广州塔（赤岗塔） ", tel: "18500000000" },                    { title: "名称：广州动物园", point: "113.312213,23.147267", address: "广东省广州市广州动物园", tel: "18500000000" },                    { title: "名称：天河公园", point: "113.372867,23.134274", address: "广东省广州市天河公园", tel: "18500000000" }                ];                function map_init(e) {                    var map = new BMap.Map("map"); // 创建Map实例                    var point = new BMap.Point(113.312213, 23.147267); //地图中心点，广州市                    map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别。                    map.enableScrollWheelZoom(true); //启用滚轮放大缩小                    //地图、卫星、混合模式切换                    map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]}));                    //向地图中添加缩放控件                    var ctrlNav = new window.BMap.NavigationControl({                        anchor: BMAP_ANCHOR_TOP_LEFT,                        type: BMAP_NAVIGATION_CONTROL_LARGE                    });                    map.addControl(ctrlNav);                    //向地图中添加缩略图控件                    var ctrlOve = new window.BMap.OverviewMapControl({                        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,                        isOpen: 1                    });                    map.addControl(ctrlOve);                    //向地图中添加比例尺控件                    //var ctrlSca = new window.BMap.ScaleControl({                      //  anchor: BMAP_ANCHOR_BOTTOM_LEFT                    //});                   // map.addControl(ctrlSca);                    var point = new Array(); //存放标注点经纬信息的数组                    var marker = new Array(); //存放标注点对象的数组                    var info = new Array(); //存放提示信息窗口对象的数组                    var searchInfoWindow =new Array();//存放检索信息窗口对象的数组                    for (var i = 0; i < markerArr.length; i++) {                        var p0 = markerArr[i].point.split(",")[0]; //                        var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来                        point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点                        marker[i] = new window.BMap.Marker(point[i]); //按照地图点坐标生成标记                        map.addOverlay(marker[i]);                        marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画                        var label = new window.BMap.Label(markerArr[i].title, { offset: new window.BMap.Size(20, -10) });                        //marker[i].setLabel(label);                        // 创建信息窗口对象                        info[i] = "<p style=’font-size:12px;lineheight:1.8em;’>" + "</br>地址：" + markerArr[i].address + "</br> 电话：" + markerArr[i].tel + "</br></p>";                        //创建百度样式检索信息窗口对象                                               searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, info[i], {                                title  : markerArr[i].title,      //标题                                width  : 290,             //宽度                                height : 55,              //高度                                panel  : "panel",         //检索结果面板                                enableAutoPan : true,     //自动平移                                searchTypes   :[                                    BMAPLIB_TAB_SEARCH,   //周边检索                                    BMAPLIB_TAB_TO_HERE,  //到这里去                                    BMAPLIB_TAB_FROM_HERE //从这里出发                                ]                            });                        //添加点击事件                        marker[i].addEventListener("click",                             (function(k){                                // js 闭包                                return function(){                                    //map.centerAndZoom(point[k], 18);                                    //marker[k].openInfoWindow(info[k]);                                    searchInfoWindow[k].open(marker[k]);                                }                            })(i)                                                    );                     }                  var local = new BMap.LocalSearch(map, {renderOptions: {map: map, panel: "r-result"}});local.search(e);}                //异步调用百度js                function map_load() {                    var load = document.createElement("script");                    load.src = "http://api.map.baidu.com/api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR&callback=map_init";                    document.body.appendChild(load);                }//按输入的内容进行搜索function searchMap(){ var content=document.getElementById("txtContent").value; map_init(content);}//键盘回车事件function EnterPress(){ if(event.keyCode == 13){ searchMap(); //调用输入框搜索事件} }                 window.onload = map_load;            </script>
这些都是html，如果标注的地点有经纬度的话，可以在后台获取，前面显示到array中进行显示。
这里是我做的demo，大家可以下载看看
0 0