1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>百度地图API</title> 6 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=YzFULtBs2F38a25gkfG2hreC"></script> 7 </head> 8 <style> 9 #allmap{ 10 400px; 11 height: 400px; 12 } 13 </style> 14 <body> 15 <div id="allmap"></div> 16 <p class="msg"></p> 17 </body> 18 <script type="text/javascript"> 19 // 百度地图API功能 20 var map = new BMap.Map("allmap"); 21 map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); 22 function showInfo(e){ 23 document.querySelector('.msg').innerHTML='经纬度坐标:'+e.point.lng + ', '+ e.point.lat; 24 } 25 map.addEventListener("click",showInfo,false); 26 </script> 27 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>高德地图API</title> 6 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值"></script> 7 </head> 8 <body> 9 <div id="container" style="500px; height:300px"></div> 10 </body> 11 <script> 12 function init(){ 13 var map = new AMap.Map('container', { 14 center: [117.000923, 36.675807], 15 zoom: 6 16 }); 17 map.plugin(["AMap.ToolBar"], function() { 18 map.addControl(new AMap.ToolBar()); 19 }); 20 } 21 init() 22 </script> 23 </html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>百度API</title><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=YzFULtBs2F38a25gkfG2hreC"></script></head><style>#allmap{ 400px;height: 400px;}</style><body><div id="allmap"></div><p class="msg"></p></body><script type="text/javascript">// 百度地图API功能var map = new BMap.Map("allmap");map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);function showInfo(e){document.querySelector('.msg').innerHTML='经纬度坐标:'+e.point.lng + ', '+ e.point.lat;}map.addEventListener("click",showInfo,false);</script></html>