Question

我正在尝试使用Google开发者的Store Locator插件： http://storelocator.googlecode.com/git/index.html?utm_campaign=sl&utm_source=youtube

我想将搜索定位器重新定位到页面的上方 - 就像它在谷歌地图上一样，这就是我最终的结果：我创建了两个面板和侧面 2.并为它们分配相同的视图。 3.使用css隐藏面板上的商店列表。 4.将搜索定位器隐藏在侧面板上 5.然后在上面板上的搜索定位器上搜索时，我不会在侧面板上获得更新的商店列表和功能。

请帮助我解决我所缺少的问题。

以下是我尝试使用的js代码：

google.maps.event.addDomListener（window，'load'，function（）{var map = new google.maps.Map（document.getElementById（'map-canvas'），{ center：new google.maps.LatLng（-28,135）， zoom：5，
mapTypeId: google.maps.MapTypeId.ROADMAP   });
// var panelDiv = document.getElementById（'panel'）; var panelDiv =   $（ '面板'）; var searchPanel = $（'＃searchPanel'）;

var data = new MedicareDataSource;

var view = new storeLocator.View（map，data，{       地理位置：错误，       功能：data.getFeatures（）}）;

/ * var search_panel = new storeLocator.Panel（searchPanel，{       查看：查看，       方向：假}）;   * /

var side_panel = new storeLocator.Panel（panelDiv，{       查看：查看，       locationSearch：true}）;

/ * $（search_panel）.live（'view_changed'，function（）{       警报（ '工作'）;

}）; * /

}）;

Answer 1

问题是风格

<style type="text/css">
  body { font-family: sans-serif; }
  #map-canvas, #panel { height: 500px; }  //HERE
  #panel { width: 300px; float: left; margin-right: 10px; }//HERE
  #panel .feature-filter label { width: 130px; } //HERE
  p.attribution, p.attribution a { color: #666; }
</style>

如果您需要，您需要更改此设置以满足您的要求Tutorial

Answer 2

在storelocator.css上。这就是我现在用来移动页面顶部的搜索框：

.storelocator-panel .location-search {

    top:45px;
    padding: 5px;
    position: absolute;
    width: 400px;
    margin-left:-210px;
    left:50%;

}

如何从google开发人员自定义Store Locator插件的侧面板

2 个答案: