zoukankan      html  css  js  c++  java
  • 百度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=" 750px; height: 430px; border: 1px solid gray" id="container">
        </div>
        <div style="margin: 10px 0;">
            <input type="text" style=" 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>
  • 相关阅读:
    git提交代码到github
    单例模式
    对列表里的单词进行计数
    如何对列表去重
    yield的表达式形式的应用(待补充)
    xshell连接centos虚拟机
    java.lang.OutOfMemoryError:GC overhead limit exceeded
    java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleException: Failed to start component [StandardEngine[Catalina]
    枚举类的用法讲解
    PowerDesigner使用方法入门学习
  • 原文地址:https://www.cnblogs.com/EleMMent/p/2877191.html
Copyright © 2011-2022 走看看