Question

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

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

如果有人知道我怎么做，这对我有很大的帮助！

由于

Answer 1

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>（然后触发鼠标事件）。< / p>

Answer 2

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

Google Maps Overlay Editable

Answer 3

如果你的问题是“如何用矩形选择多个标记”，你可以这样做：

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数组用于保存矩形，以便以后擦除它们。

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

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]);
     }
   }
}

对于矩形和圆圈，有this answer可以帮助你。

这可以在Google地图中使用吗？在Google地图上手动绘制一个方框

3 个答案: