最近單位一個項目要用到百度地圖

功能非常簡單

1.填寫坐標,點擊"在地圖上搜索",顯示地圖,把地址帶到另外一個文本框上

2.填寫地址,點擊"在地圖上搜索",顯示地圖,把坐標帶到另外一個文本框上

1.加入API庫的鏈接

<script src="../../Resource/scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4">
</script>

2.在需要嵌入百度地圖的位置加上div和js

<div id="container"></div>
<script type="text/javascript">
function InitMap() {
var valCoord = $("#txtCoordinate").val();//取坐標
if (valCoord == null) {
return;
}
var pointX = valCoord.split(',')[0];
var pointY = valCoord.split(',')[1];
var map = new BMap.Map("container"); //創建地圖對象
map.centerAndZoom(new BMap.Point(pointX, pointY), 16); //初始化地圖
var myGeo = new BMap.Geocoder();// 創建地理編碼實例

if (valCoord != '請輸入坐標' && valCoord != '') //優先取坐標去查詢地圖
{
// 根據坐標得到地址描述
myGeo.getLocation(new BMap.Point(pointX, pointY), function (result) {
if (result) {
$("#txtLocation").val(result.address);
map.addOverlay(new BMap.Marker(new BMap.Point(pointX, pointY)));
return;
}
});
}

if ($("#txtLocation").val() != '' && $("#txtLocation").val() != '請輸入客戶公司地址搜索在地圖上的位置') //取地址去查詢地圖
{
// 將地址解析結果顯示在地圖上,并調整地圖視野
myGeo.getPoint($("#txtLocation").val(), function (p) {
if (p) {
map.centerAndZoom(p, 16);
map.addOverlay(new BMap.Marker(p));
var valLngLat = p.lng + "," + p.lat;
$("#txtCoordinate").val(valLngLat);
return;
}
}, "上海");
}
}
InitMap();
</script>

3.文本框

<input type="text" id="txtCoordinate" name="txtCoordinate" value="請輸入坐標" />

<textarea id="txtLocation" name="txtLocation" rows="1" cols="30">請輸入客戶公司地址搜索在地圖上的位置</textarea>

4.為文本框綁定一些事件

<style type="text/css">
#container {
height: 100%;
100%;
}
</style>
<script type="text/javascript">
$(function () {
$("#txtCoordinate").focus(function () {
if ($("#txtCoordinate").val() == "請輸入坐標") {
$("#txtCoordinate").val("");
}
});
$("#txtCoordinate").focusout(function () {
if ($("#txtCoordinate").val() == "") {
$("#txtCoordinate").val("請輸入坐標");
}
});
$("#txtLocation").focus(function () {
$("#txtCoordinate").val("");
if ($("#txtLocation").val() == "請輸入客戶公司地址搜索在地圖上的位置") {
$("#txtLocation").val("");
}
});
});
</script>

總結

以上是生活随笔為你收集整理的百度地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。