第一步：进入百度创建地图的网站http://api.map.baidu.com/lbsapi/creatmap/，搜索出自己要展示的位置
第二步：设置地图，大家可以对网站显示地图的宽高进行设置，其余选项不动。
第三步：添加标注。点击第一个图标后，在右侧升羡找到自己的位置，单击鼠标左键可定位。标记图标处可更换图标形状，名称和备注填入位置相关信息。
第四步：获取代码。将代码贴到你的网页里就OK了。代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"><html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html charset=gb2312" />
<meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百汪并度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图，帮助用户在可视化 *** 作下生成百度地图" />
<title>百度地图API自定义地图</title>
<!--引用百度地图API-->
<style type="text/css">
html,body{margin:0padding:0}
.iw_poi_title {color:#CC5522font-size:14pxfont-weight:boldoverflow:hiddenpadding-right:13pxwhite-space:nowrap}
.iw_poi_content {font:12px arial,sans-serifoverflow:visiblepadding-top:4pxwhite-space:-moz-pre-wrapword-wrap:break-word}
</style>
<script type="text/javascript" src="<a href="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script">http://api.map.baidu.com/api?key=&v=1.1&services=true"></script</a>>
</head></p>< p><body>
<!--百度地图容器-->
<div style="width:697pxheight:550pxborder:#ccc solid 1px" id="dituContent"></div>
</body>
<script type="text/javascript">
//创建和初始化地图函数：
function initMap(){
createMap()//创建地图
setMapEvent()//设置地图事件
addMapControl()//向地图添加控件
}
//创建地图函数：
function createMap(){
var map = new BMap.Map("dituContent")//在百度地图容器中创建一困笑迹个地图
var point = new BMap.Point(113.116257,27.822879)//定义一个中心点坐标
map.centerAndZoom(point,17)//设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map//将map变量存储在全局
}
//地图事件设置函数：
function setMapEvent(){
map.enableDragging()//启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom()//启用地图滚轮放大缩小
map.enableDoubleClickZoom()//启用鼠标双击放大，默认启用(可不写)
map.enableKeyboard()//启用键盘上下左右键移动地图
}
//地图控件添加函数：
function addMapControl(){
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE})
map.addControl(ctrl_nav)
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1})
map.addControl(ctrl_ove)
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT})
map.addControl(ctrl_sca)
}
initMap()//创建和初始化地图
</script>
</html>
在前两文中描述了通过叠加Geoserver WMS服务、通过代理层实现WMS服务的本地缓存,本文将讲述通过切片的方式，按百度地图的规则进行切图，按百度瓦片的XYZ规则进行图层叠加。
切片工具源码已在github共享，地址如下： https://github.com/michael-laoyu/MapTileGenerator 。 记得点STAR！
设置mapConfig.json，根据配置项请求WMS服务进行切片，早斗支持多线程方式。并贺2016/8/2进行了完善，改进了多线程部分，增加了切片的进度事件。
瓦片存储路径：程序目录\Tiles\Zoom\x_y.png
将生成的切片拷贝到Web站点下，前端页面通过URL链接访问，参考如下：
本文是百度地图的最后一篇，分别讲述了不同的几种思路，实际应用应根据业务场景相互结合。
F3Earth是一群志同道合的伙伴发起的国产Web 3D Engine项目，github地址： https://github.com/f3earth/f3earth ， 目前正在开发中，DEMO已初具绝睁派功能，期待更多朋友的参与。
打开百度州清地图首页，点击右上角地图开放平台进入。
依次点击菜单栏“开发”-“工具支持”-“地图生成器”进入创建地图页面。
按照自己的实际情况在右侧地图定位中心点。
根据需要设置填写地图尺寸、按钮、状态等。
根据情况添加点标记、线标记、文字标记。
设置完成后，直接点击底部“获取代码”按钮复制生成的代码，将该代码加入到网站源码合橡迹颂适的地方。
点击底部左侧更多高级功能，进入地图API示例，找到全景图示例。
然后选择对应的全景图梁郑代码复制并添加到网站源码合适的地方即可。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）