ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2020-11-30 12:03:40  阅读:240  来源: 互联网

标签:map 点位 name point js new var scope 百度



@{
    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">
                        <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=SdBo7l0PIykx28QBR4ZB8MdHgklBOyxT"></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.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;
                        }
                        console.log(scope.nowName);
                        //设置经纬度
                        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>
}


标签:map,点位,name,point,js,new,var,scope,百度
来源: https://www.cnblogs.com/lanofsky/p/14060417.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有