【问题标题】:Google Earth Integration with Google Maps and Places APIsGoogle 地球与 Google 地图和地点 API 的集成
【发布时间】:2012-11-15 18:42:10
【问题描述】:

我将新的 Google 地球集成代码 http://code.google.com/p/smap-suite/source/browse/fieldAnalysis2/trunk/WebContent/js/libs/google_earth_integration.js?r=1442 和 Google Places Api 与 Maps V3 结合使用。将当前结果输出到表格后,用户可以单击表格,相应的标记和信息窗口将打开。目前这在 Maps V3 中运行良好,但无法让信息窗口的锚点定位在正确的位置。

function addResult(result, i) {
var results = document.getElementById("results");
var tr = document.createElement('tr');
tr.style.backgroundColor = (i% 2 == 0 ? '#F0F0F0' : '#FFFFFF');
tr.onclick = function() {
  google.maps.event.trigger(markers[i], 'click'); //end add marker listener

        }  

google.maps.event.addListener(this.map_,
                            GoogleEarth.INFO_WINDOW_OPENED_EVENT_,
                            function(infowindow) {
//If Earth is open, create balloon
if (!that.earthVisible_) {
  return;
}
    var balloon = that.instance_.createHtmlStringBalloon('');
    //TODO assuming anchor == marker == lastclicked

    var placemark = that.lastClickedPlacemark_;
    balloon.setFeature(placemark);
    balloon.setContentString(infowindow.getContent());
    that.instance_.setBalloon(balloon);
 });

 // On click of a placemark we want to trigger the map click event.
google.earth.addEventListener(ge.getGlobe(), 'click', function(event) {
var target = event.getTarget();
var overlay = that.placemarks_[target.getId()];
if (overlay) {
  event.preventDefault();
  // Close any currently opened map info windows.
  var infoWindows = that.getOverlaysForType_('InfoWindow');
  for (var i = 0, infoWindow; infoWindow = infoWindows[i]; i++) {
    infoWindow.close();
  }
  that.lastClickedPlacemark_ = target;
  google.maps.event.trigger(overlay, 'click');
}
});

我需要创建一个函数来定位在表格中点击的结果的纬度和经度,并为谷歌地球设置窗口的锚点,同时还可以处理在地图上点击的地标和在搜索栏中输入的地址。

在此处查看示例:http://go3dexpansion.com/attempt101.html

编辑

好的,我正在尝试这样做,以便当您单击结果表时,它会打开正确的气球并将其连接到正确的地标。你在帮助我更多地了解我真正在做什么方面提供了巨大的帮助。请看一下这段代码,让我知道我能做什么。 jsfiddle 上还有另一部分代码控制气球出现的时间和位置,并且基于 lastClickPlacemark_ 变量。

///My Attempt at the code
var getPosition = function(marker) {
var lat = marker.position.$a;
var lng = marker.position.ab;
var myLatlng = new google.maps.LatLng(lat, lng);


    TODO assuming anchor == marker == lastclicked
var marker = new google.maps.Marker({
  position: myLatlng,
  map: map
});
var balloon = googleEarth.instance_.createHtmlStringBalloon('');
    var placemark = marker;
    balloon.setFeature(placemark);
    balloon.setContentString(infowindow.getContent());
    googleEarth.instance_.setBalloon(balloon);

   // alert(lat + ',' + lng); // do something with it...
 }



 // The code that currently controls the window open and is based on the lastClickPlacemark_ variable


 GoogleEarth.prototype.addEarthEvents_ = function() {
 var ge = this.instance_;
 ge.getWindow().setVisibility(true);

 // add a navigation control
 var navControl = ge.getNavigationControl();
 navControl.setVisibility(ge.VISIBILITY_AUTO);

 var screen = navControl.getScreenXY(); 
 screen.setYUnits(ge.UNITS_INSET_PIXELS);
 screen.setXUnits(ge.UNITS_PIXELS);

 // add some layers
 var layerRoot = ge.getLayerRoot();
 layerRoot.enableLayerById(ge.LAYER_BORDERS, true);
 layerRoot.enableLayerById(ge.LAYER_ROADS, true);

 var that = this;
 google.maps.event.addListener(this.map_,
                            GoogleEarth.INFO_WINDOW_OPENED_EVENT_,
                            function(infowindow) {
//If Earth is open, create balloon
if (!that.earthVisible_) {
  return;
}
    var balloon = that.instance_.createHtmlStringBalloon('');
    //TODO assuming anchor == marker == lastclicked

    var placemark = that.lastClickedPlacemark_;
    balloon.setFeature(placemark);
    balloon.setContentString(infowindow.getContent());
    that.instance_.setBalloon(balloon);
});

// On click of a placemark we want to trigger the map click event.
google.earth.addEventListener(ge.getGlobe(), 'click', function(event) {
var target = event.getTarget();
var overlay = that.placemarks_[target.getId()];
if (overlay) {
  event.preventDefault();
  // Close any currently opened map info windows.
  var infoWindows = that.getOverlaysForType_('InfoWindow');
  for (var i = 0, infoWindow; infoWindow = infoWindows[i]; i++) {
    infoWindow.close();
  }
  that.lastClickedPlacemark_ = target;
  google.maps.event.trigger(overlay, 'click');
}
 });

};








//SOMETHING LIKE THIS?????


var getPosition = function(marker) {
            ge = googleEarth.instance_; 

var lat = marker.position.$a;
var lng = marker.position.ab;
 // var myLatlng = new google.maps.LatLng(lat, lng);
 var placemark = ge.getElementById(marker);   
    var balloon = ge.createHtmlStringBalloon(''); 
      balloon.setFeature(placemark); 
      ge.setBalloon(balloon); 


   // alert(lat + ',' + lng); // do something with it...
}

【问题讨论】:

  • 设置一个 jsfiddle 或 jsbin 以便我们可以编辑您的代码
  • 在这里设置一个jsfiddle! jsfiddle.net/ASQ5j感谢您有兴趣提供帮助!这是我遇到的问题之一,因为业余编码人员正在创建新功能,却不知道我在做什么,哈哈。使用这些 API 的任何其他帮助建议或技巧都会很棒!
  • 这个<script type="text/javascript" src="googleearth.js"> 不能在 jsfiddle 上工作 :)
  • 是的,我知道我直接从我正在处理的文档中粘贴了代码。该 js 文件位于 jsfiddle 的 js 部分中,可以忽略查找本地脚本的那行代码。谢谢。
  • 我不确定你在问什么,或者你所说的“为谷歌地球设置窗口的锚点”是什么意思 - 你能澄清一下吗?

标签: google-maps-api-3 google-places-api google-earth-plugin google-places


【解决方案1】:

一个函数……

“将在表格中定位点击结果的经纬度”

可能是这样的......

var getPosition = function(marker) {
    var lat = marker.position.$a;
    var lng = marker.position.ab;
    alert(lat + ',' + lng); // do something with it...
}

您可以在这里调用它,以便获得与表中项目对应的特征的位置...

tr.onclick = function() {
  google.maps.event.trigger(markers[i], 'click'); //end add marker listener
  getPosition(markers[i]); // get the position
}  

第二部分不太清楚……

同时也为点击地图上的地标工作...

如果我理解你的意思,那么你可以修改你的标记事件监听器,以便在地图上单击标记时调用相同的函数。

google.maps.event.addListener(markers[i], 'click', function() {
  getDetails(results[i], i);
  getPosition(markers[i]); // get the position
});

终于……

以及在搜索栏中输入的地址。

没有任何意义 - 地址没有位置,除非您对其进行地理编码 - 而且我在您的页面中看不到任何搜索栏!

编辑

“我只需要弄清楚如何应用那些单独的 lat 和 lng 值并将它们设置为地标”

同样,我不是 100% 确定我理解,但如果您想用您的数据实际创建一个新标记,您可以轻松修改函数...

var createMarker = function(marker) {
    var lat = marker.position.$a;
    var lng = marker.position.ab;
    var myLatlng = new google.maps.LatLng(lat, lng);
    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map
    });
}

【讨论】:

  • 这正是我所需要的。我一有机会就会检查这个,如果我有问题会回来。再次感谢您的意见!
  • 效果很好!现在我只需要弄清楚如何应用这些单独的 lat 和 lng 值并将它们设置为地标。如果你在我做任何输入之前回到这个问题(并且听起来很悲伤,因为你是如何做到这一点的快速分解)
  • 再次感谢。还有几个问题大声笑。你已经非常有帮助了。请看我的编辑
  • 你好?我坚持最后一步,任何帮助将不胜感激!
  • 我不确定为什么我的回答中删除了赞成票和回答检查...
猜你喜欢
  • 2010-12-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-10-07
  • 1970-01-01
  • 2010-11-18
  • 2014-11-02
相关资源
最近更新 更多