前端调用baidu地图api实现地图功能

2019-09-10 郑州网站建设  

有时候网站需要地图功能,div+css5的小编给大家介绍一下怎么实现站点地图功能:

<!DOCTYPE html>
<html>

        <head>
                <meta charset="UTF-8">
                <title></title>
                <script src=http://www.divcss5.com/html5/"http:/api.map.百度.com/api?v=2.0&ak=W1a6ywZFkybedSCHadpRbkz4w5HYfG4R" type="text/javascript" charset="utf-8"></script>
                <style type="text/css">
                        * {
                                margin: 0;
                                padding: 0;
                        }
                        
                        html,
                        body {
                                width: 100%;
                                height: 100%;
                                position: relative;
                        }
                        
                        h3 {
                                display: block;
                                width: 100%;
                                height: 60px;
                                line-height: 60px;
                                text-align: center;
                                background: aquamarine;
                                color: #fff;
                                font-size: 40px;
                        }
                        
                        #allmap {
                                width: 100%;
                                height: 700px;
                        }
                        #r-result{
                                position: absolute;
                                left: 0;
                                top: 100px;
                                background: #000;
                                color: #fff;
                        }
                </style>
        </head>

        <body>
                <h3>
我的地图</h3>
                <div id="allmap"></div>
                <div id="r-result">
请输入:<input type="text" id="suggestId" size="20" value="baidu" style="width:150px;" /></div>
                <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                <script type="text/javascript">
                        var map = new BMap.Map("allmap");
                        map.centerAndZoom("
郑州", 15); // 初始化地图,设置中心点坐标和地图级别
                        map.addControl(new BMap.MapTypeControl()); //
添加地图类型控件
                        map.setCurrentCity("
"); // 设置地图显示的城市此项是必须设置的
                        map.enableScrollWheelZoom(true); //
开启鼠标滚轮缩放
                        function G(id) {
                                return document.getElementById(id);
                        }
                        var ac = new BMap.Autocomplete( //
建立一个自动完成的对象
                                {
                                        "input": "suggestId",
                                        "location": map
                                });

                        ac.addEventListener("onhighlight", function(e) { //
鼠标放在下拉列表上的事件
                                var str = "";
                                var _value = e.fromitem.value;
                                var value = "";
                                if(e.fromitem.index > -1) {
                                        value = _value.province + _value.city + _value.district + _value.street + _value.business;
                                }
                                str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

                                value = "";
                                if(e.toitem.index > -1) {
                                        _value = e.toitem.value;
                                        value = _value.province + _value.city + _value.district + _value.street + _value.business;
                                }
                                str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
                                G("searchResultPanel").innerHTML = str;
                        });

                        var myValue;
                        ac.addEventListener("onconfirm", function(e) { //
鼠标点击下拉列表后的事件
                                var _value = e.item.value;
                                myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
                                G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

                                setPlace();
                        });

                        function setPlace() {
                                map.clearOverlays(); //
清除地图上所有覆盖物
                                function myFun() {
                                        var pp = local.getResults().getPoi(0).point; //
获取第一个智能搜索的结果
                                        map.centerAndZoom(pp, 18);
                                        map.addOverlay(new BMap.Marker(pp)); //
添加标注
                                }
                                var local = new BMap.LocalSearch(map, { //
智能搜索
                                        onSearchComplete: myFun
                                });
                                local.search(myValue);
                        }
                </script>

        </body>

</html>


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1791.html转载请标明出处,谢谢合作!
标签:
  • DIV
  • 有时候
  • +
  • 需要
  • CS
  • api
  • 功能
  • 网站
  • 地图