.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>

// 获取搜索信息
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>

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