Baidu Google地图应用

先是百度地图（百度地图有问题  获取的位置有偏差）但是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 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
}
 
#l-map {
    height: 100%;
    width: 78%;
    float: left;
    border-right: 2px solid #bcbcbc;
}
 
#r-result {
    height: 100%;
    width: 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="width: 80%; height: 80%"></div>
    <div id="msg"></div>
</body>
</html>

 

 

 

posted @ 2013-04-08 18:41  cart55free99  阅读(247)  评论(0)  编辑  收藏  举报