【h5网站地图】h5开发网站,封装使用地图
1.html页面中添加以下代码:
<div class="mymap" id="mymap"></div>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<script src="mymap.js"></script>
<script>
//调用封装方法
mapBaidu({
'mapId': 'mymap',//百度地图容器id
'sContent': "<div class='menudiv'> 公司名称 <div> 公司地址 </div> </div>",//地图文字
'markerArr': [{ //标注点数组
title: "公司名称",
content: "我的备注",
point: "117.062705|36.67401",//坐标
isOpen: 1,
icon: {
w: 21,
h: 21,
l: 0,
t: 0,
x: 6,
lb: 5
}
}],
'addIcon':'lxwm_ico.png',//位置icon
'coordinate':[117.062705, 36.67401]//坐标 [经度,纬度]
});
</script>
2.封装好的地图mymap.js
。直接新建js,复制使用即可。
var mapId, //百度地图容器id
markerArr, //标注点数组
sContent, //地图文字
addIcon,//位置icon
coordinate; //坐标
//创建和初始化地图函数:
function initMap() {
createMap(); //创建地图
setMapEvent(); //设置地图事件
addMapControl(); //向地图添加控件
addMarker(); //向地图中添加marker
}
//创建地图函数:
function createMap() {
var map = new BMap.Map(mapId); //在百度地图容器中创建一个地图
var point = new BMap.Point(coordinate[0],coordinate[1]); //定义一个中心点坐标
map.centerAndZoom(point, 17); //设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map; //将map变量存储在全局
}
//地图事件设置函数:
function setMapEvent() {
map.enableDragging(); //启用地图拖拽事件,默认启用(可不写)
map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
map.enableDoubleClickZoom(); //启用鼠标双击放大,默认启用(可不写)
map.enableKeyboard(); //启用键盘上下左右键移动地图
}
//地图控件添加函数:
function addMapControl() {}
//创建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(sContent);
return iw;
}
//创建一个Icon
function createIcon(json) {
var icon = new BMap.Icon(addIcon, 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;
}
function mapBaidu(param) {
mapId = param.mapId; //百度地图容器id
markerArr = param.markerArr; //标注点数组
sContent = param.sContent; //地图文字
addIcon = param.addIcon; //位置icon
coordinate = param.coordinate; //坐标
initMap(); //创建和初始化地图
}
完成~
上一篇: 完整的电商平台后端A
下一篇: SSM在线学习网站的