0

我正在努力将谷歌地图集成到一个网络应用程序中，我有一个可能性问题。

我使用 ASP .Net 4.0 作为代码的基础，但我怀疑我将不得不使用 JavaScript 来实现大部分功能，即。基本上我想在我存储在数据库中的 Lat Long 位置的地图上显示一堆标记，然后让用户能够用鼠标在地图上绘制一个框，然后取回四个角的 lat long的盒子。

如果有人知道我怎么能做到这一点，这将对我有很大帮助！

谢谢

4

3 回答 3

3

多年来，Google Maps API 的复杂性让我感到害怕。最近，我偶然发现了一个名为GMap3的 jQuery 插件，它为您完成了很多繁重的工作。

我建议在初始化和所有这些之后，从你的 .NET 代码中打印一个 Javascript 块，如下所示：

var markersFromDatabase = [
    [60.164967,24.94758],
    [59.956495, 10.764599]
    //etc. This array should be printed from your serverside code
];
var markersToBeAdded = [];
jQuery.each(markersFromDatabase, function(indexOfItem, valueOfItem){
    markersToBeAdded.push({
        lat:valueOfItem[0],
        lng:valueOfItem[1],
        options: {
            draggable: false,
            icon: "img/your_awesome_icon.png",
            title: "This is an icon from my database!"
        }
    });
});
jQuery("#map_canvas").gmap3(
    { action: 'addMarkers',
        markers: markersToBeAdded
    }
);

编辑：我现在意识到我只回答了你问题的一半。恐怕我对选择框没有明显的答案。我怀疑您可以使用addRectangle，或者在最坏的情况下使用addFixPanel ，它可以让您<div>在地图画布上添加透明（然后为此触发鼠标事件）。

于 2012-04-24T13:53:35.487 回答
1

这是使用 Google Maps API 3 的叠加可编辑功能的一种方法。

谷歌地图覆盖可编辑

于 2012-04-24T13:45:57.097 回答
0

如果您的问题是“如何使用矩形选择多个标记”，您可以执行以下操作：

var markers = []; // This array must be filled with your data
var rectangles = [];
var triggeredMarkers = [];
google.maps.event.addListener(drawingManager, 'rectanglecomplete', updateSelection);

function updateSelection(rectangle){
   var lat_max = rectangle.getBounds().getNorthEast().lat();
   var lat_min = rectangle.getBounds().getSouthWest().lat();
   var lng_max = rectangle.getBounds().getNorthEast().lng();
   var lng_min = rectangle.getBounds().getSouthWest().lng();
   rectangles.push(rectangle);

   for(var i=0;i<markers.length;i++){
     if((lat_min < markers[i].getPosition().lat() ? (markers[i].getPosition().lat() < lat_max ? true:false):false)
       && (lng_min < markers[i].getPosition().lng() ? (markers[i].getPosition().lng() < lng_max ? true:false):false)){
       triggeredMarkers.push(markers[i]);
     }
   }
}

该rectangles数组用于保存矩形，以便以后能够擦除它们。

但是，如果您只想要一个处理多边形的简单函数，那么这个函数对您真的很有帮助。它可以这样使用：

var markers = [];
var polygones = [];
var triggeredMarkers = [];
google.maps.event.addListener(drawingManager, 'polygoncomplete', updateSelection);

function updateSelection(polygon){
   polygones.push(polygon);

   for(var i=0;i<markers.length;i++){
    if(google.maps.geometry.poly.containsLocation(markers[i].getPosition(),polygon)){
       triggeredMarkers.push(markers[i]);
     }
   }
}

对于矩形和圆形，有这个答案可以帮助你。

于 2018-04-17T15:21:51.807 回答