javascript - 关于google地图和页面的联动
大家讲道理
大家讲道理 2017-04-11 10:18:40
[JavaScript讨论组]

关于地图和页面的联动,鼠标经过左边列表后,右边的地图会相应的标出对应的地点,具体效果:http://www.haoqiao.cn/thailan...
请问这种效果是如何实现的?

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回复(1)
黄舟

使用百度地图做过类似的功能
将坐标存在元素中,鼠标hover触发调用地图api显示对应信息框

    $(document).on("mouseenter",".list dd",function(){
        var $this=$(this);
        var index=$this.index();
        if ($this.hasClass("last")) {
            return false;//跳过最后一个
        };
        if (index==parseInt($(".map_head a").attr("data"))) {
            return false;//已标注,则不再执行
        };
        var mapPoint=$this.parent().find(".map_point").eq(index).val();
        if (mapPoint===undefined || mapPoint==",") {
            return false;
        };
        var mapPointArray=mapPoint.split(",");
        var tit=$this.find(".map-tit").text();
        var addr=$this.find(".map-addr").text();
        var cont=$this.find(".map-info").text();
        var this_lng=mapPointArray[0];
        var this_lat=mapPointArray[1];
        var map = new BMap.Map('agency_map');
        var poi = new BMap.Point(this_lng,this_lat);
        map.centerAndZoom(poi, 16);
        map.enableScrollWheelZoom();
        var content = '<p style="margin:0;line-height:20px;padding:2px;">地址:'+addr+'<br/>简介:'+cont.slice(6,cont.length)+'</p>';
        //创建检索信息窗口对象
        var searchInfoWindow = null;
        searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
            title  : tit,  //标题
            width  : 290, //宽度
            height : 80,  //高度
            panel  : "panel", //检索结果面板
            enableAutoPan : true, //自动平移
            enableSendToPhone:false,
            searchTypes   :[
                BMAPLIB_TAB_TO_HERE,  //到这里去
                BMAPLIB_TAB_FROM_HERE //从这里出发
            ]
        });
        var marker = new BMap.Marker(poi); //创建marker对象
        searchInfoWindow.open(marker);
        marker.addEventListener("click", function(e){
            searchInfoWindow.open(marker);
        })
        map.addOverlay(marker); //在地图中添加marker
        // var src="http://map.baidu.com/?latlng="+this_lat+","+this_lng+"&title="+tit+"&content=地址:"+addr+"&src=doubei";
        var src=$this.find(".map-addr a").attr("href");
        //添加标注状态
        $(".map_head a").prop("href",src).attr("data",index);
    });
});

年初写的代码,不忍直视啊(つд⊂)

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号