资讯中心
News
百度JS地图用法实例详解
发布时间:2022-09-27 00:00   您所在的位置: 网站首页 > 新闻资讯 > 经验杂谈
//创建和初始化地图函数:

function initMap(){

createMap();//创建地图

setMapEvent();//设置地图事件

addMapControl();//向地图增加控件

addMarker();//向地图中增加marker

}

//创建地图函数:

function createMap(){

var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图

var point = new BMap.Point(1低8.983低58,34.299595);//定义一个中心点坐标

//经纬度,

map.centerAndZoom(point,13);//设定地图的中心点和坐标并将地图显示在地图容器中13为地图的放大级别,越大显示的越详细,

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);

}

较后,在html增加下边的代码。

//创建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();/

本文章由新概念互动原创,如没特殊注明,转载请注明来自:http://www.jianzhan0.com/jingyand/75228.html