如何在网页中嵌入自己制作的小区域地图

如题所述

举报该文章

相关建议 2017-08-06

第一步
打开网址：百度地图首页（怎么打开呢？小伙伴们直接百度搜索百度地图就可以咯！！！），拉到网页下方，找到“插件与工具”栏目中的“地图快速生成器”，
第二步创建地图
1、定位中心点。按照自己的实际情况定位即可。
2、设置地图。同样根据自己的实际情况设置合适的宽度和高度即可。
3、添加坐标。根据情况添加点标记、线标记、文字标记即可
第三步
直接点击“获取代码”按钮即可。
第四步
将该代码加入到网站源码合适的地方即可。

代码参考如下：

在<head></head>间插入下面代码：这是样式和JS脚本。

<style type="text/css">
   html,body{margin:0;padding:0;}
   .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
   .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
2.在<body></body>间需要显示地图的位置放入以下代码：（该代码调用地图）

<div style="width:697px;height:550px;border:#ccc solid 1px;" 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.949652,28.693851);//定义一个中心点坐标
       map.centerAndZoom(point,18);//设定地图的中心点和坐标并将地图显示在地图容器中
       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);
   }

   //标注点数组
   var markerArr = [{title:"百恒网络",content:"电话：0791-88117053<br/>手机：15079002975",point:"115.950312|28.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.length;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:"#808080",
                       color:"#333",
                       cursor:"pointer"
           });

  (function(){
   var index = i;
   var _iw = createInfoWindow(i);
   var _marker = 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 = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
       return iw;
   }
   //创建一个Icon
   function createIcon(json){
       var icon = new BMap.Icon("http://map.baidu.com/image/us_cursor.gif", 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)})
       return icon;
   }

   initMap();//创建和初始化地图
</script>
   当然，如果你想偷懒，将以上对应代码全放在<body></body>间也是没问题的

温馨提示：内容为网友见解，仅供参考

当前网址：https://aolonic.com/aa/k335gdw34kn4kdk5w1.html

其他看法

第1个回答 2017-08-06

第一步
打开网址：百度地图首页（怎么打开呢？小伙伴们直接百度搜索百度地图就可以咯！！！），拉到网页下方，找到“插件与工具”栏目中的“地图快速生成器”，
第二步创建地图
1、定位中心点。按照自己的实际情况定位即可。
2、设置地图。同样根据自己的实际情况设置合适的宽度和高度即可。
3、添加坐标。根据情况添加点标记、线标记、文字标记即可
第三步
直接点击“获取代码”按钮即可。
第四步
将该代码加入到网站源码合适的地方即可。
我来提供一下代码：
在<head></head>间插入下面代码：这是样式和JS脚本。

<style type="text/css">
html,body{margin:0;padding:0;}
.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>

2.在<body></body>间需要显示地图的位置放入以下代码：（该代码调用地图）

<div style="width:697px;height:550px;border:#ccc solid 1px;" 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.949652,28.693851);//定义一个中心点坐标
map.centerAndZoom(point,18);//设定地图的中心点和坐标并将地图显示在地图容器中
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);
}

//标注点数组
var markerArr = [{title:"百恒网络",content:"电话：0791-88117053<br/>手机：15079002975",point:"115.950312|28.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.length;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:"#808080",
color:"#333",
cursor:"pointer"
});

(function(){
var index = i;
var _iw = createInfoWindow(i);
var _marker = 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 = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
return iw;
}
//创建一个Icon
function createIcon(json){
var icon = new BMap.Icon("http://map.baidu.com/image/us_cursor.gif", 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)})
return icon;
}

initMap();//创建和初始化地图
</script>

当然，如果你想偷懒，将以上对应代码全放在<body></body>间也是没问题的

第2个回答 2018-06-28

你如果只是一个张写图的话，是不可以的。
死图在点也不真实。建议你可以通过百度地址里面有一个功能就是标注的功能，可以让你把你要说的地方，全标注下来。然后别人一点。就可以看到里面的介绍。这个比自己做的要好用的多。
谢谢采纳本回答被网友采纳

如何在网页中嵌入自己制作的小区域地图
第一步打开网址：百度地图首页（怎么打开呢？小伙伴们直接百度搜索百度地图就可以咯！！！），拉到网页下方，找到“插件与工具”栏目中的“地图快速生成器”，第二步创建地图1、定位中心点。按照自己的实际情况定位即可。2、设置地图。同样根据自己的实际情况设置合适的宽度和高度即可。3、添加坐标。根...

如何在网页中嵌入百度地图如何在网页中嵌入百度地图导航
第一步:去百度的地图制作网站，搜索出你想要展示的地点。第二步:设置地图。您可以设置网站上显示的地图的宽度和高度，其他选项保持不变。第三步:添加注释。点击第一个图标后，在右边找到自己的位置，点击鼠标左键定位。您可以更改标记处图标的形状、名称和备注，并填写位置相关信息。第四步:获取代码。只...

怎么把地图放到网站上怎么把地图放到网站上面
把代码复制到网站上相应的位置就可以了。控件嵌入方法:打开百度统计、验证认证(索赔)网站。找到服务功能，添加百度地图名片控件。效果图:怎么样把google地图加放到自己的网站？首先登陆GOOGLE地图网，页面跳转，根据提示点击批量上传，会跳出“服务条款”，根据提示在前面框里打钩，点击继续，进入“管理位置”...

怎样制作自己需要的区域地图
1、电脑浏览器打开网页，左侧点击地图管理图标，右侧点击新建地图。2、输入地图名称，点击右下角确定。3、左侧栏点击加号，添加图层。4、界面跳转，点击创建数据。5、输入数据名称，数据类型选择面，在数据属性中输入内容，点击添加属性，正常情况下有目标销售额、项目经理、月季度目标等等，点击右下角保存。

如何在网站中加入百度地图如何在网站中加入百度地图导航
1. 在百度搜索“百度地图创建”。2. 进入地图创建工具，如“地图生成器”。3. 设置地图的中心点和尺寸，以及所需的样式和状态。4. 在地图上添加标注和详细信息。5. 完成后，获取地图的HTML代码，并将其粘贴到你的网页中。以上步骤确保了百度地图的正确嵌入和店铺信息的准确更新。

如何在网页中嵌入自己制作的小区域矢量地图
content{font:12pxarial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}2.在间需要显示地图的位置放入以下代码：（该代码调用地图）3.以下代码放在页面最底端（其实可放在页面任意位置。）当然，如果你想偷懒，将以上对应代码全放在间也是没问题的 ...

怎么在网站上添加地图怎么在网站上添加地图导航
1.打开百度搜索“百度地图生成器”，在展开的搜索结果中找到百度地图生成官网并点击进入:2.在百度地图生成官网，输入默认的地图位置，然后点击“查找”按钮:3.找到地图后点击地图底部的“获取代码”按钮获取地图源代码:4.创建一个新的html文档，并将之前复制的代码粘贴到html文档中。这时，网页上添加了百度...

如何在网页中引入百度地图?
1.首先，到百度地图开放平台注册一下开发者，这个直接用自己的百度账号就行，接着点击“控制台”->“创建应用”，如下，这里选择“浏览器端”，输入“应用名称”：创建成功后，就会跳转到“应用列表”，刚才创建的应用就会显示出来，如下，这里我们需要记住AK这个值，后面的html页面中需要用到：2.应用...

怎么在网页中加入百度地图怎么在网页中加入百度地图导航
要在网页中加入百度地图，首先应访问百度地图官方网站。在网站上，您可以输入想要显示地图的初始位置，并通过点击“查找”按钮来定位。接着，找到所需的地图区域并点击底部“获取代码”按钮以获取地图的HTML代码。回到您的网页编辑环境，创建一个新的HTML文件，并将所获取的代码粘贴进去，这样就可以在网页上...

如何在网页中嵌入自己制作的小区域矢量地图
3.以下代码放在页面最底端（其实可放在页面任意位置。） \/\/创建和初始化地图函数：function initMap(){ createMap();\/\/创建地图 setMapEvent();\/\/设置地图事件 addMapControl();\/\/向地图添加控件 addMarker();\/\/向地图中添加marker } \/\/创建地图函数：function createMap(){ var map = new BMa...