方法/步驟
1、打開“百度地圖生成器”的網址：http://api.map.baidu.com/lbsapi/creatmap/index.html
如下圖：
2、在“1.定位中心點”中，切換城市，並查找具體位置，如下圖：
3、在“2.設置地圖”中，可以按照自己的喜好修改地圖的外觀：
a、地圖的寬和高
b、地圖上顯示的按鈕（縮放、縮略圖、比例尺）
c、鼠標和鍵盤對地圖的操作
如下圖：
4、在“3.添加標注”中，可以添加自己想要標注的位置和信息，如下圖：
5、在“第二步 獲取代碼”中，點擊“獲取代碼”按鈕，就會彈出根據上面的設置生成代碼，如下圖：
6、把上一步生成的代碼保存為html文件（我這里保存為map.html），在瀏覽器中打開就可以看到自己定義的百度地圖了。
如果要把地圖添加到現有的網頁中，可以使用iframe標簽，如：
<iframe src="map.html" width="600" height="300" frameborder="0" scrolling="no"></iframe>
--------------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<!-- ajax地圖搜索開始(如果只要簡單的地圖,這些可以去掉) -->
<!-- Note:
Make sure to replace the &key=internal with &key=~the value of your key~
in both the maps API script load and in the Ajax Search API script load statements
-->
<!-- maps api, ajax search api, map search control code -->
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjcl2I3BtNtV-ju6Y6yA02xT4bHmHWp4dhAzpccxEqzxte7tzxhTZ2Uww0ZCaO2QqcKaV3amGYXXpfw"
type="text/javascript" charset='utf-8'></script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAjcl2I3BtNtV-ju6Y6yA02xT4bHmHWp4dhAzpccxEqzxte7tzxhTZ2Uww0ZCaO2QqcKaV3amGYXXpfw"
type="text/javascript" charset='utf-8'></script>
<script src="http://www.google.com/uds/solutions/mapsearch/gsmapsearch.js"
type="text/javascript" charset='utf-8'></script>
<!-- ajax search stylesheet, map search stylesheet -->
<link href="http://www.google.com/uds/css/gsearch.css" rel="stylesheet"
type="text/css"/>
<link href="http://www.google.com/uds/solutions/mapsearch/gsmapsearch.css"
rel="stylesheet" type="text/css"/>
<style type="text/css">
body, table, p{
font-family: Arial, sans-serif;
font-size: 13px;
}
#mapsearch {
width : 400px;
margin-left: 10px;
padding: 4px;
border : 1px solid #f9f9f9;
}
</style>
<!-- ajax地圖搜索結束 -->
<!--以下代碼是必須的。
這一段代碼中可以修改key的參數,key的產生可以到以下地址：
http://code.google.com/apis/maps/signup.html
拖到頁面底部,輸入地址后點獲取API就可以。
注：如果你輸入的地址已經被注冊過key，將無法得到key並且沒有提示，只是跳到登錄頁。再試也沒有用。
-->
<script
src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjcl2I3BtNtV-ju6Y6yA02xT4bHmHWp4dhAzpccxEqzxte7tzxhTZ2Uww0ZCaO2QqcKaV3amGYXXpfw"
type="text/javascript" charset='utf-8'></script>
<script language="javascript" type="text/javascript" charset='utf-8'>
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
//以上GSmallMapControl添加左上角放大縮小的控件
//GMapTypeControl添加右上角[地圖][衛星][混合地圖控件]
//注：在以上兩句代碼前面或之間不可以寫注釋，否則看不到控件哦。嘿嘿，注釋寫這里喇。
//如果只要簡單地圖，以上兩句可以不要
//參數(經偉度)：23.17336637556459, 113.24979543685913
//獲得方法：打開http://ditu.google.cn/，輸入你要設成地圖中心點的地址。
//在IE地址欄中輸入以下代碼按回車：javascript:void(prompt('',gApplication.getMap().getCenter()));
//此時將會彈出一個對話框，里面的內容就是你要的經偉度。
//參數(地圖放大倍數):15
//設得太高可能看不到地圖。
map.setCenter(new GLatLng(23.173987756729552, 113.24978470802307), 15);
}
//如果只是想要一張最簡單的地圖，以下代碼可以不加
//隨機產生10個地理標識。如不需要可以不加
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(createMarker(point, i + 1));
}
//使用自定義圖標創建標注
var baseIcon = new GIcon();
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.image="http://labs.google.com/ridefinder/images/mm_20_yellow.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
//創建中心點標注
var center = new GMarker(map.getCenter(),baseIcon);
GEvent.addListener(center, "click", function() {
center.openInfoWindowHtml("廣州市白雲區三元里大道959號");
});
//添加標注到地圖上。
map.addOverlay(center);
//標識地圖中心
//map.openInfoWindow(map.getCenter(),
// document.createTextNode("we are here"));
//創建一個目標地點的標識。
//通常我們做google地圖是為了將企業地址標識到地圖上,方便別人找到。比如說(富華酒店)。
//以下代碼就是在打開地圖的時候，在地圖中心點顯示一個雲一樣的框框，指示說這里就是目標地點。
/*
var marker = new GMarker(map.getCenter());
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml(infoTabs);
});
map.addOverlay(marker);
marker.openInfoWindowTabsHtml(infoTabs);
*/
//以下是添加一個地理標識(可以讓使用者拖動的,不一定實用)
/*
var center = new GLatLng(23.173987756729552, 113.24978470802307);
var mk1 = new GMarker(center, {draggable: true});
GEvent.addListener(mk1, "dragstart", function() {
map.closeInfoWindow();
});
GEvent.addListener(mk1, "dragend", function() {
mk1.openInfoWindowHtml("Just bouncing along...");
});
map.addOverlay(mk1);
*/
//編碼折線。我不是繪測專家，所以這里的含義不太懂，想要了解更多請訪問以下網址：
//http://www.codechina.org/doc/google/gmapapi/#Display_Info_Windows_Above_Markers
/*
var polyline = new GPolyline([
new GLatLng(23.1733, 113.2497),
new GLatLng(37.1833, 113.2697),
new GLatLng( 37.2733, 113.2897)
], "#FF0000", 10);
map.addOverlay(polyline);
*/
//如果想要添加動畫效果,請看這里吧。
/*
window.setTimeout(function() {
map.panTo(new GLatLng(23.173987756729552, 113.24978470802307));
}, 1000);
*/
}
//在參數中可以設定顯示的文字
/*
這里如果要以Tab頁簽形式顯示地圖,可以加上。
var infoTabs = [
new GInfoWindowTab("center", "We are here!"),
new GInfoWindowTab("Tab #2", "This is tab #2 content")
];
*/
//參數一是頁簽名字,參數二是顯示的頁簽內容,內容可以是中文，但是如果你用EditPlus編輯代碼，文件必須以UTF-8的格式保存，而不僅僅是在面頁上設置chartset="utf-8"。
var infoTabs = [
new GInfoWindowTab("center", "We are here!")
];
//創建地理標識的方法。
function createMarker(point, number) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Marker #<b>" + number + "</b>");
});
return marker;
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
<div id="mapsearch">Loading...</div>
</body>
</html>