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>
  • 相关阅读:
    [LeetCode] Contains Duplicate 包含重复值
    [LeetCode] 281. The Skyline Problem 天际线问题
    Qt resizeEvent 控件居中设置
    [LeetCode] 214. Shortest Palindrome 最短回文串
    Qt Creator Shortcuts 快捷键大全
    Qt SizePolicy 属性
    [LeetCode] 30. Substring with Concatenation of All Words 串联所有单词的子串
    [LeetCode] 213. House Robber II 打家劫舍之二
    [LeetCode] 212. Word Search II 词语搜索之二
    [LeetCode] 18. 4Sum 四数之和
  • 原文地址:https://www.cnblogs.com/fkcqwq/p/11428164.html
Copyright © 2011-2022 走看看