zoukankan      html  css  js  c++  java
  • 解决引用百度地图点击详情无法定位到相应位置问题

    会出现这样的原因是因为获取地址内容不全被截断:

    解决方法:加以下这段JS即可。

    setInterval(function() {
    var text = $(".BMap_bubble_title p").attr("title");
    var address = "https://map.baidu.com/mobile/webapp/search/search/qt=s&da_src=shareurl&wd=" + text;
    $(".BMap_bubble_title p a").attr("href", address);
    }, 1000)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <meta name="keywords" content="百度地图,百度地图API,百度地图自定义工具,百度地图所见即所得工具" />
            <meta name="description" content="百度地图API自定义地图,帮助用户在可视化操作下生成百度地图" />
            <title>百度地图</title>
            <!--引用百度地图API-->
            <style type="text/css">
                html,
                body {
                    margin: 0;
                    padding: 0;
                }
    
                .iw_poi_title {
                    color: #CC5522;
                    font-size: 14px;
                    font-weight: bold;
                    overflow: hidden;
                    padding-right: 13px;
                    white-space: nowrap
                }
    
                .iw_poi_content {
                    font: 12px arial, sans-serif;
                    overflow: visible;
                    padding-top: 4px;
                    white-space: -moz-pre-wrap;
                    word-wrap: break-word
                }
            </style>
            <script src="http://img.huiyiguanjia.com/CDNFile/jquery/jquery-1.10.2.min.js"></script>
            <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=BE0be1199bfc948a2b2aa17eafaaa780"></script>
        </head>
    
        <body>
            <!--百度地图容器-->
            <div style="100%;height:100vh;border:#ccc solid 1px;" id="allmap"></div>
        </body>
    </html>
    <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("allmap"); // 创建Map实例
        var point = new BMap.Point(113.55364, 22.105304); // 创建点坐标  
        map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
        map.centerAndZoom("珠海长隆横琴湾酒店", 17); // 初始化地图,用城市名设置地图中心点 
        map.enableScrollWheelZoom(); //启动鼠标滚轮缩放地图
        var local = new BMap.LocalSearch(map, {
            renderOptions: {
                map: map,
                panel: "r-result"
            }
        });
        local.search("广东省珠海市香洲区环岛东路与长隆大道交汇处");
    </script>
    <script>
        $(function() {
    
            $("#dituContent").css("width", $(window).width());
            
            //解决百度地图定位不到详情地点的问题
            //<![CDATA[
            setInterval(function() {
                var text = $(".BMap_bubble_title p").attr("title");
                var address = "https://map.baidu.com/mobile/webapp/search/search/qt=s&da_src=shareurl&wd=" + text;
                $(".BMap_bubble_title p a").attr("href", address);
            }, 1000)
            //]]>
    
        })
    </script>
  • 相关阅读:
    正则表达式详解
    js前端性能优化之函数节流和函数防抖
    Vue 给axios做个靠谱的封装(报错,鉴权,跳转,拦截,提示)
    你所误解的微信公众号开发、以及微信公众号网页授权、接收url跳转参数等问题
    JavaScript 复杂判断的更优雅写法
    秒懂 this(带你撸平this)
    Vue.js 3.0 新特性预览
    完美平滑实现一个“回到顶部”
    从插入排序到希尔排序
    LWIP协议中tcp_seg结构相关指针的个人理解
  • 原文地址:https://www.cnblogs.com/fkcqwq/p/11428164.html
Copyright © 2011-2022 走看看