asp.net调用谷歌地图api,需要注意js引入的先后顺序,复制一下代码即可测试
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
<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= "设置" /> <h3> <a href= "http://maps.google.com/maps?q=China,上海&z=11" rel= "external nofollow" data-geo id= "AName" >China,上海</a></h3> </div> </div> </body> </html> |
大家可以点击复制测试一下