使用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>
大家可以点击复制测试一下