百度地图api使用，简单搜索+经纬度定位+自定义消息窗口

最新推荐文章于 2021-12-21 23:16:25 发布

anluoxian8790

最新推荐文章于 2021-12-21 23:16:25 发布

阅读量175

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/LMJBlogs/p/9046782.html

版权

 1 <html>
 2 <head>
 3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 5     <style type="text/css">
 6         body, html {width: 100%;height:100%;margin:0;font-family:"微软雅黑";}
 7         #allmap{width:845px;height:400px;}
 8         p{margin-left:5px; font-size:14px;}
 9         .BMap_bubble_content{
10             color:red;
11         }
12     </style>
13     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您申请的百度的ak"></script>
14     <title>根据关键字本地搜索</title>
15 </head>
16 <body>
17     <div id="allmap"></div>
18 </body>
19 </html>
20 <script type="text/javascript">
21     // 百度地图API功能
22     var map = new BMap.Map("allmap");         //初始化地图
23     map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    
24     var local = new BMap.LocalSearch(map, {
25         onSearchComplete:myFun
26     });
27     map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
28     map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
29     local.search("您要搜索的地址");//这里是企业输入的地址
30     
31     function myFun() {
32             var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
33             map.centerAndZoom(pp,15); //设置地图显示中间点、地图显示级别
34             console.log(pp.lat,pp.lng)
35             var point = new BMap.Point(pp.lng,pp.lat);
36             var marker = new BMap.Marker(point);
37             map.addOverlay(marker);              // 将标注添加到地图中
38             map.centerAndZoom(point, 15);
39             var opts = {
40               width : 200,     // 信息窗口宽度
41               height: 80,     // 信息窗口高度
42               title : "xxxx公司" , // 信息窗口标题
43               enableMessage:true,//设置允许信息窗发送短息
44               message:""
45             }
46             var infoWindow = new BMap.InfoWindow("地址：XXXXXXX", opts);  // 创建信息窗口对象 
47             
48             //点击按钮弹出信息窗口
49             marker.addEventListener("click", function(){          
50                 map.openInfoWindow(infoWindow,point); //开启信息窗口
51             });
52         }
53 </script>