基於高德的地圖數據展現

因本人能力有限，因此只扒下來的個原點標識

 

1、導入高德文件

　　

　　

<script type="text/javascript" src='https://a.amap.com/jsapi_demos/static/resource/capitals.js'></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=*****"></script>

　　****放的是你的key值    去高德平臺註冊一個就好了

2、HTML代碼

　　

　　大小後期本身調整

3、後臺代碼

　　

　　須要的是座標數據

4、js代碼

　　

　　

　　可複製代碼：

　　

<script type="text/javascript">
var map = new AMap.Map('map', {
zoom: 4,
center: [108, 34]
})
var arr = new Array();
$.ajax({
type: "post",
async: false, //同步執行
url: '@Url.Content("~/WMS_Map/ShowList")',
data: {},
dataType: "json", //返回數據形式爲json
success: function (result) {
if (result) {
for (var i = 0; i < result.rows.length; i++) {
arr.push({
X: result.rows[i].X,
Y: result.rows[i].Y
});
}
}
},
error: function (errorMsg) {
alert("很差意思,圖表請求數據失敗啦!");
myChart.hideLoading();
}
})
for (var i = 0; i < arr.length; i += 1) {
var center = capitals[i].center;
center[0] = arr[i].Y;
center[1] = arr[i].X;
var circleMarker = new AMap.CircleMarker({
center: center,
radius: 10 + Math.random() * 10,
strokeColor: 'white',
strokeWeight: 2,
strokeOpacity: 0.5,
fillColor: 'rgba(0,0,255,1)',
fillOpacity: 0.5,
zIndex: 10,
bubble: true,
cursor: 'pointer',
clickable: true
})
circleMarker.setMap(map)
}
</script>