ASP.NET中調用百度地圖API

時間 2019-11-22

標籤 asp.net asp 調用百度地圖 api 欄目 ASP 简体版

原文原文鏈接

1.打開連接http://developer.baidu.com/map/jshome.htm
這裏有不少DEMO，或者你直接百度搜索「百度地圖API」，第一個就是。進入後有不少方向供你選擇，因爲如今開源的地圖API都是JS腳本寫的，因此我上面的連接就只針對JAVASCRIPT進行介紹。
即便是編程菜鳥(像我這種),也知道當你在任何一個開發環境下寫代碼時，都須要加入頭文件，例如，你要在C++裏使用cout，cin呢就必需要加入include <io.stream>;與這種思惟相似，開發電子地圖系統也是同樣的。你想啊，百度地圖都是開發好的，人家能隨隨便便就把這東西直接給你嗎？搞笑呢麼。只可能給你一些接口讓你去開發。呢麼問題就是如何讓這些接口有意義呢？好比你如今想在地圖上定點一個位置，百度地圖裏有一個函數就是提供此功能的，setCenter(Point:String);呢麼你不管把這句話加在頁面的任何一個地方都不會起做用，由於頁面根本就不知道這是個什麼東西，這時就要加入API庫的連接：
<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
這個連接就比如給setCenter(Point:String)加了一個頭文件。其實這很簡單，而我這麼介紹是由於我幾乎就沒學過什麼HTML,CSS,JS,WEB啊，基本都是靠本身的理解去現學現用的，就拿JS來講我都沒有任何基礎，直接拿其餘語言的語法去些的，遇到什麼問題就去搜JS的函數定義啊，什麼特殊的事件等等。因此原諒我這麼羅嗦的介紹，只爲給像我同樣的小白說的更清楚。下面解釋一下這個連接：
api：該連接爲百度地圖api庫
v=1.4：庫的版本爲1.4版本，是目前最高的
之前百度API開放的時候是須要註冊KEY的，如今就不須要，因此使用起來更簡單了。另外提一點，在參考百度的DEMO時要注意這個版本，如今好比V=1.2和V=1.4在有些功能上有些誤差，並且有的函數在某些版本里可能有，在高級版本里已經廢棄了。
2.以百度提供的DEMO爲例，入門介紹
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<title>百度地圖的Hello, World</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("allmap"); // 建立Map實例
var point = new BMap.Point(116.404, 39.915); // 建立點座標
map.centerAndZoom(point,15); // 初始化地圖,設置中心點座標和地圖級別。
map.enableScrollWheelZoom(); //啓用滾輪放大縮小
</script>
---------------------------------------------------------------------------
將上面的頁面複製下來，保存爲.html文件，而後運行該靜態頁面將會顯示一張任何功能都沒有，但卻和百度地圖同樣的頁面。
若不能顯示或者是出現亂碼，則用如下辦法解決：javascript