十年专注于品牌网站建设，低调、高逼格、有情怀的网络应用服务商！
全国服务***：400-680--
如何在网页中插入百度地图呢?南昌网络公司小虫分享自己的经验：
1.进入：& （创建地图-百度地图API所见即所得工具，百度官方地址，大家放心使用）
2.切换城市，搜索需标注位置。（如下图：）
2.设置地图：大家可以对网站显示地图的宽高进行设置，其余选项不动。
3.添加标注：点击第一个图标后，在右侧找到自己的位置，单击鼠标左键可定位。标记图标处可更换图标形状，名称和备注填入位置相关信息。（如下图：）
4.完成以上3步后，点获取代码。
获取代码如下：（注意：通常我们在网页中只要插入以下代码，小虫标注出来，其余的可不用。）
1.在&head&&/head&间插入下面代码：这是样式和JS脚本。
&!--引用百度地图API--&
&style type=&text/css&&
&&& html,body{margin:0;padding:0;}
&&& .iw_poi_title {color:#CC5522;font-size:14font-weight:overflow:padding-right:13white-space:nowrap}
&&& .iw_poi_content {font:12px arial,sans-overflow:padding-top:4white-space:-moz-pre-word-wrap:break-word}
&script type=&text/javascript& src=&&
2.在&body&&/body&间需要显示地图的位置放入以下代码：（该代码调用地图）
& &!--百度地图容器--&
& &div style=&width:697height:550border:#ccc solid 1& id=&dituContent&&&/div&
3.以下代码放在页面最底端（其实可放在页面任意位置。）
&script type=&text/javascript&&
&&& //创建和初始化地图函数：
&&& function initMap(){
&&&&&&& createMap();//创建地图
&&&&&&& setMapEvent();//设置地图事件
&&&&&&& addMapControl();//向地图添加控件
&&&&&&& addMarker();//向地图中添加marker
&&& //创建地图函数：
&&& function createMap(){
&&&&&&& var map = new BMap.Map(&dituContent&);//在百度地图容器中创建一个地图
&&&&&&& var point = new BMap.Point(115..693851);//定义一个中心点坐标
&&&&&&& map.centerAndZoom(point,18);//设定地图的中心点和坐标并将地图显示在地图容器中
&&&&&&& window.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_N***IGATION_CO***OL_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);
&&& //标注点数组
&&& var markerArr = [{title:&百恒网络&,content:&***：3&br/&手机：&,point:&115..693447&,isOpen:1,icon:{w:23,h:25,l:46,t:21,x:9,lb:12}}
&&& //创建marker
&&& function addMarker(){
&&&&&&& for(var i=0;i&markerArr.i++){
&&&&&&&&&&& var json = markerArr[i];
&&&&&&&&&&& var p0 = json.point.split(&|&)[0];
&&&&&&&&&&& var p1 = json.point.split(&|&)[1];
&&&&&&&&&&& var point = new BMap.Point(p0,p1);
&&&var iconImg = createIcon(json.icon);
&&&&&&&&&&& var marker = new BMap.Marker(point,{icon:iconImg});
&&&var iw = createInfoWindow(i);
&&&var label = new BMap.Label(json.title,{&offset&:new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
&&&marker.setLabel(label);
&&&&&&&&&&& map.addOverlay(marker);
&&&&&&&&&&& label.setStyle({
&&&&&&&&&&&&&&&&&&&&&&& borderColor:󅒐&,
&&&&&&&&&&&&&&&&&&&&&&& color:ō&,
&&&&&&&&&&&&&&&&&&&&&&& cursor:&pointer&
&&&&&&&&&&& });
&&&(function(){
&&&&var index =
&&&&var _iw = createInfoWindow(i);
&&&&var _marker =
&&&&_marker.addEventListener(&click&,function(){
&&&&&&& this.openInfoWindow(_iw);
&&&&&& });
&&&&&& _iw.addEventListener(&open&,function(){
&&&&&&& _marker.getLabel().hide();
&&&&&& _iw.addEventListener(&close&,function(){
&&&&&&& _marker.getLabel().show();
&&&&label.addEventListener(&click&,function(){
&&&&&&& _marker.openInfoWindow(_iw);
&&&&if(!!json.isOpen){
&&&&&label.hide();
&&&&&_marker.openInfoWindow(_iw);
&&& //创建InfoWindow
&&& function createInfoWindow(i){
&&&&&&& var json = markerArr[i];
&&&&&&& var iw = Window(&&b class='iw_poi_title' title='& + json.title + &'&& + json.title + &&/b&&div class='iw_poi_content'&&+json.content+&&/div&&);
&&& //创建一个Icon
&&& function createIcon(json){
&&&&&&& var icon = new BMap.Icon(&&, new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
&&& initMap();//创建和初始化地图
&&& 当然，如果你想偷懒，将以上对应代码全放在&body&&/body&间也是没问题的，呵呵。
&&& 另外大家也可以通过网站后台添加内容时在编辑器中插入，插入时记得点&源代码&见下图：
&&& 记得在早几年，给大家使用，并能在百度地图搜索时显示标注的位置，后来百度把标注这一功能定位于商业使用。现在都统一用这种API方式来标注，唯一不同的是不能在网络上搜索到所标注的位置了。但小虫认为也挺好用。赞一个。示例成品如下图：
&&& 最近小虫发现百度另一种地图标注方式也挺不错，请查看：
&&& 如果你有多个点，希望标注在同一张地图上。那请看下面这篇文章，有惊喜哦。
欢迎您的光顾，我们将竭诚为您服务&天气好热，好想射点儿什么！！！
喔霍霍霍霍霍霍霍霍，有没有凉快好多？
或者，你是在办公室打开的，然后心脏狂跳、浑身燥热，狂点关闭…….
好吧！不管你谢我还是恨我，下面这个视频，你总是想要的吧！
下载地址：
提取密码：rp9d
如果，不方便看视频，下面是文字描述：
百度地图嵌入原型步骤***：
1、打开，搜索“苍老师 无码”；
2、sorry，习惯了！第1步，不用搜索…..,然后，第2步，点击“”；
3、百度地图页面右上角，点击“”;
4、页面最下方，点击【插件与工具】里的””
5、【定位中心点】输入中心点名称，比如”国贸”；
6、【设置地图】，根据需求设置地图尺寸以及选择/设置功能模块；
7、【添加标注】，可以在地图上添加图标标记（也可线标记和文字标记），设置标记名称及备注等功能。
8、【获取代码】，获取代码后，点击【复制代码】将代码复制（现在需要key了，点击复制时，有个申请密钥的按钮，可以申请，没有门槛。共享一个key：5c4b6cfcdfc34ddb9d80c）。
9、在本地右键新建文本文档，将代码粘贴到文档中，选择【另存为…】，下拉列表中选择【所有文件(*.*)】，文件名填写baidumap.html（前缀”baidumap”可以自定义）。如果电脑文件后缀可见的话，可以直接保存，然后修改文本文档的文件名为baidumap.html。
10、在Axure编辑区中，拖入一个框架，设置与地图一致的尺寸，并取消边框和滚动条，双击后，勾选链接到URL或外部文件，输入框中填写：
11、按F8生成Html文件，注意文件的保存路径；
12、将baidumap.html复制到上一步中路径所指向的文件夹中，重新打开原型文件即可看到嵌入效果。
~~~~~~~~~~~~
~~~~~~~~~~~~
小楼老师再出新作，倾力打造Axure RP 8精品课程系列，全新的套路，经典的姿势，更舒爽，更润滑，更紧致，更销魂，想体验这种欲罢不能的学习感觉？快从下面进入！
《AxureRP 8 入门与实战 - 入门篇》------从零入门的最佳课程------
《AxureRP 8 入门与实战 - 案例篇》------实战手册的同步视频------
转载请注明： &
or分享 (0)