使用asp.net调用谷歌地图api示例
asp.net调用谷歌地图api，需要注意js引入的先后顺序，复制一下代码即可测试
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>//在这里要注意js引入的先后顺序
<linkhref="Mapjs/jquery.ui.base.css"rel="externalnofollow"rel="stylesheet"type="text/css"/>
<linkhref="Mapjs/jquery.ui.theme.css"rel="externalnofollow"rel="stylesheet"type="text/css"/>
<scriptsrc="jquery-1.9.1.js"type="text/javascript"></script>
<scriptsrc="Mapjs/jquery.ui.core.js"type="text/javascript"></script>
<scriptsrc="Mapjs/jquery.ui.widget.js"type="text/javascript"></script>
<scriptsrc="Mapjs/jquery.ui.position.js"type="text/javascript"></script>
<scriptsrc="Mapjs/jquery.ui.tooltip.js"type="text/javascript"></script>
<linkhref="Mapjs/demos.css"rel="externalnofollow"rel="stylesheet"type="text/css"/>
<styletype="text/css">
.photo
{
width:300px;
text-align:center;
}
.photo.ui-widget-header
{
margin:1em0;
}
.map
{
width:350px;
height:350px;
}
.ui-tooltip
{
max-width:350px;
}
</style>
<scripttype="text/javascript">
$(function(){
$(document).tooltip({
items:"img,[data-geo],[title]",
content:function(){
varelement=$(this);
if(element.is("[data-geo]")){
vartext=element.text();
return"<imgclass='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]")){
returnelement.attr("title");
}
if(element.is("img")){
returnelement.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>
<divclass="ui-widgetphoto">
<divclass="ui-widget-headerui-corner-all">
<inputid="Text1"type="text"value="China,上海"/><inputid="Button1"type="button"
value="设置"/>
<h3>
<ahref="http://maps.google.com/maps?q=China,上海&z=11"rel="externalnofollow"data-geoid="AName">China,上海</a></h3>
</div>
</div>
</body>
</html>
大家可以点击复制测试一下