標籤：javascript 百度地圖 js utf-8
轉載請註明出處
本文為原創
injuer
嚴禁用於商業用途，僅學習交流
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">#container{ width:100%; height:100%;}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=*******"></script> </head> <body> <div id="container"></div> </body> <script type="text/javascript"> var extMap = { load : function(data, controls){ var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(data.lng, data.lat), 12); if(null != controls){ for(var i = 0; i < controls.length; i++){ map.addControl(controls[i]); } } return map; }, addData : function(map,data){ var marke = null; var label = null; var temp = null; for(var i = 0; i < data.length; i++){ temp = data[i]; marke = new BMap.Marker(new BMap.Point(temp.lng, temp.lat)); marke.setTitle(temp.title); if(null != temp.icon && "" != temp.icon){ marke.setIcon(new BMap.Icon(temp.icon, new BMap.Size(temp.icon_width, temp.icon_height))); } this.addMenu(marke, temp); this.addMarkerEventListener(map, marke, temp); this.addLabel(map, marke, temp); } return map; }, addMenu : function(marke, data){ var ms = data.menu; var m = null; m = new BMap.ContextMenu(); for(var i = 0; i < ms.length; i++){ m.addItem(new BMap.MenuItem(ms[i].root, ms[i].fun)); } marke.addContextMenu(m); }, addMarkerEventListener : function(map, marke, data){ marke.addEventListener("click", function(event){ var w = extMap.createWindow(data); marke.openInfoWindow(w); }); map.addOverlay(marke); }, addLabel : function(map, marke, data){ label = new BMap.Label(data.text);label.setPosition(new BMap.Point(data.lng - 0.5 / 1000, data.lat));label.show();map.addOverlay(label); }, createWindow : function(data){ var w = new BMap.InfoWindow(data.des, { height : 0, maxWidth : 0, title : data.title, enableMessage : true, message : data.msg }); return w; } } var data = new Array(); for(var i = 0; i < 3; i++){ data.push({ lng : 102.711 + (i /1000), lat : 25.05 + (i /1000), icon : null, text : "這是內容" + i, title : "<h5>這是標題</h5>" + i, des : "這是描述" + i, msg : "這是簡訊" + i, icon_width : 0, icon_height : 0, menu : [ { root : "根目錄0", fun : function(){ alert("點擊了根目錄0"); }, }, { root : "根目錄1", fun : function(){ alert("點擊了根目錄1"); } }, { root : "根目錄2", fun : function(){ alert("點擊了根目錄2"); } } ] }); } var map = extMap.addData(extMap.load(data[0], [ new BMap.ScaleControl(), new BMap.OverviewMapControl(), new BMap.NavigationControl() ]), data); </script></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
