教你怎么引入百度地图
来源:互联网 发布:淘宝怎么做直通车引流 编辑:程序博客网 时间:2024/05/16 15:56
原文链接:http://jingyan.baidu.com/article/0320e2c1e2a8611b87507bc3.html
<!--引用百度地图API-->
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<!--百度地图容器-->
<div style="width:99%;height:300px;border:#ccc solid 1px;margin-left:5px;" id="dituContent"></div>
<script type="text/javascript">
//创建和初始化地图函数:
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMarker();//向地图中添加marker
}
//创建地图函数:
function createMap(){
var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
var point = new BMap.Point(121.480812,31.225436);//定义一个中心点坐标
map.centerAndZoom(point,12);//设定地图的中心点和坐标并将地图显示在地图容器中
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:"上海浦东花木路1388号",point:"121.483974|31.220989",isOpen:1,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
];
//创建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://app.baidu.com/map/images/us_mk_icon.png", 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>
- 教你怎么引入百度地图
- js引入百度地图
- 百度地图引入
- 如何引入百度地图
- H5引入百度地图
- 百度地图引入
- Android---百度地图引入
- 页面引入百度地图
- 网页中引入百度地图
- html5 引入百度地图案例
- AS引入百度地图API:
- Android中引入百度地图
- vue-cli 引入百度地图
- 怎么调用百度地图
- 页面嵌入百度地图或iframe引入百度地图
- andorid如何引入百度地图服务
- iframe引入百度地图显示企业位置
- 在网页中引入百度地图
- 【数据结构】单链表—寻找两个相交链表中第一个公共结点 — 蛮力法 / 栈 / 指针先走
- 华为路由器配置OSPF实例
- [38] Count and Say
- Graphics平移缩放旋转
- centos6.5安装python2.7.9
- 教你怎么引入百度地图
- 微信互联网推广经验7+1
- 杭电acm----1201 18岁生日
- 三魂七魄,看看哪个已不在您身上?
- AlertDialog 宽度全屏
- svn is already locked解决方案
- Moving a drawn line with the mouse
- 想做自动化测试需要深入的几点建议
- mysql分表分区方案实测:MyISAM引擎分表 or mysql表分区