百度API操作实例

最近修改公司项目,设计到了一个展示用户地址的功能,原先的功能已经失效,所以只好重新做这个功能了。

代码如下:

复制代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>百度地图</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body onload="getAdress()">
    <div style="width: 750px; height: 430px; border: 1px solid gray" id="container">
    </div>
    <div style="margin: 10px 0;">
        <input type="text" style="width: 300px; margin-left: 405px; border: 1px solid gray"
            value="" id="searchValue" />
        <input type="button" style="border: 1px solid gray" value="搜索" onclick="search()" /></div>
</body>
</html>
<script type="text/javascript">
    var map = new BMap.Map("container");
    map.centerAndZoom(new BMap.Point(121.461165, 31.234095), 11);
    function search() {
        //removeMarker();
        var address = document.getElementById('searchValue').value;
        var addresses = address.split("");
        var myAddress = null;
        if (addresses[1] == null) myAddress = address;
        else myAddress = addresses[1];
        var myGeo = new BMap.Geocoder();
        myGeo.getPoint(myAddress, function (point) {     //我输入的是“南京路”,第一步getPoint是地址解析。
            if (point) {
                map.centerAndZoom(point, 16);


                map.addOverlay(new BMap.Marker(point));//添加标注点

                myGeo.getLocation(point, function (rs) {  //这里弹出“南京路”的详细地址信息,第二步getLocation是反地址解析。
                    document.getElementById('searchValue').value = '具体位置:' + myAddress;
//alert(myAddress+'的具体位置是:'+addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
                });
            }
        }, "上海市");      //必须设置城市
    }
    function removeMarker() {   //清楚标注点
        var selector = document.getElementById("markers");
        var item = selector.options[selector.selectedIndex].value;
        maplet.removeOverlay(markerArr[item]);
        selector.removeChild(selector.options[selector.selectedIndex]);
        if (selector.options.length == 0) {
            selector.parentNode.removeChild(selector);
            document.body.removeChild(document.getElementById("delBtn"));
            document.getElementById("lab").innerHTML = "标注已经全部删除。";
            delete markerArr;
        }
    }
    function getAdress() {
        map.enableScrollWheelZoom();    // 启动鼠标滚轮操作
        map.enableKeyboard();               //启动键盘操作
        map.enableContinuousZoom();    // 开启连续缩放效果
        map.enableInertialDragging(); // 开启惯性拖拽效果
        var args = window.location.href.split("?");
        if (args == window.location.href) return;
        var str = args[1];
        var adress = str.split("=");
        document.getElementById('searchValue').value = adress[1];
        search();
    }
</script>
复制代码

 

 

 

posted @   EleMMent  阅读(1163)  评论(1编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示