先是百度地图（百度地图有问题 获取的位置有偏差）但是Baidu有很多Demo
官方文档：http://developer.baidu.com/map/jsdevelop-1.htm#.E9.9D.A2.E5.90.91.E7.9A.84.E8.AF.BB.E8.80.85
DEMO在这里：http://developer.baidu.com/map/jsdemo.htm
不同的功能实际上就是JS语句调用多少...很方便噜
现在地图做的可好了！还有 开发者 和 小白 的选择。。。选Web开发就好噜...
下面就来一个 滚轮缩放+点击显示经纬度(第一行表示HTML5)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body,html,#allmap { 100%; height: 100%; overflow: hidden; margin: 0; } #l-map { height: 100%; 78%; float: left; border-right: 2px solid #bcbcbc; } #r-result { height: 100%; 20%; float: left; } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script> <title>百度地图的Hello, World</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> var map = new BMap.Map("allmap"); // 创建Map实例 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别。 map.enableScrollWheelZoom(); //启用滚轮放大缩小 map.addEventListener("click", function(e) { //点击显示经纬度 alert(e.point.lng + "," + e.point.lat); }); </script>
接下来是Google地图 示例打不开(需要科学上网) 文档介绍也很不全(应该是我没找到)...
使用GoogleAPI JS版 要获取一个key https://developers.google.com/maps/documentation/javascript/tutorial
代码来自http://bbs.zoomla.cn/showtopic-97538.aspx
和百度稍有不同 经纬度信息是在一起的 google可以添加Place标志 更好看一点
如果不想那么复杂 这个是简略版
google.maps.event.addListener(map, 'click', function(event) { alert(event.latLng); });
更多
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDv8y793pSxGHGq_Ks3PJem-gqIBcGSt9I&sensor=true"> </script> <script type="text/javascript"> var marker; function init() { var mapOption = { zoom : 9, center : new google.maps.LatLng(28.679143, 115.903015), mapTypeId : google.maps.MapTypeId.ROADMAP } var mapDiv=document.getElementById('map'); map = new google.maps.Map(mapDiv, mapOption); google.maps.event.addListener(map, 'click', function(event) { addMarker(event.latLng); }); } function addMarker(location) { marker = new google.maps.Marker({ position : location, map : map }); info = marker.getPosition(); alert(info); } </script> </head> <body onload="init();"> <div id="map" style=" 80%; height: 80%"></div> <div id="msg"></div> </body> </html>