百度地图通过后台控制公司位置代码修改

　　去百度官网http://api.map.baidu.com/lbsapi/creatmap/生成地图api，将html下载下来，并进行修改为如下

 

　　

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ page import="com.fjep.utils.SessionBean"%>
<%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form"%>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>

    <meta name="generator" content=
    "HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="generator" content="MediaWiki 1.16.1" />
    <title>
      地图生成器
    </title>
    <meta name="keywords" content="地图生成器" />
    <%@ include file="head.jsp"%>
    <link rel="stylesheet" href="http://api.map.baidu.com/lbsapi/creatmap/css/main.css" media="screen" type="text/css" />
    <link rel="stylesheet" type="text/css" href="http://api.map.baidu.com/lbsapi/creatmap/css/home.css?v=20101122" />
    <script type="text/javascript">   
         //获取浏览器页面可见高度和宽度
         var _PageHeight = document.documentElement.clientHeight,
            _PageWidth = document.documentElement.clientWidth;
        //计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px）
        var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0,
            _LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;
        //在页面未加载完毕之前显示的loading Html自定义内容
        var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:#f3f8ff;opacity:1;filter:alpha(opacity=80);z-index:10000;"><div style="position: absolute; cursor: wait; left: ' + _LoadingLeft + 'px; top:' + _LoadingTop + 'px; width: auto; height: 57px; line-height: 57px; padding-left: 50px; padding-right: 20px; background: #fff url(https://img.lanrentuku.com/img/allimg/1212/5-121204193956-50.gif) no-repeat scroll 5px 13px; border: 2px solid #95B8E7; color: #696969; font-family:\'Microsoft YaHei\';">页面加载中，请等待...</div></div>';
        //呈现loading效果
        document.write(_LoadingHtml);
         
         
        //设置标注图片
        document.onreadystatechange = completeLoading;
         function a() {
             var mark=document.getElementsByClassName("BMap_Marker");
             for(var i=0;i<mark.length;i++){
                 var tdiv=mark[i].getElementsByTagName("div");
                 if(tdiv.length>0){
                     tdiv[0].getElementsByTagName("img")[0].src="http://api.map.baidu.com/lbsapi/creatmap/images/us_mk_icon.png";
                 }
                 //mark[i].getElementsByTagName("img")[0].attr("src","http://api.map.baidu.com/lbsapi/creatmap/images/us_mk_icon.png");
             }
         }
        //加载状态为complete时移除loading效果
        function completeLoading() {
            if (document.readyState == "complete") {
                var loadingMask = document.getElementById('loadingDiv');
                loadingMask.parentNode.removeChild(loadingMask);
                delElementByClass(' anchorBL');
            }
        }
        
        function savebtn()
            {
                var a = userConfig.map;
                var b = getSignCode();
                baidu.G("bareasign").value = b;
                var c = getScrollTop();
                if (!!c) {
                    baidu.G("Layer1").style.top = c + "px"
                }
                baidu.G("Layer1").style.display = "";
                var d = getAbsPoint(baidu.G("copy_code"));
                M.fe.copy({
                    copyBtnId: "copy_code", copytextId: "bareasign", copyTag: "value", callback: function (f) {
                        var e = baidu.dom._g("su_sign");
                        e.style.display = "inline";
                        setTimeout(function () {
                            e.style.display = "none"
                        }, 3000)
                    }
                });



                //document.getElementById('Layer1').style.display='none';
                //delElementById('ZeroClipboardMovie_1');
                var str1=document.getElementById("bareasign").value; 
                var str2=str1.replace(new RegExp("http://app.baidu.com/map", 'g'), "http://api.map.baidu.com/lbsapi/creatmap");
                var str3=str2.replace(new RegExp("百度地图API自定义地图", 'g'), "自定义地图");
                var htmlstr=str3.replace("initMap();//创建和初始化地图",
                    "initMap();var getE=document.getElementsByClassName(' anchorBL');for(i=0;i<getE.length;i++){if (getE[i] != null) getE[i].parentNode.removeChild( getE[i]);}");
                closeDiv('Layer1');
                console.log(htmlstr);
                if(confirm("是否确定生成？"))//此处可以改为向后端传参，参数 string htmlstr，htmlstr里是页面代码
                {
                    // var blob = new Blob([htmlstr], {type: "text/plain;charset=utf-8"});
                    // saveAs(blob, "map.html");
                    $.ajax({
                        type:"POST",
                        url:"/fjepAdmin/receiveMap",
                        data:{ "htmlstr":htmlstr},//这个data是发送到服务器的数据
                        dataType:"json",
                        success:function(data){
                            alert(data);
                        }
                    });
                };




             }
             
        function delElementById(element)//删除指定id元素
        {
            if(element!="undefined"){
                var getElement=document.getElementById(element);
                getElement.remove();
            }
        }
        function delElementByClass(element)
        {
            var getElement=document.getElementsByClassName(element);
            for(i=0;i<getElement.length;i++){
                //删除元素 元素.parentNode.removeChild(元素);
                if (getElement[i] != null) getElement[i].parentNode.removeChild( getElement[i]);
            }
        }
     </script>   
     
     <script type="text/javascript">  
    // 将字符串用txt的格式报存 ie中会出现中文乱码的问题  
    var saveAs = saveAs || (function(view) {  
        "use strict";  
        // IE <10 is explicitly unsupported  
        if (typeof view === "undefined" || typeof navigator !== "undefined" && /MSIE [1-9]\./.test(navigator.userAgent)) {  
            return;  
        }  
        var  
              doc = view.document  
              // only get URL when necessary in case Blob.js hasn't overridden it yet  
            , get_URL = function() {  
                return view.URL || view.webkitURL || view;  
            }  
            , save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a")  
            , can_use_save_link = "download" in save_link  
            , click = function(node) {  
                var event = new MouseEvent("click");  
                node.dispatchEvent(event);  
            }  
            , is_safari = /constructor/i.test(view.HTMLElement) || view.safari  
            , is_chrome_ios =/CriOS\/[\d]+/.test(navigator.userAgent)  
            , throw_outside = function(ex) {  
                (view.setImmediate || view.setTimeout)(function() {  
                    throw ex;  
                }, 0);  
            }  
            , force_saveable_type = "application/octet-stream"  
            // the Blob API is fundamentally broken as there is no "downloadfinished" event to subscribe to  
            , arbitrary_revoke_timeout = 1000 * 40 // in ms  
            , revoke = function(file) {  
                var revoker = function() {  
                    if (typeof file === "string") { // file is an object URL  
                        get_URL().revokeObjectURL(file);  
                    } else { // file is a File  
                        file.remove();  
                    }  
                };  
                setTimeout(revoker, arbitrary_revoke_timeout);  
            }  
            , dispatch = function(filesaver, event_types, event) {  
                event_types = [].concat(event_types);  
                var i = event_types.length;  
                while (i--) {  
                    var listener = filesaver["on" + event_types[i]];  
                    if (typeof listener === "function") {  
                        try {  
                            listener.call(filesaver, event || filesaver);  
                        } catch (ex) {  
                            throw_outside(ex);  
                        }  
                    }  
                }  
            }  
            , auto_bom = function(blob) {  
                // prepend BOM for UTF-8 XML and text/* types (including HTML)  
                // note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF  
                if (/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {  
                    return new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});  
                }  
                return blob;  
            }  
            , FileSaver = function(blob, name, no_auto_bom) {  
                if (!no_auto_bom) {  
                    blob = auto_bom(blob);  
                }  
                // First try a.download, then web filesystem, then object URLs  
                var  
                      filesaver = this  
                    , type = blob.type  
                    , force = type === force_saveable_type  
                    , object_url  
                    , dispatch_all = function() {  
                        dispatch(filesaver, "writestart progress write writeend".split(" "));  
                    }  
                    // on any filesys errors revert to saving with object URLs  
                    , fs_error = function() {  
                        if ((is_chrome_ios || (force && is_safari)) && view.FileReader) {  
                            // Safari doesn't allow downloading of blob urls  
                            var reader = new FileReader();  
                            reader.onloadend = function() {  
                                var url = is_chrome_ios ? reader.result : reader.result.replace(/^data:[^;]*;/, 'data:attachment/file;');  
                                var popup = view.open(url, '_blank');  
                                if(!popup) view.location.href = url;  
                                url=undefined; // release reference before dispatching  
                                filesaver.readyState = filesaver.DONE;  
                                dispatch_all();  
                            };  
                            reader.readAsDataURL(blob);  
                            filesaver.readyState = filesaver.INIT;  
                            return;  
                        }  
                        // don't create more object URLs than needed  
                        if (!object_url) {  
                            object_url = get_URL().createObjectURL(blob);  
                        }  
                        if (force) {  
                            view.location.href = object_url;  
                        } else {  
                            var opened = view.open(object_url, "_blank");  
                            if (!opened) {  
                                // Apple does not allow window.open, see https://developer.apple.com/library/safari/documentation/Tools/Conceptual/SafariExtensionGuide/WorkingwithWindowsandTabs/WorkingwithWindowsandTabs.html  
                                view.location.href = object_url;  
                            }  
                        }  
                        filesaver.readyState = filesaver.DONE;  
                        dispatch_all();  
                        revoke(object_url);  
                    }  
                ;  
                filesaver.readyState = filesaver.INIT;  
      
                if (can_use_save_link) {  
                    object_url = get_URL().createObjectURL(blob);  
                    setTimeout(function() {  
                        save_link.href = object_url;  
                        save_link.download = name;  
                        click(save_link);  
                        dispatch_all();  
                        revoke(object_url);  
                        filesaver.readyState = filesaver.DONE;  
                    });  
                    return;  
                }  
      
                fs_error();  
            }  
            , FS_proto = FileSaver.prototype  
            , saveAs = function(blob, name, no_auto_bom) {  
                return new FileSaver(blob, name || blob.name || "download", no_auto_bom);  
            }  
        ;  
        // IE 10+ (native saveAs)  
        if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob) {  
            return function(blob, name, no_auto_bom) {  
                name = name || blob.name || "download";  
      
                if (!no_auto_bom) {  
                    blob = auto_bom(blob);  
                }  
                return navigator.msSaveOrOpenBlob(blob, name);  
            };  
        }  
      
        FS_proto.abort = function(){};  
        FS_proto.readyState = FS_proto.INIT = 0;  
        FS_proto.WRITING = 1;  
        FS_proto.DONE = 2;  
      
        FS_proto.error =  
        FS_proto.onwritestart =  
        FS_proto.onprogress =  
        FS_proto.onwrite =  
        FS_proto.onabort =  
        FS_proto.onerror =  
        FS_proto.onwriteend =  
            null;  
      
        return saveAs;  
    }(  
           typeof self !== "undefined" && self  
        || typeof window !== "undefined" && window  
        || this.content  
    ));  
    // `self` is undefined in Firefox for Android content script context  
    // while `this` is nsIContentFrameMessageManager  
    // with an attribute `content` that corresponds to the window  
      
    if (typeof module !== "undefined" && module.exports) {  
      module.exports.saveAs = saveAs;  
    } else if ((typeof define !== "undefined" && define !== null) && (define.amd !== null)) {  
      define("FileSaver.js", function() {  
        return saveAs;  
      });  
    }  
     
    // 引入上边的js后，就可以调用生成文本的方法 另外ie下会有中文乱码的问题  
      
    </script>  
    
    <link rel="search" type="application/opensearchdescription+xml" href="http://dev.baidu.com/wiki/map/opensearch_desc.php" title="地图开放平台 (zh-hans)" />
    <link rel="alternate" type="application/atom+xml" title=
    "地图开放平台的Atom订阅" href=
    "http://dev.baidu.com/wiki/map/index.php?title=%E7%89%B9%E6%AE%8A:%E6%9C%80%E8%BF%91%E6%9B%B4%E6%94%B9&amp;feed=atom" />
    <link rel="stylesheet" href="http://dev.baidu.com/wiki/static/skins/common/shared.css?270" media="screen" type="text/css" />
    <link rel="stylesheet" href="http://dev.baidu.com/wiki/static/skins/common/commonPrint.css?270" media="print" type="text/css" />
    
    <script src="http://dev.baidu.com/wiki/static/skins/common/apibox.js?270" type="text/javascript"></script>
    <script src="http://dev.baidu.com/wiki/static/skins/common/ajax.js?270" type="text/javascript"></script>
    <script src="http://dev.baidu.com/wiki/static/skins/common/bapi.js?270" type="text/javascript"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?key=16398096469aa2c92d7b87506732cd90&amp;v=1.1&amp;services=true"></script>
    
    <script type="text/javascript" src="http://api.map.baidu.com/lbsapi/creatmap/script/tangram.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/lbsapi/creatmap/script/index.js?v=201012231"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/lbsapi/creatmap/script/mapext.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/lbsapi/creatmap/script/copy.js"></script>
    
    
  </head>
  <body>
    <!--head bg-->

      <div id="wiki_login">
        <a id="login" href="https://passport.baidu.com/" name="login"></a>
      </div>
    <div class="signBoxCon">
      <!-- 对话框 -->
      <div style="position:absolute;left:155px;top:120px;display:none;width:752px;height:379px;z-index:9999;background:none repeat scroll 0% 0% rgb(235, 236, 237);" class="dialog_box" id="Layer1">
        <div class="box1">
          <div class="box2">
            <div style=
            "background: none repeat scroll 0% 0% rgb(255, 255, 255); margin: 1px; width: 746px; height: 373px; display: inline-block;"
            class="bder_color3">
              <div style="margin: 10px;">
                <div style="float: left;width:595px;" class="l">
                  <span class=
                  "bold font_color font14">自定义地图代码</span>
                  <div style=
                  "background: none repeat scroll 0% 0% rgb(245, 249, 252); width: 593px; height: 323px;"
                  class="bder_color3 t10">
                    <div style=
                    "background: none repeat scroll 0% 0% rgb(255, 255, 255); width: 573px; height: 303px; margin: 10px;"
                    class="r font12 font_color bder_color3">
                      <div style=
                      "overflow-y: auto; width: 573px; height: 303px;margin:0"
                      class="l font12 font_color">
                        <textarea id="bareasign" readonly="readonly">
</textarea>
                      </div>
                    </div>
                  </div>
                </div>
                <div style="float: right; width: 125px;" class="">
                  <div style="margin-top: 229px;"></div>
                  <div style="display: block; height: 20px;text-align:center;">
                    <div class="clear"></div>

                  </div>
                  <div class="t10" id="copy_sign"></div>
                  <div style="width: 98px; height: 34px;" class=
                  "bder_color t10">
                    <span class="bder_color cen bg_h2 bold font_color font14"
                    style=
                    "display: block; cursor: pointer; width: 94px; height: 30px; margin: 1px; line-height: 30px; vertical-align: middle;"
                    onclick="closeDiv('Layer1')">关闭</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div><!-- body -->
      <div class="body t10">
      <div class="sl_bg bold font14 font_color l" style="width:100%;">
          <span class="l10">创建地图</span>
        </div>
        <div class="sign_content1 margin_sT5" style="margin-top:50px; height:575px;">
          <!--<div class="l color_h" style="width:227px;height:281px;margin:10px 0px 10px 10px;float:left;display:inline-block;">-->
          <table style="width:944px;margin:10px;" id="wxp_zdydt">
            <tr>
              <td style="width:223px;text-align:left;vertical-align:top">
                <div>
                  <div class="map_open" onclick="setStates(this,event)" id=
                  "mapCenter">
                    <div class="map_title_s bg_h2 bold font14" style=
                    "margin-top:0" navtype="setMapCenter">
                      定位
                    </div>
                    <div class="map_content">
                      <ul class="wxp_list1">
                        <li>
                          <div id="CurrentCityCon">
                            <span class="cor_1">当前城市：</span><span id=
                            "cityName">北京市</span> <span class="cor_2"
                            onclick="editCurrentCity()">切换</span>
                          </div>
                          <div id="CurrentCityEdit" class="wxp_lis_con2" style=
                          "display:none;">
                            <input type="text" class="inputT_2 inputT_4" value=
                            "请输入城市名称" onfocus=
                            "input_focus(this,'请输入城市名称','')"
                            onblur=
                            "input_blur(this,'请输入城市名称','')" id=
                            "CurrentCityInput" title=
                            "请输入城市中文名称" />
                            <div class="dwzxd_box2 dwzxd_box3">
                              <span onclick="updateCurrentCity()">确
                              定</span>
                            </div>
                            <div class="dwzxd_box2 dwzxd_box3">
                              <span onclick="canelCurrentCity()">取 消</span>
                            </div>
                          </div>
                        </li>
                        <li id="cityNameTip" style=
                        "display:none;text-align:center;color:#f00"></li>
                        <li>
                          <input type="text" class="inputT_2" id="searchMap"
                          value="输入地名、大厦快速定位" onfocus=
                          "input_focus(this,'输入地名、大厦快速定位','')"
                          onblur=
                          "input_blur(this,'输入地名、大厦快速定位','')" />
                          <div class="dwzxd_box2">
                            <span onclick="getlikeArea()">查找</span>
                          </div>
                        </li>
                        <li>当前地图中心点经纬度：
                        </li>
                        <li class="input1">
                          <b>X：</b><input type="text" id="mapCenterPointX"
                          readonly="true" />
                        </li>
                        <li class="input1">
                          <b>Y：</b><input type="text" id="mapCenterPointY"
                          readonly="true" />
                        </li>
                        <li class="input2">当前地图级别：<input type=
                        "text" id="mapCenterLevel" readonly="true" />
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="map_close" style="margin-top:10px;" onclick=
                  "setStates(this,event)" id="mapSet">
                    <div class="map_title_s bg_h2 bold font14" navtype=
                    "setMapInfo">
                      设置地图
                    </div>
                    <div class="map_content">
                      <ul class="wxp_list2">
                        <li class="h5 wxp_li_h1">地图尺寸
                        </li>
                        <li class="wxp_li_s1">宽度：<input type="text"
                          class="inputT_1" onchange="changeMapSize(this,'wid')"
                          id="map_width" /><span class="color_1">像素</span>
                        </li>
                        <li>高度：<input type="text" class="inputT_1"
                        onchange="changeMapSize(this,'hei')" id=
                        "map_height" /><span class="color_1">像素</span>
                        </li>
                      </ul>
                      <ul class="wxp_list2">
                        <li class="h5 wxp_li_h2">添加按钮
                        </li>
                        <li class="h6 checkbox">
                          <label for="control_nav">地图缩放<input type=
                          "checkbox" id="control_nav" value="nav" /></label>
                        </li>
                        <li class="radio hei2">
                          <span>样式：</span><label for=
                          "nav_style_LARGE"><input type="radio" name=
                          "nav_style" id="nav_style_LARGE" cl_type="nav" value=
                          "LARGE" />标准</label><label for=
                          "nav_style_SMALL"><input type="radio" name=
                          "nav_style" id="nav_style_SMALL" cl_type="nav" value=
                          "SMALL" />精简</label><br />
                          <label for="nav_style_PAN"><input type="radio" name=
                          "nav_style" id="nav_style_PAN" cl_type="nav" value=
                          "PAN" />平移</label><label for=
                          "nav_style_ZOOM"><input type="radio" name="nav_style"
                          id="nav_style_ZOOM" cl_type="nav" value=
                          "ZOOM" />缩放</label>
                        </li>
                        <li class="radio hei2">
                          <span>位置：</span><label for=
                          "nav_place_TOP_LEFT"><input type="radio" name=
                          "nav_place" id="nav_place_TOP_LEFT" cl_type="nav"
                          value="TOP_LEFT" />左上</label><label for=
                          "nav_place_TOP_RIGHT"><input type="radio" name=
                          "nav_place" id="nav_place_TOP_RIGHT" cl_type="nav"
                          value="TOP_RIGHT" />右上</label><br />
                          <label for="nav_place_BOTTOM_LEFT"><input type=
                          "radio" name="nav_place" id="nav_place_BOTTOM_LEFT"
                          cl_type="nav" value=
                          "BOTTOM_LEFT" />左下</label><label for=
                          "nav_place_BOTTOM_RIGHT"><input type="radio" name=
                          "nav_place" id="nav_place_BOTTOM_RIGHT" cl_type="nav"
                          value="BOTTOM_RIGHT" />右下</label>
                        </li>
                        <li class="h6 checkbox">
                          <label for="control_ove"><input type="checkbox" id=
                          "control_ove" value="ove" />地图缩略图</label>
                        </li>
                        <li class="radio hei3">
                          <span>状态：</span><label for=
                          "ove_style_1"><input type="radio" name="overview" id=
                          "ove_style_1" value="1" />展开</label><label for=
                          "ove_style_0"><input type="radio" name="overview" id=
                          "ove_style_0" value="0" />收起</label>
                        </li>
                        <li class="radio hei2">
                          <span>位置：</span><label for=
                          "ove_place_TOP_LEFT"><input type="radio" name=
                          "ove_place" id="ove_place_TOP_LEFT" cl_type="ove"
                          value="TOP_LEFT" />左上</label><label for=
                          "ove_place_TOP_RIGHT"><input type="radio" name=
                          "ove_place" id="ove_place_TOP_RIGHT" cl_type="ove"
                          value="TOP_RIGHT" />右上</label><br />
                          <label for="ove_place_BOTTOM_LEFT"><input type=
                          "radio" name="ove_place" id="ove_place_BOTTOM_LEFT"
                          cl_type="ove" value=
                          "BOTTOM_LEFT" />左下</label><label for=
                          "ove_place_BOTTOM_RIGHT"><input type="radio" name=
                          "ove_place" id="ove_place_BOTTOM_RIGHT" cl_type="ove"
                          value="BOTTOM_RIGHT" />右下</label>
                        </li>
                        <li class="h6 checkbox">
                          <label for="control_sca">地图比例尺<input type=
                          "checkbox" id="control_sca" value="sca" /></label>
                        </li>
                        <li class="radio hei3">
                          <span>单位：</span><label for=
                          "sca_style_METRIC"><input type="radio" name="scale"
                          id="sca_style_METRIC" cl_type="sca" value=
                          "METRIC" />公制</label><label for=
                          "sca_style_IMPERIAL"><input type="radio" name="scale"
                          id="sca_style_IMPERIAL" cl_type="sca" value=
                          "IMPERIAL" />英制</label>
                        </li>
                        <li class="radio hei2">
                          <span>位置：</span><label for=
                          "sca_place_TOP_LEFT"><input type="radio" name=
                          "sca_place" id="sca_place_TOP_LEFT" cl_type="sca"
                          value="TOP_LEFT" />左上</label><label for=
                          "sca_place_TOP_RIGHT"><input type="radio" name=
                          "sca_place" id="sca_place_TOP_RIGHT" cl_type="sca"
                          value="TOP_RIGHT" />右上</label><br />
                          <label for="sca_place_BOTTOM_LEFT"><input type=
                          "radio" name="sca_place" id="sca_place_BOTTOM_LEFT"
                          cl_type="sca" value=
                          "BOTTOM_LEFT" />左下</label><label for=
                          "sca_place_BOTTOM_RIGHT"><input type="radio" name=
                          "sca_place" id="sca_place_BOTTOM_RIGHT" cl_type="sca"
                          value="BOTTOM_RIGHT" />右下</label>
                        </li>
                      </ul>
                      <ul class="wxp_list2">
                        <li class="h5">地图状态
                        </li>
                        <li class="checkbox hei4">
                          <label for="event_scr"><input type="checkbox" id=
                          "event_scr" value=
                          "ScrollWheelZoom" />鼠标滚轮缩放</label>
                          <div style="clear:left;"></div><label for=
                          "event_key"><input type="checkbox" id="event_key"
                          value="Keyboard" />键盘方向移动</label><br />
                          <label for="event_dra"><input type="checkbox" id=
                          "event_dra" value=
                          "Dragging" />鼠标拖动地图</label><br />
                          <label for="event_dou"><input type="checkbox" id=
                          "event_dou" value=
                          "DoubleClickZoom" />鼠标双击放大</label>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="map_close" style="margin-top:10px;" onclick=
                  "setStates(this,event)" id="mapPoint">
                    <div class="map_title_s bg_h2 bold font14" navtype="sign">
                      添加标注
                    </div>
                    <div class="map_content">
                      <div class="wxp_nav_1">
                        <ul class="wxp_nav_bg1" id="sign_nav_bg">
                          <li class="nav1" onclick=
                          "changeSignNav(this,1,event);a()" usertagpanl="iw" title=
                          "点标记">标记地点
                          </li>
                          <li class="nav2" onclick=
                          "changeSignNav(this,2,event)" usertagpanl="pl" title=
                          "线标记">手绘路线
                          </li>
                          <li class="nav3" onclick=
                          "changeSignNav(this,3,event)" usertagpanl="lb" title=
                          "文字标记">文字备注
                          </li>
                        </ul>
                      </div>
                      <div id="sign_content_1" style=
                      "position:relative;overflow:hidden;">
                        <p class="wxp_con_2" id="pointIconCon">
                          <a href="javascript:exitPtIcon()" class="null">̨ߔ回</a><br />
                          <a class="on" onclick="setPtIcon(11);return false" href="javascript:void(0);">
                            <img class="sp_s sp_11" src="http://api.map.baidu.com/lbsapi/creatmap/images/transparent.gif" />
                          </a>

                          <a onclick="setPtIcon(12);return false" href="javascript:void(0);">
                            <img class="sp_s sp_12" src="http://api.map.baidu.com/lbsapi/creatmap/images/transparent.gif" />
                          </a>

                          <a onclick="setPtIcon(13);return false" href="javascript:void(0);">
                            <img class="sp_s sp_13" src="http://api.map.baidu.com/lbsapi/creatmap/images/transparent.gif" />
                          </a>

                          <a onclick="setPtIcon(14);return false" href="javascript:void(0);">
                            <img class="sp_s sp_14" src="http://api.map.baidu.com/lbsapi/creatmap/images/transparent.gif" />
                          </a>

                          <a onclick="setPtIcon(15);return false" href="javascript:void(0);">
                            <img class="sp_s sp_15" src="http://api.map.baidu.com/lbsapi/creatmap/images/transparent.gif" />
                          </a>

                          <a onclick="setPtIcon(16);return false" href="javascript:void(0);">
                            <img class="sp_s sp_16" src="http://api.map.baidu.com/lbsapi/creatmap/images/transparent.gif" />
                          </a>

                          <a onclick="setPtIcon(21);return false" href="javascript:void(0);">
                            <img class="sp_s sp_21" src="http://api.map.baidu.com/lbsapi/creatmap/images/transparent.gif" />
                          </a>

                          <a onclick="setPtIcon(22);return false" href="javascript:void(0);">
                            <img class="sp_s sp_22" src="http://api.map.baidu.com/lbsapi/creatmap/images/transparent.gif" />
                          </a>

                          <a onclick="setPtIcon(23);return false" href="javascript:void(0);">
                            <img class="sp_s sp_23" src="http://api.map.baidu.com/lbsapi/creatmap/images/transparent.gif" />
                          </a>
                          <a onclick=
                          "setPtIcon(24);return false" href=
                          "javascript:void(0);"><img class="sp_s sp_24" src=
                          "http://api.map.baidu.com/lbsapi/creatmap/images/transparent.gif" /></a><a onclick=
                          "setPtIcon(25);return false" href=
                          "javascript:void(0);"><img class="sp_s sp_25" src=
                          "http://api.map.baidu.com/lbsapi/creatmap/images/transparent.gif" /></a><a onclick=
                          "setPtIcon(26);return false" href=
                          "javascript:void(0);"><img class="sp_s sp_26" src=
                          "http://api.map.baidu.com/lbsapi/creatmap/images/transparent.gif" /></a><a onclick=
                          "setPtIcon(31);return false" href=
                          "javascript:void(0);"><img class="sp_s sp_31" src=
                          "http://api.map.baidu.com/lbsapi/creatmap/images/transparent.gif" /></a><a onclick=
                          "setPtIcon(32);return false" href=
                          "javascript:void(0);"><img class="sp_s sp_32" src=
                          "http://api.map.baidu.com/lbsapi/creatmap/images/transparent.gif" /></a><a onclick=
                          "setPtIcon(33);return false" href=
                          "javascript:void(0);"><img class="sp_s sp_33" src=
                          "http://api.map.baidu.com/lbsapi/creatmap/images/transparent.gif" /></a><a onclick=
                          "setPtIcon(34);return false" href=
                          "javascript:void(0);"><img class="sp_s sp_34" src=
                          "http://api.map.baidu.com/lbsapi/creatmap/images/transparent.gif" /></a><a onclick=
                          "setPtIcon(35);return false" href=
                          "javascript:void(0);"><img class="sp_s sp_35" src=
                          "http://api.map.baidu.com/lbsapi/creatmap/images/transparent.gif" /></a><a onclick=
                          "setPtIcon(36);return false" href=
                          "javascript:void(0);"><img class="sp_s sp_36" src=
                          "http://api.map.baidu.com/lbsapi/creatmap/images/transparent.gif" /></a>
                        </p>

                        <p id="signPointTip" style="display:none" class=
                        "signTip">
                          Tip
                        </p>
                        <ul class="wxp_lis_1" id="signPointList">
                          <li id="signiwNoListTip">
                          还没有在地图上添加点标记，点击上面的按钮开始在地图上添加点标记
                          </li>
                        </ul>
                        <div style="color:#808080;display:none;padding:5px;"
                        id="signiwSaveTip">
                          (提示：请保存未保存的点标记，未保存的点标记在生成地图时内容不是最新的！)
                        </div>
                      </div>
                      <div id="sign_content_2" style="display:none;">
                        <p id="signPolyLineTip" style="display:none" class=
                        "signTip">
                          Tip
                        </p>
                        <ul class="wxp_lis_1" id="signPolylineList">
                          <li id="signplNoListTip">
                          还没有在地图上添加线标记，点击上面的按钮开始在地图上添加线标记
                          </li>
                        </ul>
                        <div style="color:#808080;display:none;padding:5px;"
                        id="signplSaveTip">
                          (提示：请保存未保存的线标记，未保存的线标记在生成地图时内容不是最新的！)
                        </div>
                      </div>
                      <div id="sign_content_3" style="display:none">
                        <p id="signRemarkTip" style="display:none" class=
                        "signTip">
                          Tip
                        </p>
                        <ul class="wxp_lis_1" id="signRemarkList">
                          <li id="signlbNoListTip">
                          还没有在地图上添加文字标记，点击上面的按钮开始在地图上添加文字标记
                          </li>
                        </ul>
                        <div style="color:#808080;display:none;padding:5px;"
                        id="signlbSaveTip">
                          (提示：请保存未保存的文字标记，未保存的文字标记在生成地图时内容不是最新的！)
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </td>
              <td style="vertical-align:top">
                <div onclick="a()" id="MapContent" style=
                "width:697px;height:550px;float:left;border:solid 1px #c8c8c8;margin-left:12px;">
                </div>
              </td>
            </tr>
          </table>
        </div>
        <div class="sign_content3" style="margin-top:80px;">
          <input type="button" value="生成地图" onclick="savebtn()" style="background-color: #ffcc99;border: #f60 solid 1px;margin-right:100px"/>
          <input type="button" value="预览效果" onclick="signPreview()" style="background-color:#FFFFFF;border: #9cf solid 1px;"/>
        </div>
        <div class="t30"></div>
      </div><script language="JavaScript" type="text/JavaScript">
//<![CDATA[
      baidu.G('login').href = "https://passport.baidu.com/?login&tpl=dev&u="+window.location.href;_bapi.init("copy_sign",104,34);doLoad();if (window.isMSIE55) fixalpha();bapi.checkLogin();bapi.config.apikey = window.location.href;function openDiv(id){var obj = document.getElementById(id);obj.style.display = "block";}function closeDiv(id){var obj = document.getElementById(id);obj.style.display = "none";}function setStates(obj,e){var e = window.event || e;var dom = e.target || e.srcElement;var navType = dom.getAttribute("navType");var parentNode = obj.parentNode;if(!navType){return;}if(obj.className == "map_open"){obj.className = "map_close";return;}for(var cn = 0; cn < parentNode.childNodes.length; cn++){var o = parentNode.childNodes[cn];if(o.nodeType != 1){continue;}if(o == obj){o.className = "map_open";}else{o.className = "map_close";}}if(navType == "sign"){var type = !!_gl.temp.curSignNav?_gl.temp.curSignNav:"Point";us_sign["open"+type]();}else{us_sign.exituserSign();}}
      //]]>
    


      </script>
        
        

    </div>
  </body>
</html>

　　在后台管理系统中，关于我们设置修改公司位置，跳转到如上设置的创建地图，设置好位置和标注后，点击生成地图后，会将获取到的htmlstr这个字符串通过ajax传递到后台，接收并将字符串保存保存到指定的路径的map.html。前台通过include引入map.html展示。

　　部分代码如下

/*后台编辑公司的位置*/
    @RequestMapping(value="createMap")
    public String createMap(HttpServletRequest request,SubSinglePageManage subSinglePageManage,Model model){
            
        return "/WEB-INF/back/pages/Map";
    }

/*接收前台中生成地图的字符串htmlstr*/
    @RequestMapping(value="receiveMap")
    @ResponseBody
    public String receiveMap(HttpServletRequest request,String htmlstr)throws IOException{

        //将写入转化为流的形式
        String path1=request.getServletContext().getRealPath("WEB-INF");
        String path=path1+"/template/index/map.html";
        PrintWriter pw = new PrintWriter(path);
                  pw.println(htmlstr);
               //关闭流
               pw.close();
        // 创建文件对象
        File fileText = new File(path);
        // 向文件写入对象写入信息
        FileWriter fileWriter = new FileWriter(fileText);

        // 写文件
        fileWriter.write(htmlstr);
        // 关闭
        fileWriter.close();

        return "/WEB-INF/back/pages/singleIndex";

    }

 

　　

<div class="list" >
                <%-- 判断是否为 “关于我们”即seqNumber==6 ，然后引用地图API中map.html文件--%>
                <c:if test="${subSinglePage.seqNumber==6}">
                    <%--<iframe frameborder="0" width="697px" height="550px" srcdoc="${subSinglePage.partContent}"></iframe>--%>
                    <jsp:include page="map.html"></jsp:include>
                </c:if>
                    <br>
            <%--去后台中获取相关的数据，在PageManageController--%>
                ${subSinglePage.allContent }
                 
</div>

 

 注意上面刚开始在创建地图是会出现百度地图的标注图标不显示的问题，通过dom获取

 //设置标注图片（获取不到标注的图片）
         function a() {
             var mark=document.getElementsByClassName("BMap_Marker");
             for(var i=0;i<mark.length;i++){
                 var tdiv=mark[i].getElementsByTagName("div");
                 if(tdiv.length>0){
                     tdiv[0].getElementsByTagName("img")[0].src="http://api.map.baidu.com/lbsapi/creatmap/images/us_mk_icon.png";
                 }
                 //mark[i].getElementsByTagName("img")[0].attr("src","http://api.map.baidu.com/lbsapi/creatmap/images/us_mk_icon.png");
             }
         }

 

posted @ 2020-04-28 09:58  永远不够格  阅读(544)  评论(0)    收藏  举报