网站做好后,给网站调用地图坐标动态显示公司位置,方便客户在地图上查找你公司位置到公司洽谈业务。设置方法如下,详细教程请看账号里的对应视频
1、获取百度地图秘钥(AK)
百度地图开放平台网址是
https://lbsyun.baidu.com/注册账号,点击“开发文档”--“Javascript API”--申请“个人开发者”,根据提示提交资料,注册账号。
在后台“应用管理”--“我的应用”--创建应用。在页面中的“应用类型”选择“浏览器端”,添加允许调用的网站域名,提交审核,获得密钥(AK)。
2、获取地址的经度和维度坐标
地图拾取坐标系统网址
http://api.map.baidu.com/lbsapi/getpoint/index.html定位到公司具体地址,会自动出现该位置的经度和维度数值,保存该数值。
3、制作地图坐标页面
这里提供优化后的地图坐标显示效果代码,如下:
网站调用地图坐标/* 设置容器样式 */#dituContent {height: 500px;width: 100%;}.mapContent {width: 240px;height: 100px;position: relative;top: -30px;}.BMap_bubble_content {overflow: visible !important;}.mapContent .title {width: 100%;font-size: 18px;color: #333;font-weight: 600;}.mapContent .main {}.mapContent .main p {margin: 0;padding: 0;}把上面的代码复制下来,在自己电脑里,新建TXT文档,把该代码粘贴进去,修改代码里的“秘钥AK”、“经度”、“维度”为你的。
然后,名字可以命名为ditumap,把该文件的后缀txt,修改为html,名字全称就是ditumap.html,TXT文档就自动转换为网页文件了。
4、调用制作好的地图坐标网页
使用FTP软件,把文件上传到网站空间合适位置,并记住该路径。
进入网站管理后台,打开需要某个需要调用地图页面的文章,使用下面的iframe标签代码,远程调用地图文件。
在代码里,设置地图文件的绝对路径,调整显示的宽度和高度。
通过上面的设置,网站就可以调用百度地图坐标系统了,你也赶紧试试吧,很好玩的^_^
如何在网页中调用百度地图api显示位置
1.设置定位中心:直接搜索你要找的位置即可腊颂。2.设置地图:设置地图样式,如大小,轮扰郑显示,功能等李迹。
3.添加标注:添加你要标注的地方,自定义坐标位置
4.获取代码:点击获取代码即可,在你要插入百度地图的地方出入百度地图代码
只要插入<!--引用百度地图API-->部分的代码就行。
如何在网页中调用百度地图api
1.进入:http://dev.baidu.com/wiki/static/map/API/tool/creatMap/ (创建地图-百度地图API所见即所得工具,百度官方地址,大家放心使用)切换城市,搜索需标注位置。(如下图:)
设置地图:大家可以对网站显示地图的宽高进行设置,其余选项不动。
添加标注:点击第一个图标后,在右侧找到自己的位置,单击鼠标左键可定位。标记图标处可更换图标形状,名称和备注填入位置相关信息。(如下图:)
步骤阅读
完成以上4步后,点获取代码。
获取代码如下:(注意:通常我们在网页中只要插入以下代码,小虫标注出来,颤者其余的可不用。)
1.在<head></head>间插入下面代码:这是样式和JS脚本。
<!--引用百度地图API-->
<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>间也是没问题的,呵呵。