【js】【Demo】百度地图获取点位信息例子

@{
    ViewBag.Title = "坐标选择";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div ng-controller="FeiYeCtrl" ng-init="Init()" ng-cloak>
    <div class="col-md-12 col-sm-12 ">
        <div class="x_panel">
            <div class="x_content">
                <form id="demo-form2" class="form-horizontal" novalidate="">
                    <div class="item form-group">
                        <label class="col-form-label col-md-3 col-sm-3 label-align" for="last-name">
                            地区搜索： <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 ">
                            <input type="text" ng-model="name" ng-keyup="keyup($event)" required="required" class="form-control">
                        </div>
                        <div class="col-md-3 col-sm-3 ">
                            <button class="btn btn-default" ng-click="searchName()" type="button">搜索</button>
                        </div>
                    </div>
                    <div class="item form-group">
                        <div id="map1" class="col-md-12" style="height:400px;text-align:center">
                        </div>
                    </div>
                    <div class="item form-group">
                        <div class="col-md-12">
                            坐标：<span id="showInfo">{{nowName}}  {{c}}</span>
                        </div>
                    </div>
                    <div class="item form-group" style="text-align:center" ng-if="showButton">
                        <div class="col-md-12">
                            <button class="btn btn-primary" ng-click="Cancel()" type="button">取消</button>
                            <button type="button" ng-click="Submit()" class="btn btn-success">确定</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>

</div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=百度Ak"></script>

@section Script{
    <script>
        FeiYeNGApp.controller("FeiYeCtrl", ["$scope", "$rootScope", "$http", "AMAjax", function (scope, rootScope, http, Ajax) {

            scope.c = "@(Request["c"])";//纬,经
            scope.name = "@(Request["name"])";//初始搜索名字
            scope.showButton = "@(Request["showButton"])";
            scope.nowName = "";//显示当前点位名字

            scope.proportion = 18;//缩放比例，放大点的才精确
            scope.map = new BMap.Map("map1");//初始化地图
            scope.map.enableScrollWheelZoom();//启用滚轮缩放

            scope.Init = function () {
                if (scope.c) {
                    try {
                        //初始坐标
                        var list = scope.c.split(',');
                        scope.centerAndZoom(list[0], list[1]);
                    } catch (e) {
                        //默认坐标
                        scope.centerAndZoom(29.660143,106.55058);
                    }
                } else if (scope.name) {
                    //初始搜索
                    scope.LocalSearch(scope.name);
                } else {
                    //默认坐标
                    scope.centerAndZoom(29.660143,106.55058);
                }

                //设置地图点击事件scope.
                scope.map.addEventListener('click', function (e) {

                    scope.map.clearOverlays();//清除所有红点
                    
                    //设置新红点
                    var new_point = new BMap.Point(e.point.lng, e.point.lat);
                    var new_mk = new BMap.Marker(new_point);
                    scope.map.addOverlay(new_mk);
                    scope.map.panTo(new_point);

                    //获取当前点击位置信息
                    var gc = new BMap.Geocoder();
                    gc.getLocation(new_point, function (rs) {
                        //获取当前点击 位置的 信息，设置地址名字
                        if (rs.surroundingPois && rs.surroundingPois.length > 0) {
                            var p = rs.surroundingPois[0];
                            scope.nowName = p.title;
                        } else {
                            var p = rs.addressComponents;
                            scope.nowName = p.district + " " + p.street;
                        }
                        //设置经纬度
                        scope.$apply(function () {
                             //写在$apply内才ng重新渲染
                            scope.c = rs.point.lng + "," + rs.point.lat;
                            scope.name = scope.nowName;
                        });
                    });
                });
            }

            //设置中心点经纬度
            scope.centerAndZoom = function (j, w) {

                scope.map.clearOverlays();//清除所有红点

                //设置新红点
                var new_point = new BMap.Point(j, w);
                var new_mk = new BMap.Marker(new_point);
                scope.map.addOverlay(new_mk);
                scope.map.panTo(new_point);

                //定位到经纬度
                scope.map.centerAndZoom(new_point, scope.proportion);
            }

            //检索地图
            scope.LocalSearch = function (name) {
                var options = {
                    renderOptions:{map: scope.map},
                    onSearchComplete: function (results) {
                    }
                };
                var local = new BMap.LocalSearch(scope.map, options, scope.proportion);
                local.search(name);
            }

            scope.searchName = function () {
                scope.LocalSearch(scope.name);
            }
            scope.keyup = function (e) {
                if (e.keyCode == 13) {
                    scope.searchName();
                }
            }
            scope.Submit = function () {
                var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                parent.layer.close(index);//关闭当前窗口

                //回调
                parent.angular.element("div[ng-controller='FeiYeCtrl']").scope().RenewList(scope.c,scope.name);
            }

            scope.Cancel = function () {
                var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                parent.layer.close(index);
            }
        }]);
    </script>
}