使用asp.net調(diào)用谷歌地圖api示例
更新時(shí)間：2014年08月22日 11:25:31 投稿：whsnow
這篇文章主要介紹了asp.net調(diào)用谷歌地圖api的過(guò)程，需要注意js引入的先后順序,需要的朋友可以參考下
asp.net調(diào)用谷歌地圖api，需要注意js引入的先后順序，復(fù)制一下代碼即可測(cè)試
<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>
大家可以點(diǎn)擊復(fù)制測(cè)試一下
相關(guān)文章
asp.net url重寫(xiě)后頁(yè)面回傳問(wèn)題
最近在做項(xiàng)目時(shí)遇到了URL重寫(xiě)后當(dāng)頁(yè)面回傳時(shí)，url又刷回原值；這個(gè)問(wèn)題困擾了很久，終于找到解決辦法了。2009-11-11
asp.net 簡(jiǎn)單實(shí)現(xiàn)禁用或啟用頁(yè)面中的某一類(lèi)型的控件
最近在一個(gè)winform項(xiàng)目中碰到的一個(gè)功能，勾選一個(gè)checkbox后窗體中的其他控件不可用。由此想到asp.net項(xiàng)目中有時(shí)候也要用到這種功能。2009-11-11
asp.net core實(shí)現(xiàn)在線生成多個(gè)文件將多個(gè)文件打包為zip返回的操作
遇到安卓手機(jī)解壓縮文件損壞問(wèn)題時(shí),可以考慮兩種解決方案,方案一是使用SharpCompress庫(kù),它是一個(gè)開(kāi)源項(xiàng)目,能夠提供強(qiáng)大的壓縮與解壓功能,支持多種文件格式,方案二是采用aspose.zip庫(kù),這兩種方法都能有效解決文件損壞的問(wèn)題2024-11-11
ASP.NET?Core中間件實(shí)現(xiàn)限流的代碼
這篇文章主要介紹了ASP.NET?Core中間件實(shí)現(xiàn)限流的方法，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-03-03
.NET?Core配置TLS?Cipher(套件)的詳細(xì)過(guò)程
本文以.NET?5為例，只不過(guò)針對(duì).NET?Core?3或3.1通過(guò)工具掃描出的協(xié)議套件結(jié)果略有所差異，但不影響我們對(duì)安全套件的配置，我們使用OpenSSL生成自簽名證書(shū)，對(duì).NET?Core配置TLS?Cipher相關(guān)知識(shí)感興趣的朋友一起看看吧2021-12-12
ASP.NET過(guò)濾HTML標(biāo)簽只保留換行與空格的方法
這篇文章主要介紹了ASP.NET過(guò)濾HTML標(biāo)簽只保留換行與空格的方法,包含網(wǎng)上常見(jiàn)的方法以及對(duì)此方法的改進(jìn),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
.Net基于MVC4 Web Api輸出Json格式實(shí)例
這篇文章主要介紹了.Net基于MVC4 Web Api輸出Json格式的實(shí)現(xiàn)方法,實(shí)例講述了Global中json的操作與XML的處理等技巧,需要的朋友可以參考下2014-10-10
分享Visual Studio原生開(kāi)發(fā)的10個(gè)調(diào)試技巧
我整理了一些Visual Studio 至少在VS 2008下 原生開(kāi)發(fā)的調(diào)試技巧,下面是我的整理的一些技巧,需要的朋友可以參考下2013-08-08
這篇文章主要給大家介紹了關(guān)于.NET中生成水印更好的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用.NET具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
使用DataAdapter填充多個(gè)表(利用DataRelation)的實(shí)例代碼
使用DataAdapter填充多個(gè)表(利用DataRelation)的實(shí)例代碼，需要的朋友可以參考一下2013-03-03