使用asp.net調(diào)用谷歌地圖api示例
更新時間：2014年08月22日 11:25:31 投稿：whsnow
這篇文章主要介紹了asp.net調(diào)用谷歌地圖api的過程，需要注意js引入的先后順序,需要的朋友可以參考下
asp.net調(diào)用谷歌地圖api，需要注意js引入的先后順序，復(fù)制一下代碼即可測試
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>//在這里要注意js引入的先后順序
<link href="Mapjs/jquery.ui.base.css" rel="external nofollow" rel="stylesheet" type="text/css" />
<link href="Mapjs/jquery.ui.theme.css" rel="external nofollow" rel="stylesheet" type="text/css" />
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script src="Mapjs/jquery.ui.core.js" type="text/javascript"></script>
<script src="Mapjs/jquery.ui.widget.js" type="text/javascript"></script>
<script src="Mapjs/jquery.ui.position.js" type="text/javascript"></script>
<script src="Mapjs/jquery.ui.tooltip.js" type="text/javascript"></script>
<link href="Mapjs/demos.css" rel="external nofollow" rel="stylesheet" type="text/css" />
<style type="text/css">
.photo
{
width: 300px;
text-align: center;
}
.photo .ui-widget-header
{
margin: 1em 0;
}
.map
{
width: 350px;
height: 350px;
}
.ui-tooltip
{
max-width: 350px;
}
</style>
<script type="text/javascript">
$(function () {
$(document).tooltip({
items: "img, [data-geo], [title]",
content: function () {
var element = $(this);
if (element.is("[data-geo]")) {
var text = element.text();
return "<img class='map' alt='" + text +
"' src='http://maps.google.com/maps/api/staticmap?" +
"zoom=11&size=350x350&maptype=terrain&sensor=false¢er=" +
text + "'>";
}
if (element.is("[title]")) {
return element.attr("title");
}
if (element.is("img")) {
return element.attr("alt");
}
}
});
$('#Button1').click(function () {
$('#AName').text($('#Text1').val());
$('#AName').attr('href', "http://maps.google.com/maps?q="+$('#Text1').val()+"&z=11");
})
});
</script>
</head>
<body>
<div class="ui-widget photo">
<div class="ui-widget-header ui-corner-all">
<input id="Text1" type="text" value="China,上海" /><input id="Button1" type="button"
value="設(shè)置" />
<h3>
<a rel="external nofollow" data-geo id="AName">China,上海</a></h3>
</div>
</div>
</body>
</html>
大家可以點擊復(fù)制測試一下
相關(guān)文章
最近在做項目時遇到了URL重寫后當(dāng)頁面回傳時，url又刷回原值；這個問題困擾了很久，終于找到解決辦法了。2009-11-11
asp.net 簡單實現(xiàn)禁用或啟用頁面中的某一類型的控件
最近在一個winform項目中碰到的一個功能，勾選一個checkbox后窗體中的其他控件不可用。由此想到asp.net項目中有時候也要用到這種功能。2009-11-11
asp.net core實現(xiàn)在線生成多個文件將多個文件打包為zip返回的操作
遇到安卓手機解壓縮文件損壞問題時,可以考慮兩種解決方案,方案一是使用SharpCompress庫,它是一個開源項目,能夠提供強大的壓縮與解壓功能,支持多種文件格式,方案二是采用aspose.zip庫,這兩種方法都能有效解決文件損壞的問題2024-11-11
這篇文章主要介紹了ASP.NET?Core中間件實現(xiàn)限流的方法，本文通過示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-03-03
.NET?Core配置TLS?Cipher(套件)的詳細過程
本文以.NET?5為例，只不過針對.NET?Core?3或3.1通過工具掃描出的協(xié)議套件結(jié)果略有所差異，但不影響我們對安全套件的配置，我們使用OpenSSL生成自簽名證書，對.NET?Core配置TLS?Cipher相關(guān)知識感興趣的朋友一起看看吧2021-12-12
ASP.NET過濾HTML標(biāo)簽只保留換行與空格的方法
這篇文章主要介紹了ASP.NET過濾HTML標(biāo)簽只保留換行與空格的方法,包含網(wǎng)上常見的方法以及對此方法的改進,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了.Net基于MVC4 Web Api輸出Json格式的實現(xiàn)方法,實例講述了Global中json的操作與XML的處理等技巧,需要的朋友可以參考下2014-10-10
分享Visual Studio原生開發(fā)的10個調(diào)試技巧
我整理了一些Visual Studio 至少在VS 2008下 原生開發(fā)的調(diào)試技巧,下面是我的整理的一些技巧,需要的朋友可以參考下2013-08-08
這篇文章主要給大家介紹了關(guān)于.NET中生成水印更好的方法，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用.NET具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
使用DataAdapter填充多個表(利用DataRelation)的實例代碼
使用DataAdapter填充多個表(利用DataRelation)的實例代碼，需要的朋友可以參考一下2013-03-03