公交,搜索,自驾工具面板示例

此示例展示如何使用公交,搜索,自驾工具面板。

关键代码

        var container=document.createElement('div');
        container.innerHTML=contentString;
        var tpn=new sogou.maps.ToolPanel();
        tpn.setPanel(container);
        sogou.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
          tpn.setPoint(this.getPosition());
          tpn.setCallback(function(a){infowindow.setContent(a,1)})
        });
    var tlp=new sogou.maps.ToolPanel(myLatLng,document.getElementById('result'));

代码解析

创建一个工具面板。见面板添加到节点container中。

        var container=document.createElement('div');
        container.innerHTML=contentString;
        var tpn=new sogou.maps.ToolPanel();
        tpn.setPanel(container);

地图区点击时,打开信息框。设置工具面板坐标位置,设置回调,将面板内容添加到信息框中。

        sogou.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
          tpn.setPoint(this.getPosition());
          tpn.setCallback(function(a){infowindow.setContent(a,1)})
        });

在页面节点result中添加工具面板。

    var tlp=new sogou.maps.ToolPanel(myLatLng,document.getElementById('result'));

完整代码

<!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" />
<title>Service</title>
    <style type="text/css">
    #map_canvas{position:absolute;width:800px; height:600px;}
    </style>
<script type="text/javascript" src="//api.go2map.com/maps/js/api_v2.5.1.js"></script>
</head>
<body>
    <div id="map_canvas" style="float:left"></div>
<div id="result" style="font-size:12px;border:1px solid #c3c3c3;margin-left:800px;"></div>
</body>
<script>
    var myLatLng = new sogou.maps.Point(12957062,4827187);//LatLng(24.886436490787712, -70.2685546875);
    var myOptions = {
      zoom: 10,
      center: myLatLng
    };
    var map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions);
    var contentString = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">五道口</h1>'+
            '地图:'+
            '<a target="_blank" href="//map.sogou.com/#lq=%u4E94%u9053%u53E3&c=12949886.71874925,4836859.375,16">'+
            '//map.sogou.com/#lq=%u4E94%u9053%u53E3&c=12949886.71874925,4836859.375,16</a> '+
            '<div id="bodyContent">'+
            '<p>早年间,西直门外以北地区人烟稀少,以后才有人在此开垦出庄稼地,'+
            '</p>'+
            '</div>'+
            '</div>';
        var infowindow = new sogou.maps.InfoWindow({
            content: contentString
        });
        var marker = new sogou.maps.Marker({
            position: myLatLng,
            map: map,
            //设置信息窗上方标题栏的文字
            title: '五道口简介'
        });
        var container=document.createElement('div');
        container.innerHTML=contentString;
        var tpn=new sogou.maps.ToolPanel();
        tpn.setPanel(container);
        sogou.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
          tpn.setPoint(this.getPosition());
          tpn.setCallback(function(a){infowindow.setContent(a,1)})
        });
    var tlp=new sogou.maps.ToolPanel(myLatLng,document.getElementById('result'));
</script>
</html>

运行代码