<!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使用（標注，自定義控件，信息窗口，拖... ）
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。