改造百度地图生成器

最新推荐文章于 2024-05-23 17:45:40 发布
最新推荐文章于 2024-05-23 17:45:40 发布
阅读量588 收藏 1
点赞数 1
文章标签： 百度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37593409/article/details/128585530
版权

百度地图创建
百度地图开发平台中创建地图，地图界面太小，如下：
创建地图-百度地图生成器
经过改造，使界面扩大，便于使用。地址如下，欢迎使用：
http://map.orgw.net/map.htm

<html>
<head>
  
   <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 
   <title>创建地图-百度地图生成器</title>
   <link rel = "stylesheet" href = "http://map.orgw.net/style.css?style" type = "text/css"/>
    <link rel="shortcut icon" href="http://lbsyun.baidu.com/skins/MySkin/resources/img/icon/lbsyunlogo_icon.ico">
</head>
<body>
<!--主体部分-->
     <div class = "mcontainer">
     <div class = "showCode">
				<p>自定义地图代码</p>
				<p style="color:red;font-weight:600">地图生成工具基于百度地图JS api v2.0版本开发，为了正常使用百度地图API服务，请在此段代码中加入您的密匙。
				</p>
				<p>
				<a style = "color: #2f83c7;" href="http://developer.baidu.com/map/index.php?title=jspopular/guide/introduction" target="_blank">了解如何申请密匙</a></p>
				
				<textarea id="code" readonly="readonly" class = "l"></textarea>
				<div style = "width: 120px;height:100%" class = "r">
					<div id="app_key">
<a href = "http://lbsyun.baidu.com/apiconsole/key?application=key" target="_blank" style="color:#2f83c7">申请密匙</a>
					</div>
					<div id = "d_clip_button" >复制代码</div>
					<div id = "close">关闭</div>
				</div>
			</div>
			<h1>第一步 创建地图</h1>
			<div class = "draw_map l">
				<div class = "nav l">
					<ul>
<li>
	<div  class="current list-item" >&nbsp;1. 定位中心点</div>
	<div id = "set_center" class = "show l mt-10">
<div id = "setCity" style = "height:26px;">
	<div class = "show">当前城市：
<span id="current_city">北京市</span>
<span style = "color:#2f83c7; cursor:pointer;" id = "change_city" onclick = "setCity()"> 切换</span>
	</div>
	<div class = "hidden">
<input id = "input_city" type = "text" value = "请输入城市名称" style = "width: 115px" onclick = "this.value = ''" onkeyup = "citynameKeyUp()"/>
<span class = "btn_blue" onclick = "confirmCity()">确定</span>
<span class = "btn_blue" onclick = "exitSetCity()">取消</span>
	</div>
</div>

<input id = "input_site" type = "text" value = "输入地名快速定位" onclick = "this.value=''" onkeyup = "siteKeyUp()" style="width:165px"/>
<span class = "btn_blue" onclick = "searchLocation()">查找</span>
<p>当前地图中心点经纬度：</p>
<div style="margin-bottom:10px;">
	<label class="l" style="line-height:22px">X：</label>
	<div id = "input_x" style = "line-height:20px; width: 110px;display:block; margin-left:30px">116.403874</div>
</div>
<div style="margin-bottom:10px;">
	<label class="l" style="line-height:22px">Y：</label>
	<div id = "input_y" style = "line-height:20px; width: 110px;margin-left: 30px;">39.914889</div>
</div>
<div>
	<label class="l" style="line-height:22px">当前地图级别：</label>
	<div id = "input_zoom" style = "line-height:20px; width: 20px;border:solid 1px #626262;background:#eee;margin-left: 90px;">12</div>
</div>
	</div>

</li>

<li>
	<div  class="list-item" >&nbsp;2. 设置地图</div>
	<div id = "map_contorl" class = "hidden">
	<div class = "l mt-10" style = "margin-bottom:10px">
	<div style = "width:70px;height:100%" class = "l"><h3>地图尺寸</h3> </div>

	<div class = "l" style = "height:100%;width:153px;">
	宽度：<input id = "input_map_width" style = "width: 70px;margin-bottom:10px;" type = "text" value = "700" onkeyup = "resizeMap()"/> 像素
	<br>高度：<input id= "input_map_height" style = "width: 70px" type = "text" value = "550" onkeyup = "resizeMap()"/> 像素
	
	<div class = "l">
	<div style = "width:70px;height:20px" class = "l"><h3>添加按钮</h3> </div>
	<div class = "l" style = "height:100%;width:153px;">
	<div class = "bg-gray">
	<label ><input id = "input_add_nav" class = "cb" type = "checkbox" checked = "true" onclick = "addNavControl()"/>地图缩放</label><br>
	</div>
	<div class = "l" style = "">
	<label style="float:left;height:25px;line-height:25px;dispaly:inline-block">样式：</label>
	<div style = "width:100px; height: 45px " class = "l">
	<label><input name = "nav_style" type = "radio" checked = "true" value ="BMAP_NAVIGATION_CONTROL_LARGE" onclick = "resetNavType()"/>标准</label>
	<label><input name = "nav_style" type = "radio" value ="BMAP_NAVIGATION_CONTROL_SMALL" onclick = "resetNavType()"/>精简</label>
	<label><input name = "nav_style" type = "radio" value ="BMAP_NAVIGATION_CONTROL_PAN" onclick = "resetNavType()"/>平移</label>
	<label><input name = "nav_style" type = "radio" value ="BMAP_NAVIGATION_CONTROL_ZOOM" onclick = "resetNavType()"/>缩放</label>
	</div>
	<label style="float:left;height:25px;line-height:25px;dispaly:inline-block">位置：</label>
	<div style = "width:100px; height: 45px " class = "l">
	<label><input name = "nav_pos" type = "radio" checked = "true" value = "BMAP_ANCHOR_TOP_LEFT" onclick = "resetNavPos()"/>左上</label>
	<label><input name = "nav_pos" type = "radio" value = "BMAP_ANCHOR_TOP_RIGHT" onclick = "resetNavPos()"/>右上</label>
	<label><input name = "nav_pos" type = "radio" value = "BMAP_ANCHOR_BOTTOM_LEFT" onclick = "resetNavPos()"/>左下</label>
	<label><input name = "nav_pos" type = "radio" value = "BMAP_ANCHOR_BOTTOM_RIGHT" onclick = "resetNavPos()"/>右下</label>
</div>
	</div>

	<div class = "bg-gray clearfix">
<label ><input id = "input_add_overview" class = "cb" type = "checkbox" checked = "true" onclick = "addOverviewControl()"/>地图缩略图</label><br/>
	</div>
	<div class = "l" style = "background:#fff">
	<label style="float:left;height:25px;line-height:25px;dispaly:inline-block">状态：</label>
<div style = "width:100px; height: 25px " class = "l">
	<label><input name = "overview_style" type = "radio" checked = "true" onclick = "resetView()"/>展开</label>
	<label><input name = "overview_style" type = "radio" onclick = "resetView()"/>收起</label>
</div>
<label style="float:left;height:25px;line-height:25px;dispaly:inline-block">位置：</label>
<div style = "width:100px; height: 45px " class = "l">
	<label><input name = "overview_pos" type = "radio" value = "BMAP_ANCHOR_TOP_LEFT" onclick = "resetOverviewPos()"/>左上</label>
	<label><input name = "overview_pos" type = "radio" value = "BMAP_ANCHOR_TOP_RIGHT" onclick = "resetOverviewPos()"/>右上</label>
	<label><input name = "overview_pos" type = "radio" value = "BMAP_ANCHOR_BOTTOM_LEFT" onclick = "resetOverviewPos()"/>左下</label>
	<label><input name = "overview_pos" type = "radio" value = "BMAP_ANCHOR_BOTTOM_RIGHT" checked = "true"  onclick = "resetOverviewPos()"/>右下</label>
</div>
	</div>

	<div class = "bg-gray clearfix">
<label ><input id = "input_add_scale" class = "cb" type = "checkbox" checked = "true" onclick = "addScaleControl()"/>地图比例尺</label><br/>
	</div>
	<div class = "l" style = "background:#fff">
<label style="float:left;height:25px;line-height:25px;dispaly:inline-block">单位：</label>
<div style = "width:100px; height: 25px " class = "l">
	<label><input name = "scale_style" type = "radio" checked = "true" value = "BMAP_UNIT_METRIC" onclick = "resetScaleUnit(this.value)"/>公制</label>
	<label><input name = "scale_style" type = "radio"  value = "BMAP_UNIT_IMPERIAL" onclick = "resetScaleUnit(this.value)"/>英制</label>
</div>
<label style="float:left;height:25px;line-height:25px;dispaly:inline-block">位置：</label>
<div style = "width:100px; height: 45px " class = "l">
	<label><input name = "scale_pos" type = "radio"  value = "BMAP_ANCHOR_TOP_LEFT" onclick = "resetScalePos()"/>左上</label>
	<label><input name = "scale_pos" type = "radio" value = "BMAP_ANCHOR_TOP_RIGHT" onclick = "resetScalePos()"/>右上</label>
	<label><input name = "scale_pos" type = "radio" value = "BMAP_ANCHOR_BOTTOM_LEFT" checked = "true" onclick = "resetScalePos()"/>左下</label>
	<label><input name = "scale_pos" type = "radio" value = "BMAP_ANCHOR_BOTTOM_RIGHT" onclick = "resetScalePos()"/>右下</label>
</div>
	</div>

</div> 
	</div>
	<div class = "l">
<div style = "width:70px;height:100%" class = "l"><h3>地图状态</h3> </div>

<div class = "l" style = "height:100%;width:153px;">
	<label><input id = "cb1" class = "cb" type = "checkbox" checked = "true" onclick = "resetScrollWhellZoom()"/>鼠标滚轮缩放</label><br/>
	<label><input id = "cb2" class = "cb" type = "checkbox" checked = "true" onclick = "resetKeyboard()"/>键盘方向移动</label><br/>
	<label><input id = "cb3" class = "cb" type = "checkbox" checked = "true" onclick = "resetDragging()"/>鼠标拖动地图</label><br/>
	<label><input id = "cb4" class = "cb" type = "checkbox" checked = "true" onclick = "resetDoubleClickZoom()"/>鼠标双击放大</label><br/>
</div> 
	
</li>
<li>

	<div  class="list-item" >&nbsp;3. 添加标注</div>
	<div class = "l hidden">
	<div id = "add_overlay" class = "l mt-10">
<div id = "marker_nav">
	<ul>
<li idx = "0" id = "ol_marker" class = "l " title = "点标记" onclick = "addMarker()"></li>
<li idx = "1" id = "ol_polygen" class = "l" title = "线标记" onclick = "addPolyline()"></li>
<li idx = "2" id = "ol_label" class = "l" title = "文字标记" onclick = "addLabel()"></li>
	</ul>

	<p id = "tip1" class = "show">还没有在地图上添加点标记，点击上面的按钮开始在地图上添加点标记
	</p>
	<p id = "tip2" class = "hidden">还没有在地图上添加线标记，点击上面的按钮开始在地图上添加线标记
	</p>
	<p id = "tip3" class = "hidden">还没有在地图上添加文字标记，点击上面的按钮开始在地图上添加文字标记
	</p>
</div>
<p id = "warning_marker">最多只能添加10个标记</p>
<p id = "warning_label">最多只能添加10个文字标注</p>
<p id = "warning_polyline">最多只能添加10个线标注</p>
<div class = "l" id = "list_marker">
</div>
<div class = "l" id = "list_polyline">
</div>
<div class = "l" id = "list_label">
</div>
	</div>
</div>

</li>
					</ul>
				</div>
				<div id = "map_container" class = "map l" style = "margin-bottom: 10px">
				</div>
			</div>
			<h1 class = "clearfix">第二步 获取代码</h1>
			<div style = "height:70px; border-bottom: solid 1px #e5e5e5;">
				<div style = "width: 300px; margin:auto;">
					<div id = "get_code" class = "btn l" onclick = "showCode()" ></div>
					<div id = "pre_code" class = "btn l" onclick = "previewPage()"></div>
				</div>
			</div>
			

		<!--主体部分 end-->

	</body>
<script>
// tongji.baidu.com
var _hmt = _hmt || [];
(function () {
    var hm = document.createElement('script');
    hm.src = 'https://hm.baidu.com/hm.js?b5ada71a7fc1ceaa3be32030f94c1d68';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(hm, s);
})();
</script>

</html>

<script type = "text/javascript" src = "http://api.map.baidu.com/lbsapi/createmap/js/jquery-1.11.1.min.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=eYf9sA6yVTFHlh9ytU4a0EYY" type = "text/javascript" ></script>
<script type = "text/javascript" src = "http://api.map.baidu.com/lbsapi/createmap/js/mapConfig.js"></script>
<script type = "text/javascript" src = "http://api.map.baidu.com/lbsapi/createmap/js/main.js"></script>
<script type = "text/javascript" src = "http://api.map.baidu.com/lbsapi/createmap/js/mapSettings.js?city"></script>
<script type = "text/javascript" src = "http://api.map.baidu.com/lbsapi/createmap/js/getCode.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/lbsapi/createmap/ZeroClipboard.js"></script>

渭水一方
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用百度地图JavaScript API 画轨迹，给出自定义图标和标注
02-07
traceDraw.jsp画给定点的运动轨迹，personTraceMap.jsp根据位置数组画运动轨迹。person.png为自行准备的图标
百度地图生成基站图层工具V3.1.rar
12-16
【百度地图生成基站图层工具V3.1】是一款专为IT从业者和地理信息系统（GIS）爱好者设计的应用程序，主要用于在百度地图上自定义显示基站信息。通过此工具，用户可以方便地将基站数据导入，生成可视化基站图层，从而...
网页内嵌百度地图位置定位
成为有领导力的技术专家
10-09 1511
一、网页内嵌百度地图定位 百度地图目前我用过的有2个，分别为1.1和2.0版本。1.1版本不需要密匙也能运行，但是显示模糊且需要修改API，2.0版本显示效果好但是需要申请密匙，为了效果还是推荐2.0版本。 1、百度地图生成器1.1版本 http://api.map.baidu.com/lbsapi/creatmap/index.html 2、百度地图生成器2.0版本 如果要使用2.0的API，需要注册成为百度开发者，然后再申请密匙。 申请密匙地址：http://lbsyun.baidu.com/
使用百度地图生成器-创建百度地图
最新发布
9264
05-23 561
创建百度地图网页
【巧用百度地图】—百度地图生成器（直接获取代码）
热门推荐
不管风吹浪打，胜似闲庭信步
09-24 1万+
上篇我们讲述了如何获取AK值，这是最基本的一步，先进了大门口再说，本篇来讲述百度地图的代码生成。之前是自己费劲头脑查到代码，其实不用那么费尽周折，百度已经为您服务好，直接使用百度地图生成器，可直接获取代码，方便，快捷，最大的感叹就是：百度真的是全心全意为用户服务啊！服务对象不仅仅有普通的用户，还有开发者都能够想到，感叹感叹啊！ 链接地址：http://api.map.baidu.com/lbsa
让百度地图生成器里的“标注”内容展开--解决方案
橙-极纪元-cplvfx-JJY.Cheng
07-20 1277
代码 如果你用我写的代码，需要知道下面2个 百度地图生成器：http://api.map.baidu.com/lbsapi/createmap/index.html 百度地图拾取坐标系统：http://api.map.baidu.com/lbsapi/getpoint/index.html 但是，百度地图生成器里的“标注”点，是不会展开的， 我们今天就是想让它展开 效果展示： 只需要关注的代码： var cp_title=" 郑州英伦电气有限公司"; var cp_content="联系
百度死链xml生成器.rar
03-26
"百度死链xml生成器" 是一个专为网站管理员设计的实用工具，它帮助检测并管理网站中的无效链接，即通常所说的“死链”。死链的存在不仅会影响用户体验，还可能对搜索引擎优化（SEO）产生负面影响，降低网站的排名。...
WordPress 百度sitemap地图生成插件.zip
11-13
HC_seo_sitemap 网站地图插件是Baidu Sitemap Generator和Dx_seo分离出来的一个可生成xml网站地图的Wordpress插件，便于加速搜索蜘蛛爬行，加速搜索引擎收录。 小而轻，简单实用，不会报错 可生成XML，提交百度，...
sitemap地图生成器-网站地图生成器
02-18
**sitemap地图生成器详解** sitemap地图，也称为站点地图，是一种特殊格式的XML文件，它列举了网站上所有重要页面的URL，便于搜索引擎爬虫更好地理解和抓取网站内容。一个有效的sitemap可以帮助提升网站的SEO（搜索...
批处理地图生成助手-地图生成器.bat
02-18
批处理地图生成助手，用于游戏地图编写，速度稍慢，可以配和我的操控系统。 适合二创
百度地图生成器
10-15
百度地图生成器，SEO必须。针对网站可以生成代码让蜘蛛抓取。很容易使用。
百度地图瓦片生成工具
07-21
免费软件。 新版下载地址：http://blog.csdn.net/bq_cui 2013.7.21 可以生成切片及代码。 bug：地图级别切换时图像位置跳跃导致不平滑。 说明： 请自己到百度免费申请密钥，替换t.html文件中“您的密钥”。 申请地址 http://lbsyun.baidu.com/apiconsole/key?application=key
百度地图如何创建一个属于自己的地图，附加到项目中？
TrueDei
12-16 3345
创建地图-百度地图生成器 一、打开百度地图生成器的网址 网址：http://api.map.baidu.com/lbsapi/creatmap/ 可以看出官方给出了两个步骤： 第一步：创建地图 第二步：获取代码 特别的简单。动动鼠标，点点地图就可以做到了少写几百行代码的目的。name接下来咱们一起看一下从创建到在真实代码中是如何使用的。 二、创建地图 （一）定位中心点 定位中心点：这个功能就是执...
百度地图生成
qq18811561684的博客
04-19 241
//登录百度地图开放平台下载Jar包创建应用需要注册 发布版SHA1：http://blog.csdn.net/lhg_55/article/details/52669109 开发版SHA1：http://blog.csdn.net/lhg_55/article/details/52809396 进入网页看步骤创建应用 //创建完成代码实现 （1）在application中添加开
js使用百度地图api绘制单、多线路
Jul的博客
06-02 2811
js使用百度地图api绘制单、多线路
3D地图编辑器实现详解
"3D地图编辑器的实现涉及到游戏工具和引擎开发，对于初学者来说是一个很好的参考。本文将详细介绍3D地图编辑器的实现过程，包括其重要性、类型以及核心组件如地形编辑器。" 在3D游戏开发中，3D地图编辑器是不可或缺...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值