<!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=utf-8" />
<title>标注点</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style-type: none;
}
a, img {
border: 0;
}
body {
font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
}
.demo {
width: 850px;
margin: 20px auto;
}
#l-map {
height: 400px;
width: 600px;
float: left;
border: 1px solid #bcbcbc;
}
#r-result {
height: 400px;
width: 230px;
float: right;
}
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;
}
.btnbz {
text-align: center;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function msg(print) {
var objprint = print;
var objcity = document.getElementById("txtcity");
if (confirm("是否确定将当前坐标点位置标注为：" + objcity.value + "？")) {
alert("ok");
}
}
</script>
</head>
<body>
<div class="demo">
<p style="height: 40px;">
输入城市：<input id="txtCity" type="text" />
<button>获取坐标</button>
坐标：<input id="txtPoint" type="text" />
</p>
<div id="l-map"></div>
<div id="r-result"></div>
</div>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("l-map"); // 创建Map实例
map.centerAndZoom(new BMap.Point(114.465567, 22.607958), 17);
addMapControl();
setMapEvent();
var icon = new BMap.Icon(‘pin.png‘, new BMap.Size(20, 32), {});
var mkr;
function ZoomControl() {
// 默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
this.defaultOffset = new BMap.Size(10, 10);
}
// 通过JavaScript的prototype属性继承于BMap.Control
ZoomControl.prototype = new BMap.Control();
// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
ZoomControl.prototype.initialize = function (map) {
// 创建一个DOM元素
var div = document.createElement("div");
// 添加文字说明
div.appendChild(document.createTextNode("标注"));
// 设置样式
div.style.cursor = "pointer";
div.style.border = "1px solid gray";
div.style.backgroundColor = "white";
div.style.color = "red";
// 绑定事件
div.onclick = function show(e) {
if (mkr == null) {
mkr = new BMap.Marker(map.getCenter(), {
icon: icon,
enableDragging: true,//开启拖动效果
raiseOnDrag: true//开启拖动效果
});
map.addOverlay(mkr);
}
else {
map.removeOverlay(mkr);
mkr = new BMap.Marker(map.getCenter(), {
icon: icon,
enableDragging: true,//开启拖动效果
raiseOnDrag: true//开启拖动效果
});
map.addOverlay(mkr);
}
//监听拖动位置并显示到文本框
mkr.addEventListener(‘dragend‘, function show1(e) {//监听拖动位置
//alert(e.point.lng + ‘, ‘ + e.point.lat);
document.getElementById("txtPoint").value = e.point.lng + "," + e.point.lat;//在地图上单击之后把经纬度显示到文本
var varprint = e.point.lng + ‘, ‘ + e.point.lat;
var infoWindow = new BMap.InfoWindow("<b class=‘iw_poi_title‘ title=‘当前位置坐标‘>当前位置坐标</b><div class=‘iw_poi_content‘>坐标地址：" + e.point.lng + ‘, ‘ + e.point.lat + "<br/>输入名称：<input type=‘text‘ id=‘txtcity‘/><div class=‘btnbz‘><input type=‘button‘ value=‘创建标注点‘ onclick=‘msg();‘/></div></div>");
map.openInfoWindow(infoWindow, e.point); //开启信息窗口
})
}
// 添加DOM元素到地图中
map.getContainer().appendChild(div);
// 将DOM元素返回
return div;
}
// 创建控件
var myZoomCtrl = new ZoomControl();
// 添加到地图当中
map.addControl(myZoomCtrl);
var local = new BMap.LocalSearch("全国", {
renderOptions: {
map: map,
panel: "r-result",
autoViewport: true,
selectFirstResult: false
}
});
//地图事件设置函数：
function setMapEvent() {
map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
}
//地图控件添加函数：
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: 0 });
map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
map.addControl(ctrl_sca);
}
//点击按钮“获取坐标”，产生的事件
function getPoint() {
var city = document.getElementById("txtCity").value;
local.search(city); // 初始化地图,设置城市和地图级别。
//启用滚轮放大缩小
}
</script>
</body>
</html>
谈谈百度地图API使用（标注，自定义控件，信息窗口，拖... ）