百度地图API的使用
通常情况下。给企业建站。都会在导航【联系我们】那一栏声明公司的联系方式、图片标识具体位置及动态api地图导向。
在百度开发者页面有各种应用针对各种移动端和桌面程序的地图应用：http://developer.baidu.com/map/
百度坐标拾取系统：http://api.map.baidu.com/lbsapi/getpoint/index.html
通过点击你要标识的位置获得相对于的坐标在右上角的文本框直接复制使用即可。
第一步：引入百度地图API：
<script type="text/javascript" src="http://api.map.baidu.com/api?key=59db371659c04947a1ff044e80565718&v=1.1&services=true"></script>
第二步：调整页面要显示的位置：
<!-- 地图容器 -->
<div style="width: 500px; height: 400px; border: #ccc solid 1px; margin: 5px 5px 5px 5px;" id="dituContent"></div>
<div style="display: block; width: 100%; text-align: left; font-size: 12px; height: 40px;
line-height: 40px; text-indent: 5px;">
<div style="display: none;">
起点：<span style="color: #fb9c06; font-weight: bold;">广州火车站</span> 终点：<input
id="text2" type="text" class="map_text" value="越秀公园" />
<input id="btn" type="button" value="查询" /></div>
</div>
第三步：调用Javascript代码进行显示定位：
<script type="text/javascript">
//创建和初始化地图函数：
function initMap() {
createMap(); //创建地图
setMapEvent(); //设置地图事件
addMapControl(); //向地图添加控件
addRemark(); //向地图中添加文字标注
}
//创建地图函数：
function createMap() {
var map = new BMap.Map("dituContent"); //在百度地图容器中创建一个地图
var point = new BMap.Point(NumberA, NumberB); //定义一个中心点坐标
map.centerAndZoom(point, 12); //设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map; //将map变量存储在全局
addMarker(point, 1);
var transit = new BMap.WalkingRoute(map, {
renderOptions: { map: map }
});
window.transit = transit;
}
//地图事件设置函数：
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: 1 });
map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
map.addControl(ctrl_sca);
}
//文字标注数组
var lbPoints = [{ point: "NumberA|NumberB", content: "广州火车站"}];
//向地图中添加文字标注函数
function addRemark() {
for (var i = 0; i < lbPoints.length; i++) {
var json = lbPoints[i];
var p1 = json.point.split("|")[0];
var p2 = json.point.split("|")[1];
var label = new BMap.Label("<div style='padding:2px;'>" + json.content + "</div>", { point: new BMap.Point(p1, p2), offset: new BMap.Size(3, -6) });
map.addOverlay(label);
label.setStyle({ borderColor: "#999" });
}
}
// 编写自定义函数，创建标注
function addMarker(point, index) {
// 创建图标对象
var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
// 指定定位位置。
// 当标注显示在地图上时，其所指向的地理位置距离图标左上
// 角各偏移10像素和25像素。您可以看到在本例中该位置即是
// 图标中央下端的尖角位置。
offset: new BMap.Size(10, 25),
// 设置图片偏移。
// 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
// 需要指定大图的偏移位置，此做法与css sprites技术类似。
imageOffset: new BMap.Size(0, 0 - index * 25) // 设置图片偏移
});
// 创建标注对象并添加到地图
var marker = new BMap.Marker(point, { icon: myIcon });
map.addOverlay(marker);
//移除标注
marker.addEventListener("click", function () {
var opts = {
width: 250, // 信息窗口宽度
height: 150, // 信息窗口高度
title: "广州火车站" // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("<p style='padding-top:10px;'>电话：********</p><p style='padding-top:10px;'>地址：广州市火车站详细</p>", opts); // 创建信息窗口对象
marker.openInfoWindow(infoWindow, this.point); // 打开信息窗口
});
}
initMap(); //创建和初始化地图
$(document).ready(function () {
$("#btn").click(function () {
if ($.trim($("#text2").val()).length < 1) {
alert("请填写要查询的终点"); $("#text2").focus();
} else {
var Geoc = new BMap.Geocoder()
Geoc.getPoint($("#text2").val(), function (point) {
transit.enableAutoViewport();
transit.search({ point: new BMap.Point(NumberA, NumberB) }, { point: point });
}, "广州市");
}
});
});
</script>
