先说简单需求吧。我们输入一个地理位置,点击确认后能在地图标记处带有关键字的位置。选中正确的位置可以获取到这个位置的经度和纬度。

先说简单需求吧。我们输入一个地理位置,点击确认后能在地图标记处带有关键字的位置。选中正确的位置可以获取到这个位置的经度和纬度。
首先需要导入百度地图的js文件,和JQ文件,这里使用的是1.3版本,在高版本需要设置appid等一些权限问题。
大家可以随意发挥


    
        
        
        
        
    
    
        
            
                
                    
                        
                            
                                
                                
                                    
                                        
                                            
                                                
                                                    
                                                        
                                                            
                                                                
                                                                
                                                                    
                                                                    
                                                                
                                                            
                                                        
                                                    
                                                
                                            
                                            
                                                
                                                    
                                                        地址:
                                                        
                                                            经度:
                                                            
                                                        
                                                        
                                                            纬度:
                                                            
                                                        
                                                    
                                                    
                                                         
                                                    
                                                
                                            
                                        
                                    
                                
                                
                            
                        
                    
                
            
        
    
    
        var search = "";

        var that = this;
        //多窗口模式,层叠置顶

        if ($("#address").val() != "") {
            $("#cityName").val($("#address").val());
        } else {
            $("#cityName").val("郑州");
        }
        var map = new BMap.Map("container"); //在container容器中创建一个地图,参数container为div的id属性;
        var point = new BMap.Point($("input[name=longitude]").val() == "" ? 113.627392 : $("input[name=longitude]").val(), $(
            "input[name=latitude]").val() == "" ? 34.831463 : $("input[name=latitude]").val()); //创建点坐标
        var marker = new BMap.Marker(point); // 创建标注
        map.addOverlay(marker); // 将标注添加到地图中

        map.centerAndZoom(point, 14); //初始化地图,设置中心点坐标和地图级别

        map.enableScrollWheelZoom(); //激活滚轮调整大小功能

        map.addControl(new BMap.NavigationControl()); //添加控件:缩放地图的控件,默认在左上角;

        map.addControl(new BMap.MapTypeControl()); //添加控件:地图类型控件,默认在右上方;

        map.addControl(new BMap.ScaleControl()); //添加控件:地图显示比例的控件,默认在左下方;

        map.addControl(new BMap.OverviewMapControl()); //添加控件:地图的缩略图的控件,默认在右下方; TrafficControl    
        //单击获取点击的经纬度
        map.addEventListener("click", function(e) {
            var jing_du_value = e.point.lng;
            var wei_du_value = e.point.lat;
            $("#jing_du").val(jing_du_value);
            $("#wei_du").val(wei_du_value);
        });

        search = new BMap.LocalSearch("中国", {

            onSearchComplete: function(result) {

                if (search.getStatus() == BMAP_STATUS_SUCCESS) {

                    var res = result.getPoi(0);

                    var point = res.point;

                    map.centerAndZoom(point, 11);

                }

            },
            renderOptions: { //结果呈现设置,

                map: map,

                autoViewport: true,

                selectFirstResult: true

            },
            onInfoHtmlSet: function(poi, html) { //标注气泡内容创建后的回调函数,有了这个,可以简单的改一下返回的html内容了。

                // alert(html.innerHTML)

            } //这一段可以不要,只不过是为学习更深层次应用而加入的。

        });
        search.search(document.getElementById("cityName").value);

        function setCity() {
            search.search(document.getElementById("cityName").value);

        }
    

大家可以根据自己的需要修改即可。

标签: 地图

添加新评论