地图对接汇总(百度地图)

时间：2024-02-25 12:59:43
<span style="font-family:Microsoft YaHei;font-size:14px;"><html>  
    <head>          
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
        <title>百度地图搜索</title>  
        <script type="text/javascript" src="http://mapclick.map.baidu.com/data/98_36_11_018.js"></script>  
        <script type="text/javascript"   
            src="http://api.map.baidu.com/api?v=1.5&ak=1jwM1UGS8wPTvaiUSUaUnuOG"></script>  
    </head>  
    <body>  
        <div style="width:520px;height:340px;border:1px solid gray" id="container"></div>  
          
        要查询的地址：<input id="text_" type="text" value="山东济南泉城广场" style="margin-right:100px;"/>  
        查询结果(经纬度)：<input id="result_" type="text" />  
        <input type="button" value="地址查询经纬度" onclick="searchByStationName();"/>  
          
        <div id="r-result">  
        城市名: <input id="cityName" type="text" style="width:100px; margin-right:10px;" />  
                <input type="button" value="查询" onclick="theLocation()" />  
        </div>  
        <div id="results" style="font-size:13px;margin-top:10px;"></div>  
    </body>  
</html>  
<script type="text/javascript">  
  
    var map = new BMap.Map("container");  
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  
    map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用  
    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用  
    //为了使用地图更加方便，我们还可以添加上缩放的平移控件，以及地图的缩略图控件，并设置他要显示的位置：  
    map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件  
    map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件  
    map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));   //右下角，打开  
      
    //var local = new BMap.LocalSearch(map, {  
    //    renderOptions: {map: map, panel: "results"}  
    //});  
    //var opts = {anchor: BMAP_ANCHOR_TOP_RIGHT, offset: map.getCenter()};  
    ////var opts = {anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(10, 10)};  
    //map.addControl(new BMap.NavigationControl(opts));  
      
    //local.search("北京市海淀区上地地铁站");  
      
      
      
    //1.构建搜索  
    var localSearch = new BMap.LocalSearch(map);  
    localSearch.enableAutoViewport(); //允许自动调节窗体大小  
    //2.开始做最关键的一步了，就是获取地址的具体经纬度：  
    var searchByStationName = function(){  
        var keyword = document.getElementById("text_").value;  
        //搜索回调方法  
    　　localSearch.setSearchCompleteCallback(function (searchResult) {  
            alert(searchResult);  
    　　　　var poi = searchResult.getPoi(0);  
    　　　　document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat; //获取经度和纬度，将结果显示在文本框中  
    　　　　map.centerAndZoom(poi.point, 13);  
    　　});  
    　　localSearch.search(keyword);  
    }  
      
      
    /********************************** 
    ***********百度地图API功能********* 
    **********************************/  
    //1.城市名定位  
    //var map = new BMap.Map("allmap");  
    //var point = new BMap.Point(116.331398,39.897445);  
    //map.centerAndZoom(point,11);  
  
    function theLocation(){  
        var city = document.getElementById("cityName").value;  
        if(city != ""){  
            map.centerAndZoom(city,11);      // 用城市名设置地图中心点  
        }  
    }  
      
    //2.IP定位获取当前城市  
    function myFun(result){  
        var cityName = result.name;  
        map.setCenter(cityName);  
        alert("当前定位城市:"+cityName);  
    }  
    var myCity = new BMap.LocalCity();  
    myCity.get(myFun);  
      
    //3.单击获取点击的经纬度  
    //单击获取点击的经纬度  
    var longitude = "";//经度  
    var latitude = "";//纬度  
    map.addEventListener("click",function(e){  
        alert("经度:"+e.point.lng + "," + "纬度:" +e.point.lat);  
        longitude = e.point.lng;  
        latitude = e.point.lat;  
        if(longitude != "" && latitude != ""){  
            map.clearOverlays();   
            var new_point = new BMap.Point(longitude,latitude);  
            var marker = new BMap.Marker(new_point);  // 创建标注  
            map.addOverlay(marker);              // 将标注添加到地图中  
            map.panTo(new_point);  
            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画  
        }  
    });  
      
      
    //4 用经纬度设置地图中心点  
    /*function theLocation(){ 
        if(longitude != "" && latitude != ""){ 
            map.clearOverlays();  
            var new_point = new BMap.Point(longitude,latitude); 
            var marker = new BMap.Marker(new_point);  // 创建标注 
            map.addOverlay(marker);              // 将标注添加到地图中 
            map.panTo(new_point); 
        } 
    }*/  
      
    //5.逆地址解析,点击地图展示详细地址  
    var geoc = new BMap.Geocoder();      
  
    map.addEventListener("click", function(e){          
        var pt = e.point;  
        geoc.getLocation(pt, function(rs){  
            var addComp = rs.addressComponents;  
            alert(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber);  
        });          
    });  
</script>  
</span>

附上baidu地图APIdemo地址：http://developer.baidu.com/map/jsdemo.htm

 

相关文章