切换到宽版
  • 1076阅读
  • 3回复

如何在网站中加入百度地图 [复制链接]

上一主题 下一主题
在线同城在线
 

发帖
2457
好评度
4285
只看楼主 倒序阅读 使用道具 楼主  发表于: 2014-12-03
关键词: 百度地图
KP=D! l&q  
(|<h^] y3  
<Spr6U9p7  
很多企业及个人都想在自己的网站中加入百度地图代码,但是一时间不知道如何在网站中加入百度地图。 QJ a4R  
Lf^5Eo/ 5A  
H}h~~7E  
工具/原料 'f-   
66~e~F}z  
l5=u3r9WYC  
  • AZxrJ2G  
    yX7CN5vVl  
    第一种:在百度地图上直接保存地图图片,并在PS中直接制作样式,并将图片上传至网站相应位置; _\,rX\  
  • FgOUe  
    W>Mse[6`c  
    第二种:在百度地图生成器中进行地图生成,完成后将代码复制到网站的相应位置; @[d#mz  
  • ^e?$ ]JiA!  
    ;'=VrE6  
    第三种:在百度搜索百度地图名片,这种方法非常容易,要比我今天所讲的要更容易些。
Gva}J 6{  
#"Eks79s  
rWoe ?g  
方法/步骤 Mx/h?}u;  
"JzfL(yt  
m\6SG' X  
  1. 7$+P|U  
    0NQ7#A  
    K08 iPIkQ  
    记住百度地图生成器地址百度地图生成器的地址:http://api.map.baidu.com/lbsapi/creatmap/index.html M'cJ)-G  
    _kn]#^ucCe  
  2. w~<FG4@LU  
    20rN,@2<  
    ;JOD!|  
    打开地图生成器:生成器地址已经在上面提到了,这里就不重复了。 b A)b`1lI  
  3. YO@hE>  
    xw4ey<"I  
    6Cl+KcJH  
    创建地图。1.定位中心点:将“当前城市”切换到你要创建地图的城市,并输入详细地址进行查找。 cP*c(k~N  
       2.设置地图:设置地图尺寸,地图缩放、地图缩略图、地图比例尺、地图状态等。依照自己或者客户的习惯进行设定。   3.添加标注:标记的图标可以在地图上面进行简单修改位置。输入公司的名称,在备注中可以添加地址、电话、传真、邮编、邮箱等属性。点击保存将进行下一步。 09R,'QJ|  
    *nYB o\@g  
  4. 4
    V.;:u#{@-Q  
    uQ:Qb|  
    获取代码,这块我相信就不用详细说明了吧。只要点击获取代码按钮,就会自动弹出一个“自定义地图代码”的页面,将页面中的代码复制即可。 h'B9|Cm  
  5. 5
    I:F'S#  
    iD%qy/I/  
    将代码复制到网站的相应位置即可。 5U0ytDZ2/(  
_qY`KP "  
同城中国网 中国第一家B2C 020综合营销门户网站及电子商务平台
在线同城在线

发帖
2457
好评度
4285
只看该作者 沙发  发表于: 2014-12-03
百度地图API使您能够将百度地图嵌入自己的网页中。一个地图 API 密钥只对一个“目录”或域有效。您必须有百度帐户才能获得地图API密钥,并且API密钥会与您的百度帐户关联。 )nhfkW=e  
}g}6qCv7  
百度地图api使用_百度地图api ... --Oprl  
刚刚发现百度地图api开放了.地址是: http://openapi.baidu.com/map/index.html 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富、交互性强的地图应用程序。百度地图API不仅包含构建地图的基本接口,还提供了诸如本地搜索、路线规划等数据服务。地图API的服务是免费的,任何非盈利性网站均可使用。请参阅使用条款获得详细信息。百度地图api使用,百度地图api下载_百度地图api教程百度地图api教程: http://openapi.baidu.com/map/documents.html 什么是百度地图API?百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富、交互性强的地图应用程序。百度地图API不仅包含构建地图的基本功能接口,还提供了诸如本地搜索、路线规划等数据服务。面向的读者API是提供给那些具有一定HTML和JavaScript编程经验的读者使用的。此外,读者还应该对地图产品有一定的了解。您可能对地图的内部处理逻辑不是很了解,百度地图AP
同城中国网 中国第一家B2C 020综合营销门户网站及电子商务平台
在线同城在线

发帖
2457
好评度
4285
只看该作者 板凳  发表于: 2014-12-03
最近在做一个网站,需要嵌入经销商的位置和信息。搜索了很多资料,终于完成了功能,给大家分享一下。 #`vVg GZ&  
地图功能:按标尺缩放,鼠标滑动缩放,添加标注和 信息。 H;qJH1EdD  
具体步骤: +hpSxdAz4  
1:首先到百度地图API,申请密钥。(如果没有百度账户得先注册一个) VW{,:Ya  
2:百度地图API的功能做得比较分散,像标注、缩放等都是需要自己一步步找代码的。我把代码整理了一下,给大家复制一下,应该是最简洁的了 T 4eWbNSs  
<head> kr#I{gF  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 xUE,)?  
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=申请的密钥"></script> [ qiOd!  
</head> L4~ W/6A  
<body> Im6U_JsNZh  
<div style="width:500px;height:500px;margin:0 auto" id="allmap"></div> @2u#93Y  
<script type="text/javascript"> C]/&vh7ta  
    var map = new BMap.Map("allmap");     t{~@I  
    var point = new BMap.Point(116.384, 39.987);  // 需要标注的位置的经纬度   ^ZR8s^X  
    map.centerAndZoom(point, 15);  // 中心位置和缩放倍数 L+73aN  
    map.enableScrollWheelZoom();   // 添加滚动轴 6Hda]y  
    map.addControl(new BMap.NavigationControl());   // 添加左上角的标尺工具 HQl~Dh0DJ  
    map.addControl(new BMap.NavigationControl());     1f<RyAE?5  
    map.addControl(new BMap.ScaleControl());     $1~c_<DN  
    map.addControl(new BMap.OverviewMapControl());     (X*9w##x(  
    map.addControl(new BMap.MapTypeControl());     M=W 4:H,gx  
    map.setCurrentCity("北京"); jSB'>m]  
     XYts8}y5  
    var opts = {     )qmFK .;%  
         width : 200,     // 信息窗口宽度     :xM}gPj"  
        height: 20,     // 信息窗口高度     "tKNlHBu'  
         title : "健翔桥东华亭家园"  // 信息窗口标题   wajZqC2yg  
    }     +uELTHH=  
    var infoWindow = new BMap.InfoWindow("xxx公司", opts);  // 创建信息窗口对象     _1P`]+K\D$  
    map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口 <E SvvTf  
    var marker = new BMap.Marker(point);        // 创建标注,即地图上的小红点     zb>;?et;)  
    map.addOverlay(marker);                             b]w[*<f?  
</script>
同城中国网 中国第一家B2C 020综合营销门户网站及电子商务平台
在线同城在线

发帖
2457
好评度
4285
只看该作者 地板  发表于: 2014-12-10
cN5"i0xk  
零成本搬家工具 QAi1,+y]7w  
BtzYA"  
只需一步,实现“零成本”迁移!适用于所有利用谷歌API制作的地图应用,无需开发,即可迁移至百度。 Sj@15 W  
FD))'!>  
)O&z5n7t4s  
快速示例 ?;_O 9  
fq=:h\\G  
迁移工具JS: [8TS"ph>  
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script> *t]v}ZV*  
<script type="text/javascript" src="g2b.o.js"></script>           %W&1`^Jl  
  如下图,您需要做的,仅仅是将谷歌的JS替换成迁移工具的JS。 %XR<isn  
m d_g}N(C  
m2Q$+p@  
同城中国网 中国第一家B2C 020综合营销门户网站及电子商务平台
快速回复
限100 字节
如果您在写长篇帖子又不马上发表,建议存为草稿
 
上一个 下一个