如何在頁面中生成動態的百度地圖

時間 2019-11-19

標籤如何頁面生成動態百度地圖简体版

原文原文鏈接

　　在如今的不少頁面中，都運用到了百度地圖來定位，例如：javascript

　　像這樣的地圖，咱們能夠經過手動來進行放大、縮小、移動等來查找具體的地址，特別方便，在頁面上引用也顯得頁面頗有特色，那麼，應該怎麼樣來製做這種地圖呢？php

1、獲取源代碼

　　　　　　網址：http://api.map.baidu.com/lbsapi/createmap/index.html?qq-pf-to=pcqq.c2c
html

1.打開網址，就能夠看到一個地圖編輯界面：java

2.在頁面右側設置地點等信息：api

1）設置地點app

2）設置地圖上的基本信息jsp

3）在地圖上添加標誌ide

　　　　點擊標記圖標還能夠選擇它的樣式：函數

4）獲取源代碼工具

　　　　點擊頁面下面的第二步中的獲取源代碼便可：

　　——————>

（注意：這裏生成的代碼是顯示不出來的，必須獲取密匙）

2、獲取密匙

1.點擊生成的代碼中的「獲取密匙」：，而後按照要求一步步填寫資料並提交，必定要注意必須進行認證。

2.將生成的Ak（即密匙）複製到代碼中，替換掉「您的密匙」

3、插入到本身的頁面中

按照本身的頁面要求將生成的代碼插入在頁面代碼中，可是必定要注意加載順序的問題：

　　方法1：若是js代碼是放在頁面代碼裏面的，注意把生成地圖js代碼放在頁面最下邊。

　　方法2：若是用的外部js連接，應該把地圖的js代碼放在 $(function(){...})裏面。

4、獨立地圖源碼

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3   <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta name="keywords" content="百度地圖,百度地圖API，百度地圖自定義工具，百度地圖所見即所得工具" />
 6     <meta name="description" content="百度地圖API自定義地圖，幫助用戶在可視化操做下生成百度地圖" />
 7     <title>百度地圖API自定義地圖</title>
 8     <!--引用百度地圖API-->
 9     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4mkBt21xAMGLFNxFo652P5Lq"></script>
10   </head>
11   
12   <body>
13     <!--百度地圖容器-->
14     <div style="width:700px;height:550px;border:#ccc solid 1px;font-size:12px" id="map"></div>
15     <p style="color:red;font-weight:600">地圖生成工具基於百度地圖JS api v2.0版本開發，使用請申請密匙。
16       <a href="http://developer.baidu.com/map/index.php?title=jspopular/guide/introduction" style="color:#2f83c7" target="_blank">瞭解如何申請密匙</a>
17       <a href="http://lbsyun.baidu.com/apiconsole/key?application=key" style="color:#2f83c7" target="_blank">申請密匙</a>
18     </p>
19   </body>
20   <script type="text/javascript">
21     //建立和初始化地圖函數：
22     function initMap(){
23       createMap();//建立地圖
24       setMapEvent();//設置地圖事件
25       addMapControl();//向地圖添加控件
26       addMapOverlay();//向地圖添加覆蓋物
27     }
28     function createMap(){ 
29       map = new BMap.Map("map"); 
30       map.centerAndZoom(new BMap.Point(121.515663,31.315091),18);
31     }
32     function setMapEvent(){
33       map.enableScrollWheelZoom();
34       map.enableKeyboard();
35       map.enableDragging();
36       map.enableDoubleClickZoom()
37     }
38     function addClickHandler(target,window){
39       target.addEventListener("click",function(){
40         target.openInfoWindow(window);
41       });
42     }
43     function addMapOverlay(){
44       var markers = [
45         {content:"公司地址：上海市政立路477號同和國際大廈A座501",title:"同和國際大廈",imageOffset: {width:-46,height:-21},position:{lat:31.314898,lng:121.514693}}
46       ];
47       for(var index = 0; index < markers.length; index++ ){
48         var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
49         var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
50           imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
51         })});
52         var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
53         var opts = {
54           width: 200,
55           title: markers[index].title,
56           enableMessage: false
57         };
58         var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
59         marker.setLabel(label);
60         addClickHandler(marker,infoWindow);
61         map.addOverlay(marker);
62       };
63     }
64     //向地圖添加控件
65     function addMapControl(){
66       var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
67       scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
68       map.addControl(scaleControl);
69       var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
70       map.addControl(navControl);
71       var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:false});
72       map.addControl(overviewControl);
73     }
74     var map;
75       initMap();
76   </script>
77 </html>