百度地圖api使用，簡單搜索+經緯度定位+自定義消息窗口

時間 2019-11-12

原文原文鏈接

 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。