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>
  • 相关阅读:
    算法笔记 #003# 堆排序
    算法导论(第三版)练习 6.2-1 ~ 6.2-6
    Python开发【第六篇】:模块
    Python开发【第五篇】:Python基础之杂货铺
    Python开发【第四篇】:Python基础之函数
    Python开发【第三篇】:Python基本数据类型
    Python开发【第二篇】:初识Python
    python mysql
    跟着ttlsa一起学zabbix监控呗
    zabbix进程构成
  • 原文地址:https://www.cnblogs.com/EleMMent/p/2877191.html
Copyright © 2011-2022 走看看