地图api

 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         width: 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="width: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{width: 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>

猜你喜欢