<!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>
原文：http://www.cnblogs.com/SabWoF/p/6238487.html