要引入高德地图首先要引入官方给的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);"></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>
打开页面站点就会显示在地图上了。