<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="百度地圖,百度地圖API，百度地圖自定義工具，百度地圖所見即所得工具" />
<meta name="description" content="百度地圖API自定義地圖，幫助用戶在可視化操作下生成百度地圖" />
<title>百度地圖API自定義地圖</title>
<!--引用百度地圖API-->
<style type="text/css">
html,body{margin:0;padding:0;}
.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
</head>
<body>
<!--百度地圖容器-->
<div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
</body>
<script type="text/javascript">
var opts = {
width : 100, // 信息窗口寬度
height: 50, // 信息窗口高度
title : "IBM中國股份有限公司" // 信息窗口標題
}
//創(chuàng)建和初始化地圖函數(shù)：
function initMap() {
createMap(); //創(chuàng)建地圖
setMapEvent(); //設(shè)置地圖事件
addMapControl(); //向地圖添加控件
}
//創(chuàng)建地圖函數(shù)：
function createMap() {
var map = new BMap.Map("dituContent"); //在百度地圖容器中創(chuàng)建一個地圖
var point = new BMap.Point(104.114129, 37.550339); //定義一個中心點坐標
map.centerAndZoom(point, 5); //設(shè)定地圖的中心點和坐標并將地圖顯示在地圖容器中
window.map = map; //將map變量存儲在全局
//向地圖添加標注
var bounds = map.getBounds();
var point = new BMap.Point(116.326655,39.902095);
var marker = new BMap.Marker(point);
var label = new BMap.Label('IBM全球總部',{"offset":new BMap.Size(9,-15)});
marker.setLabel(label);
map.addOverlay(marker);
marker.addEventListener("click", function(){this.openInfoWindow(new BMap.InfoWindow("全球總部（北京）</br>Tel:010-10000000", opts));});
var point = new BMap.Point(103.809019, 30.850669);
var marker = new BMap.Marker(point);
var label = new BMap.Label('成都分公司',{"offset":new BMap.Size(9,-15)});
marker.setLabel(label);
map.addOverlay(marker);
marker.addEventListener("click", function(){this.openInfoWindow(new BMap.InfoWindow("成都分公司</br>Tel:暫無", opts));});
var point = new BMap.Point(114.059763,22.646821);
var marker = new BMap.Marker(point);
var label = new BMap.Label('香港分公司',{"offset":new BMap.Size(9,-15)});
marker.setLabel(label);
map.addOverlay(marker);
marker.addEventListener("click", function(){this.openInfoWindow(new BMap.InfoWindow("香港分公司</br>Tel:暫無", opts));});
var point = new BMap.Point(121.323246, 31.294085);
var marker = new BMap.Marker(point);
var label = new BMap.Label('上海分公司',{"offset":new BMap.Size(9,-15)});
marker.setLabel(label);
map.addOverlay(marker);
marker.addEventListener("click", function(){this.openInfoWindow(new BMap.InfoWindow("上海分公司</br>Tel:暫無", opts));});
}
// 編寫自定義函數(shù),創(chuàng)建標注
function addMarker(point, index) {
var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
offset: new BMap.Size(10, 25), // 指定定位位置
imageOffset: new BMap.Size(0, 0 - index * 25) // 設(shè)置圖片偏移
});
var marker = new BMap.Marker(point, { icon: myIcon });
map.addOverlay(marker);
}
//地圖事件設(shè)置函數(shù)：
function setMapEvent() {
map.enableDragging(); //啟用地圖拖拽事件，默認啟用(可不寫)
map.enableScrollWheelZoom(); //啟用地圖滾輪放大縮小
map.enableDoubleClickZoom(); //啟用鼠標雙擊放大，默認啟用(可不寫)
map.enableKeyboard(); //啟用鍵盤上下左右鍵移動地圖
}
//地圖控件添加函數(shù)：
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);
}
initMap(); //創(chuàng)建和初始化地圖
</script>
</html>