zoukankan      html  css  js  c++  java
  • .net core 引入高德地图

        要引入高德地图首先要引入官方给的api接口,具体操作可以查看官方api,那里因具体实例,看一下基本就没啥问题了。

       我们这边需求

        1,通过添加站点,输入站点位置来动态获取该站点的坐标。

             首先进图站点添加界面:

        

     输入具体区县和站点地址,获取坐标:

      

     <div class="layui-form-item" hidden="hidden">
                        <label for="JZ_MapX" class="layui-form-label"><span class="x-red">*</span>经度</label>
                        <div class="layui-input-inline">
                            @Html.TextBoxFor(m => m.JZ_MapX, null, new Dictionary<string, object> { { "class", "layui-input" }, { "readonly", "readonly" }, { "lay-verify", "required" } })
                        </div>
                        <div class="layui-form-mid layui-word-aux"><span class="x-red">*</span></div>
                    </div>
                    <div class="layui-form-item" hidden="hidden">
                        <label for="Z_MapY" class="layui-form-label"><span class="x-red">*</span>纬度</label>
                        <div class="layui-input-inline">
                            @Html.TextBoxFor(m => m.JZ_MapY, null, new Dictionary<string, object> { { "class", "layui-input" }, { "readonly", "readonly" }, { "lay-verify", "required" } })
                        </div>
                        <div class="layui-form-mid layui-word-aux"><span class="x-red">*</span></div>
                    </div>
    
                    <div class="layui-form-item">
                        <label for="GetLocation" class="layui-form-label"><span class="x-red"></span>坐标</label>
                        <div class="layui-input-inline">
                            <input id="getXY" name="getXY" class="layui-input" readonly="readonly" />
                        </div>
                        <div class="layui-form-mid layui-word-aux"><span class="x-red"> <a class="layui-btn" onclick="autoInput()">获取坐标</a></span></div>
                    </div>

               <div hidden="hidden">
                       <div id="container"></div>
                       <div class="info">
                      <h4>搜索结果展示</h4>
                     <p><span id="input-info"></span></p>
                      </div>
                 </div>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <link rel="stylesheet" type="text/css" href="https://a.amap.com/jsapi_demos/static/demo-center/css/prety-json.css">
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=8010097315ab501d7866f25f2a8e0c4e&plugin=AMap.Geocoder"></script>
    <script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/underscore-min.js"></script>
    <script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/backbone-min.js"></script>
    <script type="text/javascript" src='https://a.amap.com/jsapi_demos/static/demo-center/js/prety-json.js'></script>
    <script type="text/javascript">
    // 初始化地图
    var map = new AMap.Map("container", {
    resizeEnable: true
    });

    // 获取搜索信息
    function autoInput() {
    var keywords = $('#cityid option:selected').text() + $('#areaid option:selected').text() + $("#JZ_Address").val();
    AMap.plugin('AMap.PlaceSearch', function () {
    var autoOptions = {
    city: '全国'
    }
    var placeSearch = new AMap.PlaceSearch(autoOptions);
    placeSearch.search(keywords, function (status, result) {
    if ($("#areaid").val() == "0" || $("#JZ_Address").val().length==0){
    alert("请先选择省市区和详细地址!");
    return false;
    }
    if (result.info == 'OK') {
    alert("获取位置成功!");
    var str = '(' + result.poiList.pois[0].location.lng + ',' + result.poiList.pois[0].location.lat + ')';
    $("#getXY").val(str);
    $("#JZ_MapX").val(result.poiList.pois[0].location.lng);
    $("#JZ_MapY").val(result.poiList.pois[0].location.lat);
    } else {
    alert("获取位置坐标失败!")
    return false;
    }
    // 搜索成功时,result即是对应的匹配数据
    //ar node = new PrettyJSON.view.Node({
    // el: document.querySelector("#input-info"),
    // data: result
    //);

    })
    })
    }

    </script>

        2,在平台上引入地图,将站点显示在地图上。

        获取所有站点信息的坐标:

      public IActionResult Index()
            {
                int JZ_ID = ConvertHelper.SafeRequest("JZ_ID", 0, Request);
                string sqlJZ_ID = "SELECT  JZ_ID,JZ_NAME,JZ_Address,JZ_MapX,JZ_MapY FROM [dbo].[JZ_JIZHAN] where JZ_ID=" + JZ_ID;
                DataTable ds= SqlHelper.Query(sqlJZ_ID);
                DataRow row = ds.Rows[0];
                //[114.454757, 32.712952] 
                ViewData["GetX"] = row["JZ_MapX"].ToString().Length > 0 ? row["JZ_MapX"].ToString() : "114.454757";
                ViewData["GetY"] = row["JZ_MapY"].ToString().Length > 0 ? row["JZ_MapY"].ToString() : "32.712952";
                return View();
            }
    @using SmartNet.Data;
    @using System.Data;
    @using SmartNet.Entity;
    @using SmartNet.Core;
    @{
        Layout = "~/Views/Shared/_LayouList.cshtml";
        int JZ_ID = ConvertHelper.SafeRequest("JZ_ID", 0, this.Context.Request);
    }
    
    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
        <title>编辑多边形</title>
        <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=760d16c25fa8ee3c547b693a6c414821&plugin=AMap.DistrictSearch,Map3D"></script>
        <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
        <style>
            html,
            body,
            #container {
                margin: 0;
                height: 78%;
            }
    
            #SouSuo {
                height: 50px;
                 50px;
                z-index: 30;
                position: absolute;
                margin-left: 80px
            }
        </style>
    </head>
    <body>
        <div id="container"> <div id="SouSuo"> <button class="layui-icon layui-btn layui-btn-normal" onclick="javascript:window.history.back(-1);">&#xe65c;</button></div></div>
    
        <input hidden="hidden" id="GetX" name="" value="@ViewData["GetX"]" />
        <input hidden="hidden" id="GetY" name="jsonall" value="@ViewData["GetY"]" />
        <script>
            //(113.747883,34.385113)(113.665412,34.757975)(113.826063,34.022956)
            var p;//定义景点坐标数组
            var markers = [];//记录所有景点的Marker信息
            var _location;
            var map = new AMap.Map('container', {
                resizeEnable: true,
                zoom: 10,
                viewMode: '3D',
                center: [$("#GetX").val(), $("#GetY").val()],
                mapStyle: 'amap://styles/5a2dbb143362de08809a8aebe25ca455',
              //  layers: [
                   // new AMap.TileLayer.RoadNet({
                    //  zIndex: 20
                 //  })
              // new AMap.TileLayer({
               //   zIndex: 6,
               //  opacity: 1,
               //getTileUrl: 'https://t{1,2,3,4}.tianditu.gov.cn/DataServer?T=ter_w&x=[x]&y=[y]&l=[z]'
            //  getTileUrl: 'https://t{s}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=5ecfe4e0cecdafec9a858e37c261084c'
             //  })]
            });
            loadScenic();
            addmarker();
            new AMap.DistrictSearch({
                extensions: 'all',
                subdistrict: 0
            }).search('河南', function (status, result) {
                // 外多边形坐标数组和内多边形坐标数组
                var outer = [
                    new AMap.LngLat(-360, 90, true),
                    new AMap.LngLat(-360, -90, true),
                    new AMap.LngLat(360, -90, true),
                    new AMap.LngLat(360, 90, true),
                ];
                var holes = result.districtList[0].boundaries
    
                var pathArray = [
                    outer
                ];
                /* pathArray.push.apply(pathArray, holes)
                 var polygon = new AMap.Polygon({
                      pathL: pathArray,
                      strokeColor: '#00eeff',
                      strokeWeight: 1,
                      fillColor: '#71B3ff',
                      fillOpacity: 1
                  });
                  polygon.setPath(pathArray);
                  map.add(polygon);
                  var bounds = map.getBounds(); // 获取显示范围
                  map.setLimitBounds(bounds); // 限制地图显示范围
                 */
    
            });
    
            function addmarker() {
                //var markers = [];
                for (var i = 0; i < p.length; i++) {
                    var point = [p[i].x, p[i].y]
                    var locationxy = "("+p[i].x.toString() +","+ p[i].y.toString()+")";
                    var marker = new AMap.Marker({
                        position: point,
                        map: map,
                        title: locationxy,
                        address: p[i].address,
                        icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
                        visible: true,
    
                    });
                    marker.setLabel({
                        offset: new AMap.Pixel(-60, -40),  //设置文本标注偏移量
                        content: p[i].title, //设置文本标注内容
                        direction: 'right' //设置文本标注方位
                    });
                    AMap.event.addListener(marker, 'click', function (e) {
                        var clouddata = e.target.He;
                        _location = [clouddata.position.lng, clouddata.position.lat];
                        //var photo = ['<img width=240 height=100 src="' + clouddata.img + '"><br>'];
                        var infoWindow = new AMap.InfoWindow({
                            content: "<font class='title'>" + "名称:" + clouddata.title + "<br />" + "地址:" + clouddata.address + "<br />" + "联系电话:" + "021-69237067" + "<br />" + "经纬度:" + _location,
                            size: new AMap.Size(0, 0),
                            autoMove: true,
                            offset: new AMap.Pixel(0, -25)
                        });
                        infoWindow.open(map, _location);
                        console.log(clouddata);
                    });
                    markers.push(marker);
    
                }
                //map.setFitView();
            }
            //(114.454757,32.712952)
            function loadScenic() {
                p = [
                    @{
                        string strJson = "";
                        DataTable ds = SqlHelper.Query("SELECT  JZ_ID,JZ_NAME,JZ_Address,JZ_MapX,JZ_MapY  FROM [dbo].[JZ_JIZHAN] where JZ_AreaID in(SELECT [JZ_AreaID] FROM [dbo].[JZ_JIZHAN] where JZ_ID="+JZ_ID+")");
                        for (int i = 0; i < ds.Rows.Count; i++)
                        {
                            DataRow row = ds.Rows[i];
    
                            if (row["JZ_MapY"].ToString().Length>0&& row["JZ_MapX"].ToString().Length>0)
                            {
                                strJson += "{x:" + row["JZ_MapX"].ToString() + ",y:" + row["JZ_MapY"].ToString() + ",title:'" + row["JZ_NAME"] + "'," + "address: '" + row["JZ_Address"].ToString() + "'},";
                            } }
                        strJson = strJson.TrimEnd(',');
                          @Html.Raw(strJson);
                    }
                ];
    
            }
        </script>
    
    </body>
    </html>

    打开页面站点就会显示在地图上了。

  • 相关阅读:
    Python的条件判断和循环
    Python分支和循环结构的练习
    Python的变量和运算符
    Python简介
    Git的使用及网络编程多线程多进程
    函数面向对象编程及文件的读取
    函数模块字符串列表
    python变量运算符分支结构循环结构及例题
    集合
    三级菜单
  • 原文地址:https://www.cnblogs.com/zpy1993-09/p/13588983.html
Copyright © 2011-2022 走看看