<!doctype html>
<html>
<head>
<meta content="" 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>
<!-- 地图的css及js，不可缺少-->
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0" />
<script type="text/javascript" src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=f034871b532a7bfb2d93f18e915b322c&plugin=AMap.DistrictSearch"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<!-- 弹出信息框样式-->
<style type="text/css">
.info-title {
color: white;
font-size: 14px;
background-color: blue;
line-height: 26px;
padding: 0px 0 0 6px;
font-weight: lighter;
letter-spacing: 1px;
}
.info-content {
font: 12px Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial;
padding: 4px;
color: #666666;
line-height: 23px;
}
.info-content img {
float: left;
margin: 3px;
}
#tip {
background-color: #fff;
padding: 0 10px;
border: 1px solid silver;
box-shadow: 3px 4px 3px 0px silver;
position: absolute;
font-size: 12px;
right: 10px;
top: 5px;
border-radius: 3px;
line-height: 36px;
}
</style>
</head>
<body onload="mapInit()">
<div id="container">
</div>
<div class="button-group" style="*position:absolute;top:90%;left:20%;text-align:center;">
<input type="button" class="button" value="添加" onclick="addMarker();" />
<!--<input type="button" class="button" value="更新站点" id="updateMarker()" />-->
<input type="button" class="button" value="删除" onclick="deleteMarker()" />
</div>
<!--var MM = new csMenu(document.getElementById("container"), document.getElementById("Menu1"));
<div id="Menu1" style="background-color:White; border:1px solid #cccccc; padding:10px;">
<li>打开</li>
<li>打印</li>
<li>回复发件人</li>
<li>全部回复</li>
<li>转发</li>
<li>分配</li>
<li>垃圾邮件</li>
<li>删除</li>
<li>归档此邮件</li>
<li>分拣此邮件</li>
</div>
/////////////////////////////////////////////////////-->
<script type="text/javascript">
function csMenu(_object, _menu) {
this.IEventHander = null;
this.IFrameHander = null;
this.IContextMenuHander = null;
this.Show = function (_menu) {
var e = window.event || event;
if (e.button == 2) {
if (window.document.all) {
this.IContextMenuHander = function () { return false; };
document.attachEvent("oncontextmenu", this.IContextMenuHander);
}
else {
this.IContextMenuHander = document.oncontextmenu;
document.oncontextmenu = function () { return false; };
}
window.csMenu$Object = this;
this.IEventHander = function () { window.csMenu$Object.Hide(_menu); };
if (window.document.all)
document.attachEvent("onmousedown", this.IEventHander);
else
document.addEventListener("mousedown", this.IEventHander, false);
_menu.style.left = e.clientX;
_menu.style.top = e.clientY;
_menu.style.display = "";
if (this.IFrameHander) {
var _iframe = document.getElementById(this.IFrameHander);
_iframe.style.left = e.clientX;
_iframe.style.top = e.clientY;
_iframe.style.height = _menu.offsetHeight;
_iframe.style.width = _menu.offsetWidth;
_iframe.style.display = "";
}
}
};
this.Hide = function (_menu) {
var e = window.event || event;
var _element = e.srcElement;
do {
if (_element == _menu) {
return false;
}
}
while ((_element = _element.offsetParent));
if (window.document.all)
document.detachEvent("on" + e.type, this.IEventHander);
else
document.removeEventListener(e.type, this.IEventHander, false);
if (this.IFrameHander) {
var _iframe = document.getElementById(this.IFrameHander);
_iframe.style.display = "none";
}
_menu.style.display = "none";
if (window.document.all)
document.detachEvent("oncontextmenu", this.IContextMenuHander);
else
document.oncontextmenu = this.IContextMenuHander;
};
this.initialize = function (_object, _menu) {
window._csMenu$Object = this;
var _eventHander = function () { window._csMenu$Object.Show(_menu); };
_menu.style.position = "absolute";
_menu.style.display = "none";
_menu.style.zIndex = "1000000";
if (window.document.all) {
var _iframe = document.createElement('iframe');
document.body.insertBefore(_iframe, document.body.firstChild);
_iframe.id = _menu.id + "_iframe";
this.IFrameHander = _iframe.id;
_iframe.style.position = "absolute";
_iframe.style.display = "none";
_iframe.style.zIndex = "999999";
_iframe.style.border = "0px";
_iframe.style.height = "0px";
_iframe.style.width = "0px";
_object.attachEvent("onmouseup", _eventHander);
}
else {
_object.addEventListener("mouseup", _eventHander, false);
}
};
this.initialize(_object, _menu);
}
/////////////////////////////////////////////////
</script>
<script type="text/javascript">
//添加站点
function addMarker() {
//获取经纬度
var lnglat = getlnglat();
//document.getElementById("myPageTop").style.display = "none"; //隐藏
document.getElementById("myPageTop").style.display = ""; //显示
}
//添加Marker
function AddMarkerBtn() {
//获取经纬度
var lnglat = document.getElementById("lnglat").value;
//获取站点名
var siteName = document.getElementById("siteName").value;
//获取站点负责人
var WorkerName = document.getElementById("WorkerName").value;
//获取详细地址
var DeiliteAddress = document.getElementById("tipinput").value;
//定义经度
var lng = "";
//定义纬度
var lat = "";
//给经度赋值 从0开始到，结束
lng = lnglat.substr(0, lnglat.indexOf(","));
//给纬度赋值 从，后一位开始到数组的总长结束
lat = lnglat.substr(lnglat.indexOf(",") + 1, lnglat.length - 1);
if (lnglat == "" || lnglat == null) {
alert("请单击地图获取坐标或输入相应地址或取坐标后重试！");
} else {
if (WorkerName != "" && siteName != "") {
window.external.addMarker(siteName, WorkerName, lng, lat, DeiliteAddress); //getDebugPath()为c#方法
document.getElementById("myPageTop").style.display = "none"; //隐藏
} else {
alert("请填写相关数据！");
}
}
}
//隐藏窗体
function ColseaddMarkerWindow() {
document.getElementById("myPageTop").style.display = "none"; //隐藏
}
//获取单击的点的经纬度
function clearMarker(e) {
//获取到单击的点坐标
var lat = e.target.getPosition();
//把坐标存入全局变量
getlnglatPoint = lat;
}
//删除点
function deleteMarker() {
//取全局变量的经纬度值
var lnglat = getlnglatPoint;
//转换成字符串
lnglat = lnglat + "";
//定义经度
var lng = "";
//定义纬度
var lat = "";
//给经度赋值 从0开始到，结束
lng = lnglat.substr(0, lnglat.indexOf(","));
//给纬度赋值 从，后一位开始到数组的总长结束
lat = lnglat.substr(lnglat.indexOf(",") + 1, lnglat.length - 1);
if (lnglat == "" || typeof (lnglat) == null) {
alert("请选择一个点！");
} else {
//调用后台方法，进行删除
window.external.deleteMarker(lng, lat); //getDebugPath()为c#方法
}
}
//刷新页面
function updateMarker() {
window.external.FindUserMobilephone();
}
//全局变量，存储经纬度
var getlnglatPoint = "";
//获取参数说明， 定义一个变量，调用GetQueryString("传入参数名");方法即可，返回的是一个数组
//------------------------------------------------------------------------------------------------接收参数
//获取经纬度
var arrdes = GetQueryString("lnglat");
//获取站点名称
var siteName = GetQueryString("siteNaem");
//站点负责人
var WorkerName = GetQueryString("WorkerName");
//获取站点具体地址
var FullName = GetQueryString("FullName");
//获取Url参数值，传入参数名即可,返回的是一个数组
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
var value = unescape(r[2]);
//去掉最后一个字符，是一个，号
value = value.substr(0, value.length - 1);
//定义一个数组来存放传过来的所有参数
var Arrvalue = [];
//给arrdes赋值 string2Array方法下面有说明
Arrvalue = string2Array(value);
return Arrvalue;
} else {
return null;
}
}
//将字符转换为数组的方法,去除分割标志
function string2Array(stringObj) {
stringObj = stringObj.replace(/\[([\w, ]*)\]/, "$1");
if (stringObj.indexOf("[") == 0) {// if has chinese
stringObj = stringObj.substring(1, stringObj.length - 1);
}
var arr = stringObj.split("p"); //------------ !!!!!!!!!!!!注意：分割标志p
var newArray = []; //new Array();
for (var i = 0; i < arr.length; i++) {
var arrOne = arr[i];
newArray.push(arrOne);
}
// console.log(newArray);
return newArray;
};
// 创建一个地图
var map = new AMap.Map('container', {
resizeEnable: true, //是否监控地图容器尺寸变化，默认值为false
zoom: 13, //初始化大小，从国到街为3-18
center: [126.48, 46.83] //初始化中心点，传入经纬度
});
//定义需要的地图控件，类似于实例化一个对象
AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView', 'AMap.MapType', 'AMap.Geolocation'],
//添加地图控件 若不需要，可直接删除代码
function () {
//集成了缩放、平移、定位等功能按钮在内的组合控件 界面操作集成(鼠标右键双击缩小，鼠标左键双击放大，移动，鼠标滑轮缩放)
map.addControl(new AMap.ToolBar());
//展示地图在当前层级和纬度下的比例尺 左下
map.addControl(new AMap.Scale());
//在地图右下角显示地图的缩略图 右下
map.addControl(new AMap.OverView({ isOpen: false }));//默认不打开
//实现默认图层与卫星图、实施交通图层之间切换的控 右上
//map.addControl(new AMap.MapType());
//用来获取和展示用户主机所在的经纬度位置 左下
map.addControl(new AMap.Geolocation());
});
//创建一个信息框，offset是信息框对点的偏移程度，可以调整
var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
for (var i = 0, marker; i < arrdes.length; i++) {
//定义经度
var lng = "";
//定义纬度
var lat = "";
//把数组里面的经纬度转换成字符串
var lnglat = arrdes[i] + "";
//给经度赋值 从0开始到，结束
lng = lnglat.substr(0, lnglat.indexOf(","));
//给纬度赋值 从，后一位开始到数组的总长结束
lat = lnglat.substr(lnglat.indexOf(',') + 1, lnglat.length - 1);
//添加一个点，
var marker = new AMap.Marker({
//点的位置，从上面赋值，直接赋数组的值是无法得到的，所有东西弄了可能有12个小时，这里占了10个小时
position: [lng, lat],
map: map //地图，就是最开始创建的地图
});
//这里的content是信息框里面的内容，可以用js拼接成想要的样式或格式
marker.content =
'<div class="info-title">名称：' + siteName[i] + '</div><div class="info-content">' +
'<img src="http://webapi.amap.com/images/amap.jpg">' +
'负责人：' + WorkerName[i] + '<br/>' +
'地址：' + FullName[i] + '</div>';
;
//添加点的单击事件
marker.on('click', markerClick);
marker.emit('click', { target: marker });
}
//当单击Marker时弹出文本框
function markerClick(e) {
// alert(e.target.getPosition()); 获取点的经纬度
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
clearMarker(e);
}
//自适应点分布位置，使点能够显示完全
map.setFitView();
//获取站点经纬度
function getlnglat() {
//为地图注册click事件获取鼠标点击出的经纬度坐标
var clickEventListener = map.on('click', function (e) {
document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat();
document.getElementById("key_11").value = e.lnglat.getLng();
document.getElementById("key_12").value = e.lnglat.getLat();
geocoder2();
});
}
//------------------------------------------地址编码解析 begin
var mapObj;
var result;
var marker = [];
var windowsArr = [];
function mapInit() {
mapObj = new AMap.Map('iCenter'); //默认定位：初始化加载地图时，center及level属性缺省，地图默认显示用户所在城市范围
};
var MGeocoder;
var key_11;
var key_12;
function geocoder2() { //POI搜索，关键字查询
key_11 = document.getElementById("key_11").value;
key_12 = document.getElementById("key_12").value;
if (key_11 == "" || typeof (key_11) == null || typeof (key_11) == 'undefined') {
alert("地图还未加载完成，无法获取相应点，请稍后...")
}
var lnglatXY = new AMap.LngLat(key_11, key_12);
//document.getElementById('result').innerHTML = "您输入的是：" + key_1;
//加载地理编码插件
mapObj.plugin(["AMap.Geocoder"], function () {
MGeocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
});
//返回地理编码结果
AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack2);
//逆地理编码
MGeocoder.getAddress(lnglatXY);
});
mapObj.setFitView();
}
function geocoder_CallBack2(data) { //回调函数
var resultStr = "";
var address;
//返回地址描述
address = data.regeocode.formattedAddress;
//返回周边道路信息
//返回结果拼接输出
resultStr = "<div style=\"font-size: 12px;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\">" + "<b>地址</b>：" + address + "</div>";
document.getElementById("tipinput").value = address;
document.getElementById("result").innerHTML = resultStr;
}
//------------------------------------------地址编码解析 end
//---------------------------------------------右键菜单 begin
var contextMenu = new AMap.ContextMenu(); //创建右键菜单
//右键放大
contextMenu.addItem("放大一级", function () {
map.zoomIn();
}, 0);
//右键缩小
contextMenu.addItem("缩小一级", function () {
map.zoomOut();
}, 1);
//右键显示全国范围
contextMenu.addItem("缩放至全国范围", function (e) {
map.setZoomAndCenter(4, [108.946609, 34.262324]);
}, 2);
//右键添加Marker站点
contextMenu.addItem("添加站点", function (e) {
addMarker(); //------------------------------------直接写方法，然后把上面的方法删了就行了
}, 3);
//右键添加Marker站点
contextMenu.addItem("删除站点", function (e) {
}, 4);// ----------------------------------要添加跟多按钮的时候注意第三个参数不能重复
//地图绑定鼠标右击事件——弹出右键菜单
map.on('rightclick', function (e) {
contextMenu.open(map, e.lnglat);
contextMenuPositon = e.lnglat;
});
//---------------------------------------------右键菜单 begin
</script>
<div id="myPageTop" style="display: none;">
<table>
<tr>
<td colspan="2">
<label>
<span style="color: Red">点击地图上相应位置即可添加地址及相应经纬度！</span>
</label>
</td>
</tr>
<tr>
<td>
<label>
名称：
</label>
</td>
<td class="column2">
<label>
负责人：
</label>
</td>
</tr>
<tr>
<td>
<input type="text" placeholder="请填写养老院名称" id="siteName">
</td>
<td class="column2">
<input type="text" placeholder="请填写养老院负责人" id="WorkerName">
</td>
</tr>
<tr style="display:none">
<td>
<div id="iCenter">
</div>
<div id="result">
</div>
<div id="iControlbox">
<input type="text" id="key_11" value="126.48" />
<input type="text" id="key_12" value="46.83" />
<button onclick="javascript:geocoder2();">
逆地址解析
</button>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<label>
经纬度(点击地图获取)：
</label>
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" readonly="true" id="lnglat" style="width:375px;">
</td>
</tr>
<tr>
<td colspan="2">
<label>
详细地址(点击地图获取地址)：
</label>
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" placeholder="详细地址" id="tipinput" style="width:375px;">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" class="button" style="width: 190px; height: 20px;" value="确认添加"
onclick="AddMarkerBtn();" />
<input type="button" class="button" style="width: 190px; height: 20px;" value="关闭窗体"
onclick="ColseaddMarkerWindow();" />
</td>
</tr>
</table>
</div>
</body>
</html>
