使用asp.net调用谷歌地图api 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>//在这里要注意js引入的先后顺序
    <link href="Mapjs/jquery.ui.base.css" rel="stylesheet" type="text/css" />
    <link href="Mapjs/jquery.ui.theme.css" 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="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&center=" +
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()+"&amp;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,上海&amp;z=11" data-geo id="AName">China,上海</a></h3>
        </div>
    </div>
</body>
</html>

大家可以点击复制测试一下

posted @ 2014-08-20 13:54  super1234  阅读(584)  评论(2)  编辑  收藏  举报