直接貼上代碼
<!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" />
<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; //經(jīng)度
}
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("定位失敗,定位系統(tǒng)失效");
break;
}
}*/
/*百度地圖API功能*/
//創(chuàng)建Map實例
var map = new BMap.Map('allmap');
var poi = new BMap.Point(104.06431359999999, 30.634966600000002);
map.centerAndZoom(poi, 15);
/*定位功能*/
//添加帶有定位的導(dǎo)航控件
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("當(dāng)前定位地址為：" + address);
});
geolocationControl.addEventListener("locationError", function (e) {
//定位失敗事件
alert(e.message);
});
map.addControl(geolocationControl);
/*添加自定義顯示圖標(biāo)*/
//編輯顯示圖文信息
var content = '<div style="margin:0;line-height:20px;padding:2px;">'
+ ''
+ '地址：成都市武侯區(qū)玉林西路4號<br/>電話：(028)暫無<br/>簡介：后方草叢位于成都市武侯區(qū)玉林西路4號院后方草叢，為德瑪西亞友軍提供作戰(zhàn)計劃锐秦。'
+ '</div>';
var content1 = '<div style="margin:0;line-height:20px;padding:2px;">'
+ ''
+ '地址：成都市江漢路222號<br/>電話：(028)86637378<br/>標(biāo)簽：區(qū)縣級政府 政府機構(gòu) 政府'
+ '</div>';
var content2 = '<div style="margin:0;line-height:20px;padding:2px;">'
+ ''
+ '地址：四川省成都市成華區(qū)一環(huán)路東三段148號<br/>電話：028-84313400<br/>標(biāo)簽：區(qū)縣級政府 政府機構(gòu) 政府'
+ '</div>';
var content3 = '<div style="margin:0;line-height:20px;padding:2px;">'
+ ''
+ '地址：武侯祠大街264號<br/>電話：(028)85557466<br/>標(biāo)簽：區(qū)縣級政府 政府機構(gòu) 政府'
+ '</div>';
var content4 = '<div style="margin:0;line-height:20px;padding:2px;">'
+ ''
+ '地址：沙灣路65號金牛政府大樓<br/>標(biāo)簽：區(qū)縣級政府 政府機構(gòu) 政府'
+ '</div>';
var content5 = '<div style="margin:0;line-height:20px;padding:2px;">'
+ ''
+ '地址：錦江區(qū)南三環(huán)路二段一號<br/>電話：(028)86626188<br/>標(biāo)簽：區(qū)縣級政府 政府機構(gòu) 政府'
+ '</div>';
//創(chuàng)建檢索信息窗口對象
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: "后方草叢", //標(biāo)題
width: 290, //寬度
height: 105, //高度
panel: "panel", //檢索結(jié)果面板
enableAutoPan: true, //自動平移
searchTypes: [
BMAPLIB_TAB_SEARCH, //周邊檢索
BMAPLIB_TAB_TO_HERE, //到這里去
BMAPLIB_TAB_FROM_HERE //從這里出發(fā)
]
});
searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, content1, {
title: "青羊區(qū)政府",
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: "成華區(qū)政府",
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: "武侯區(qū)政府",
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: "金牛區(qū)政府",
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: "錦江區(qū)政府",
width: 290,
height: 105,
panel: "panel",
enableAutoPan: true,
searchTypes: [BMAPLIB_TAB_SEARCH, BMAPLIB_TAB_TO_HERE, BMAPLIB_TAB_FROM_HERE]
});
//創(chuàng)建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));
//點擊時調(diào)用方法
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("成都"); //設(shè)置地圖顯示的城市 此項是必須設(shè)置的
map.enableScrollWheelZoom(true); //開啟鼠標(biāo)滾輪縮放
/*方法1
map.addOverlay(new BMap.Marker(new BMap.Point(104.06431459999999, 31.634966700000002)));*/
/*方法1
// 向地圖添加標(biāo)注
var point = new BMap.Point(104.06431359999999, 30.634966600000002);
addMarker(point);
// 編寫自定義函數(shù),創(chuàng)建標(biāo)注
function addMarker(point) {
var marker = new BMap.Marker(point);
map.addOverlay(marker);
}*/
</script>
