• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    使用asp.net调用谷歌地图api示例

    asp.net调用谷歌地图api,需要注意js引入的先后顺序,复制一下代码即可测试

    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=11size=350x350maptype=terrainsensor=falsecenter=" +
    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>

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

    您可能感兴趣的文章:
    • Google 静态地图API实现代码
    • 利用谷歌地图API获取点与点的距离的js代码
    • 百度地图api应用标注地理位置信息(js版)
    • javascript使用百度地图api和html5特性获取浏览器位置
    • js 调用百度地图api并在地图上进行打点添加标注
    • 百度地图API应用之获取用户的具体位置
    • 使用百度地图api实现根据地址查询经纬度
    • 百度地图API之本地搜索与范围搜索
    上一篇:asp.net 页面中添加普通视频的几种方式介绍
    下一篇:在Asp.net中为图像加入水印信息并保存为Jpg类型
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    使用asp.net调用谷歌地图api示例 使用,asp.net,调用,谷歌,地图,