ShowMap.aspx 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage/Page.master" AutoEventWireup="true" CodeFile="ShowMap.aspx.cs" Inherits="bdrr_plug_ShowMap" %>
  2. <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
  3. <script type="text/javascript" src="http://api.map.baidu.com/api?ak=z5rwVCAhrZioDrOxGrSG1Rf2&v=2.0"></script>
  4. <script type="text/javascript">
  5. //创建和初始化地图函数:
  6. function initMap() {
  7. createMap(); //创建地图
  8. setMapEvent(); //设置地图事件
  9. addMapControl(); //向地图添加控件
  10. addMarker(); //向地图中添加marker
  11. }
  12. var $marker = null;
  13. var $map = null;
  14. //创建地图函数:
  15. function createMap() {
  16. $map = new BMap.Map("dituContent"); //在百度地图容器中创建一个地图
  17. var map = $map;
  18. //var point = new BMap.Point(118.11034, 24.491111); //定义一个中心点坐标
  19. //setLngLat(point);
  20. //map.centerAndZoom(point, 16); //设定地图的中心点和坐标并将地图显示在地图容器中
  21. map.addEventListener("click", function (e) {
  22. return;
  23. });
  24. window.map = map; //将map变量存储在全局
  25. }
  26. //地图事件设置函数:
  27. function setMapEvent() {
  28. map.enableDragging(); //启用地图拖拽事件,默认启用(可不写)
  29. map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
  30. map.enableDoubleClickZoom(); //启用鼠标双击放大,默认启用(可不写)
  31. map.disableKeyboard(); //禁用键盘上下左右键移动地图,默认禁用(可不写)
  32. }
  33. //地图控件添加函数:
  34. function addMapControl() {
  35. //向地图中添加缩放控件
  36. var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
  37. map.addControl(ctrl_nav);
  38. //向地图中添加缩略图控件
  39. var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 0 });
  40. map.addControl(ctrl_ove);
  41. }
  42. //创建marker
  43. function addMarker() {
  44. for (var i = 0; i < markerArr.length; i++) {
  45. var json = markerArr[i];
  46. var p0 = json.point.split("|")[0];
  47. var p1 = json.point.split("|")[1];
  48. var point = new BMap.Point(p0, p1);
  49. if (i == 0) {
  50. $map.centerAndZoom(point, 16); //设定地图的中心点和坐标并将地图显示在地图容器中
  51. }
  52. $marker = new BMap.Marker(point);
  53. var iw = createInfoWindow(i);
  54. var label = new BMap.Label(json.title, { "offset": new BMap.Size(10, -20) });
  55. $marker.setLabel(label);
  56. map.addOverlay($marker);
  57. label.setStyle({
  58. borderColor: "#808080",
  59. color: "#333",
  60. cursor: "pointer"
  61. });
  62. (function () {
  63. var index = i;
  64. var _iw = createInfoWindow(i);
  65. var _marker = $marker;
  66. _marker.addEventListener("click", function () {
  67. this.openInfoWindow(_iw);
  68. });
  69. _iw.addEventListener("open", function () {
  70. _marker.getLabel().hide();
  71. })
  72. _iw.addEventListener("close", function () {
  73. _marker.getLabel().show();
  74. })
  75. label.addEventListener("click", function () {
  76. _marker.openInfoWindow(_iw);
  77. })
  78. if (!!json.isOpen) {
  79. label.hide();
  80. _marker.openInfoWindow(_iw);
  81. }
  82. })()
  83. }
  84. }
  85. //创建InfoWindow
  86. function createInfoWindow(i) {
  87. var json = markerArr[i];
  88. var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>" + json.content + "</div>");
  89. return iw;
  90. }
  91. </script>
  92. </asp:Content>
  93. <asp:Content ID="Content2" ContentPlaceHolderID="content" Runat="Server">
  94. <web:HiddenField ID="hLng" runat="server" />
  95. <web:HiddenField ID="hLat" runat="server" />
  96. <div class="cont-div" style="width:100%;min-height:500px;overflow:hidden">
  97. <div style="width:96%;height:500px;margin:5px 20px;overflow:auto; border:#ccc solid 1px;" id="dituContent"></div>
  98. </div>
  99. <asp:Literal ID="litScript" runat="server"></asp:Literal>
  100. </asp:Content>