直接贴上代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html, #allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5pk4mXKRRc2vZxYTH9ZqZomnBb1iOyUG"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
<title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
/*定位方法1
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
alert("浏览器不支持地理定位。");
}
function showPosition(position) {
lat = position.coords.latitude; //纬度
lag = position.coords.longitude; //经度
}
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert("定位失败,用户拒绝请求地理定位");
break;
case error.POSITION_UNAVAILABLE:
alert("定位失败,位置信息是不可用");
break;
case error.TIMEOUT:
alert("定位失败,请求获取用户位置超时");
break;
case error.UNKNOWN_ERROR:
alert("定位失败,定位系统失效");
break;
}
}*/
/*百度地图API功能*/
//创建Map实例
var map = new BMap.Map('allmap');
var poi = new BMap.Point(104.06431359999999, 30.634966600000002);
map.centerAndZoom(poi, 15);
/*定位功能*/
//添加带有定位的导航控件
var navigationControl = new BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT, //靠左上角位置
type: BMAP_NAVIGATION_CONTROL_LARGE, //LARGE类型
enableGeolocation: true // 启用显示定位
});
map.addControl(navigationControl);
//添加定位控件
var geolocationControl = new BMap.GeolocationControl();
geolocationControl.addEventListener("locationSuccess", function (e) {
//定位成功事件
var address = '';
address += e.addressComponent.province;
address += e.addressComponent.city;
address += e.addressComponent.district;
address += e.addressComponent.street;
address += e.addressComponent.streetNumber;
alert("当前定位地址为：" + address);
});
geolocationControl.addEventListener("locationError", function (e) {
//定位失败事件
alert(e.message);
});
map.addControl(geolocationControl);
/*添加自定义显示图标*/
//编辑显示图文信息
var content = '<div style="margin:0;line-height:20px;padding:2px;">'
+ ''
+ '地址：成都市武侯区玉林西路4号<br/>电话：(028)暂无<br/>简介：后方草丛位于成都市武侯区玉林西路4号院后方草丛，为德玛西亚友军提供作战计划。'
+ '</div>';
var content1 = '<div style="margin:0;line-height:20px;padding:2px;">'
+ ''
+ '地址：成都市江汉路222号<br/>电话：(028)86637378<br/>标签：区县级政府 政府机构 政府'
+ '</div>';
var content2 = '<div style="margin:0;line-height:20px;padding:2px;">'
+ ''
+ '地址：四川省成都市成华区一环路东三段148号<br/>电话：028-84313400<br/>标签：区县级政府 政府机构 政府'
+ '</div>';
var content3 = '<div style="margin:0;line-height:20px;padding:2px;">'
+ ''
+ '地址：武侯祠大街264号<br/>电话：(028)85557466<br/>标签：区县级政府 政府机构 政府'
+ '</div>';
var content4 = '<div style="margin:0;line-height:20px;padding:2px;">'
+ ''
+ '地址：沙湾路65号金牛政府大楼<br/>标签：区县级政府 政府机构 政府'
+ '</div>';
var content5 = '<div style="margin:0;line-height:20px;padding:2px;">'
+ ''
+ '地址：锦江区南三环路二段一号<br/>电话：(028)86626188<br/>标签：区县级政府 政府机构 政府'
+ '</div>';
//创建检索信息窗口对象
var searchInfoWindow = null;
var searchInfoWindow1 = null;
var searchInfoWindow2 = null;
var searchInfoWindow3 = null;
var searchInfoWindow4 = null;
var searchInfoWindow5 = null;
//编辑窗口显示信息
searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
title: "后方草丛", //标题
width: 290, //宽度
height: 105, //高度
panel: "panel", //检索结果面板
enableAutoPan: true, //自动平移
searchTypes: [
BMAPLIB_TAB_SEARCH, //周边检索
BMAPLIB_TAB_TO_HERE, //到这里去
BMAPLIB_TAB_FROM_HERE //从这里出发
]
});
searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, content1, {
title: "青羊区政府",
width: 290,
height: 105,
panel: "panel",
enableAutoPan: true,
searchTypes: [BMAPLIB_TAB_SEARCH, BMAPLIB_TAB_TO_HERE, BMAPLIB_TAB_FROM_HERE]
});
searchInfoWindow2 = new BMapLib.SearchInfoWindow(map, content2, {
title: "成华区政府",
width: 290,
height: 105,
panel: "panel",
enableAutoPan: true,
searchTypes: [BMAPLIB_TAB_SEARCH, BMAPLIB_TAB_TO_HERE, BMAPLIB_TAB_FROM_HERE]
});
searchInfoWindow3 = new BMapLib.SearchInfoWindow(map, content3, {
title: "武侯区政府",
width: 290,
height: 105,
panel: "panel",
enableAutoPan: true,
searchTypes: [BMAPLIB_TAB_SEARCH, BMAPLIB_TAB_TO_HERE, BMAPLIB_TAB_FROM_HERE]
});
searchInfoWindow4 = new BMapLib.SearchInfoWindow(map, content4, {
title: "金牛区政府",
width: 290,
height: 105,
panel: "panel",
enableAutoPan: true,
searchTypes: [BMAPLIB_TAB_SEARCH, BMAPLIB_TAB_TO_HERE, BMAPLIB_TAB_FROM_HERE]
});
searchInfoWindow5 = new BMapLib.SearchInfoWindow(map, content5, {
title: "锦江区政府",
width: 290,
height: 105,
panel: "panel",
enableAutoPan: true,
searchTypes: [BMAPLIB_TAB_SEARCH, BMAPLIB_TAB_TO_HERE, BMAPLIB_TAB_FROM_HERE]
});
//创建marker对象
var marker = new BMap.Marker(poi);
var marker1 = new BMap.Marker(new BMap.Point(104.0687300000, 30.6811580000));
var marker2 = new BMap.Marker(new BMap.Point(104.1079710000, 30.6658680000));
var marker3 = new BMap.Marker(new BMap.Point(104.0498790000, 30.6483300000));
var marker4 = new BMap.Marker(new BMap.Point(104.0587150000, 30.6975630000));
var marker5 = new BMap.Marker(new BMap.Point(104.1237810000, 30.6040000000));
//点击时调用方法
marker.addEventListener("click", function (e) {
searchInfoWindow.open(marker);
});
marker1.addEventListener("click", function (e) {
searchInfoWindow1.open(marker1);
});
marker2.addEventListener("click", function (e) {
searchInfoWindow2.open(marker2);
});
marker3.addEventListener("click", function (e) {
searchInfoWindow3.open(marker3);
});
marker4.addEventListener("click", function (e) {
searchInfoWindow4.open(marker4);
});
marker5.addEventListener("click", function (e) {
searchInfoWindow5.open(marker5);
});
//在地图中添加marker
map.addOverlay(marker);
map.addOverlay(marker1);
map.addOverlay(marker2);
map.addOverlay(marker3);
map.addOverlay(marker4);
map.addOverlay(marker5);
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("成都"); //设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
/*方法1
map.addOverlay(new BMap.Marker(new BMap.Point(104.06431459999999, 31.634966700000002)));*/
/*方法1
// 向地图添加标注
var point = new BMap.Point(104.06431359999999, 30.634966600000002);
addMarker(point);
// 编写自定义函数,创建标注
function addMarker(point) {
var marker = new BMap.Marker(point);
map.addOverlay(marker);
}*/
</script>
网友评论