百度地圖API快速調用,一鍵生成百度地圖
阿新 • • 發佈:2018-04-03
百度地圖API對於在網站或者網頁之內插入百度地圖插件,可能很多編程技術人員都知道如何來做,但是做起來所花費的時間都比較長,那麽下面跟大家分享一下如何快速調用百度地圖API,一件生成百度地圖的方法,這種方法適用於任何的編程語言,所以有興趣的編程開發者可以保存一下。
body之間源代碼如下:
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
body之間源代碼如下:
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<div id="map" class="map_cont" style="width:600px;height:400px"></div>
<script type="text/javascript"> //創建和初始化地圖函數: function initMap() { createMap();//創建地圖 setMapEvent();//設置地圖事件 addMapControl();//向地圖添加控件 addMarker();//向地圖中添加marker } //創建地圖函數: function createMap() { var map = new BMap.Map("map");//在百度地圖容器中創建一個地圖 var point = new BMap.Point(113.610508, 34.766151);//定義一個中心點坐標 map.centerAndZoom(point, 18);//設定地圖的中心點和坐標並將地圖顯示在地圖容器中 window.map = map;//將map變量存儲在全局 } //地圖事件設置函數: function setMapEvent() { map.enableDragging();//啟用地圖拖拽事件,默認啟用(可不寫) map.enableScrollWheelZoom();//啟用地圖滾輪放大縮小 map.enableDoubleClickZoom();//啟用鼠標雙擊放大,默認啟用(可不寫) map.enableKeyboard();//啟用鍵盤上下左右鍵移動地圖 } //地圖控件添加函數: function addMapControl() { //向地圖中添加縮放控件 var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(ctrl_nav); //向地圖中添加縮略圖控件 var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 }); map.addControl(ctrl_ove); //向地圖中添加比例尺控件 var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }); map.addControl(ctrl_sca); } //標註點數組 var markerArr = [{ title: "什麽什麽網絡科技有限公司", content: "地址:鄭州市中原區虎踞北路10-2號牛頓文創園5樓503室<br/>電話:025-85615899", point: "113.610508|34.766151", // point: "118.762938|32.069151", isOpen: 0, icon: { w: 23, h: 25, l: 46, t: 21, x: 9, lb: 12 } } ]; //創建marker function addMarker() { for (var i = 0; i < markerArr.length; i++) { var json = markerArr[i]; var p0 = json.point.split("|")[0]; var p1 = json.point.split("|")[1]; var point = new BMap.Point(p0, p1); var iconImg = createIcon(json.icon); var marker = new BMap.Marker(point, { icon: iconImg }); var iw = createInfoWindow(i); var label = new BMap.Label(json.title, { "offset": new BMap.Size(json.icon.lb - json.icon.x + 10, -20) }); marker.setLabel(label); map.addOverlay(marker); label.setStyle({ borderColor: "#808080", color: "#333", cursor: "pointer" }); (function () { var index = i; var _iw = createInfoWindow(i); var _marker = marker; _marker.addEventListener("click", function () { this.openInfoWindow(_iw); }); _iw.addEventListener("open", function () { _marker.getLabel().hide(); }) _iw.addEventListener("close", function () { _marker.getLabel().show(); }) label.addEventListener("click", function () { _marker.openInfoWindow(_iw); }) if (!!json.isOpen) { label.hide(); _marker.openInfoWindow(_iw); } })() } } //創建InfoWindow function createInfoWindow(i) { var json = markerArr[i]; var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.jpg", new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowOffset: new BMap.Size(json.lb + 5, 1), offset: new BMap.Size(json.x, json.h) }) var iw = new BMap.InfoWindow("<b class=‘iw_poi_title‘ title=‘" + json.title + "‘>" + json.title + "</b><div class=‘iw_poi_content‘>" + json.content + "</div>"); return iw; } //創建一個Icon function createIcon(json) { } initMap();//創建和初始化地圖 </script> 相信嘗試過之後,各位編程技術人員已經看到效果了,如果有什麽好的想法,可以在下方評論區留言,我們互相共同進步。
本文由專業做app開發制作、微信小程序開發、網站建設的鄭州燚軒軟件科技發表,如需轉載請註明原文作者及出處!
百度地圖API快速調用,一鍵生成百度地圖