Google 和 Bing 地图 API 比较
在我经常光顾的一个当地高尔夫球场，球场旁边有一个开阔的草地。它大约有八英亩大，而且定期修剪。可以在那里打高尔夫球——你带上自己的球来捡球。
在我经常光顾的一个当地高尔夫球场，球场旁边有一个开阔的草地。它大约有八英亩大，而且定期修剪。可以在那里打高尔夫球——你带上自己的球来捡球。我和我的高尔夫同事们在那里花几个小时练习、聊天，总的来说就是消磨时间。
其中一个人带来了 Ginger，这条神奇、令人难以置信、了不起的狗。
Ginger 是一只匈牙利维兹拉犬（或匈牙利指示犬）。它追逐松鼠，乞求零食，并密切监督我们，以确保我们不犯错误。
总而言之，我决定制作一个专门的网页，使用在线地图服务来测量场地上的距离（以码为单位）。我从 Google 地图开始，然后用 Bing 地图做了相同的应用程序。这是一个熟悉 API 的好方法。
以下是最终两张地图的图像
要开始使用在线地图服务，您需要访问各自的网站并获取开发者密钥。
我将代码精简到最少，以便更容易地比较 API。 Google 地图需要此 CSS（否则它将无法工作）
html
{
height: 100%;
}
body
{
height: 100%;
margin: 0;
padding: 0;
}
以下是地图脚本的包含方式。 Google 在加载 JavaScript 时需要开发者密钥，Bing 在创建地图对象时需要它
Google<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXXXXXX&libraries=geometry&sensor=false" > </script>
Bing
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"> </script>
注意：我使用 jQuery 来操作 DOM 元素，这可能有点过分，但我可能会在此应用程序中添加更多内容，并且我不想稍后添加它。 另外，我真的很喜欢 jQuery。
以下是创建地图的方式
通用代码（Google 地图和 Bing 地图相同）
<script type="text/javascript">
var gTheMap;
var gMarker1;
var gMarker2;
$(document).ready(DocLoaded);
function DocLoaded()
{
// golf course coordinates
var StartLat = 44.924254;
var StartLng = -93.366859;
// what element to display the map in
var mapdiv = $("#map_div")[0];
Google
// where on earth the map should display
var StartPoint = new google.maps.LatLng(StartLat, StartLng);
// create the map
gTheMap = new google.maps.Map(mapdiv,
{
center: StartPoint,
zoom: 18,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
// place two markers
marker1 = PlaceMarker(new google.maps.LatLng(StartLat, StartLng + .0001));
marker2 = PlaceMarker(new google.maps.LatLng(StartLat, StartLng - .0001));
DragEnd(null);
}
Bing
// where on earth the map should display
var StartPoint = new Microsoft.Maps.Location(StartLat, StartLng);
// create the map
gTheMap = new Microsoft.Maps.Map(mapdiv,
{
credentials: 'xxxxxxxxxxxxxxxxxxxxxxxx',
center: StartPoint,
zoom: 18,
mapTypeId: Microsoft.Maps.MapTypeId.aerial
});
// place two markers
marker1 = PlaceMarker(new Microsoft.Maps.Location(StartLat, StartLng + .0001));
marker2 = PlaceMarker(new Microsoft.Maps.Location(StartLat, StartLng - .0001));
DragEnd(null);
}
注意：在 Bing 文档中，即使示例代码包含它，mapTypeId: 也从选项列表中缺失。
注意：创建 Bing 地图时，请使用开发者密钥作为凭据属性。
我立即在地图上放置两个标记/图钉，这比用鼠标点击动态创建它们更简单（正如我最初尝试的那样）。标记/图钉是可拖动的，我捕获 DragEnd 事件以计算和显示以码为单位的距离，并在用户完成拖动时绘制一条线。
以下是放置标记的代码
// ---- PlaceMarker ------------------------------------
function PlaceMarker(location)
{
var marker = new google.maps.Marker(
{
position: location,
map: gTheMap,
draggable: true
});
marker.addListener('dragend', DragEnd);
return marker;
}
Bing
// ---- PlaceMarker ------------------------------------
function PlaceMarker(location)
{
var marker = new Microsoft.Maps.Pushpin(location,
{
draggable : true
});
Microsoft.Maps.Events.addHandler(marker, 'dragend', DragEnd);
gTheMap.entities.push(marker);
return marker;
}
以下是用户停止拖动标记时运行的代码
// ---- DragEnd -------------------------------------------
var gLine = null;
function DragEnd(Event)
{
var meters = google.maps.geometry.spherical.computeDistanceBetween(marker1.position, marker2.position);
var yards = meters * 1.0936133;
$("#message").text(yards.toFixed(1) + ' yards');
// draw a line connecting the points
var Endpoints = [marker1.position, marker2.position];
if (gLine == null)
{
gLine = new google.maps.Polyline(
{ path: Endpoints,
strokeColor: "#FFFF00",
strokeOpacity: 1.0,
strokeWeight: 2,
map: gTheMap
});
}
else
gLine.setPath(Endpoints);
}
Bing
// ---- DragEnd -------------------------------------------
var gLine = null;
function DragEnd(Args)
{
var Distance = CalculateDistance(marker1._location, marker2._location);
$("#message").text(Distance.toFixed(1) + ' yards');
// draw a line connecting the points
var Endpoints = [marker1._location, marker2._location];
if (gLine == null)
{
gLine = new Microsoft.Maps.Polyline(Endpoints,
{
strokeColor: new Microsoft.Maps.Color(0xFF, 0xFF, 0xFF, 0), // aRGB
strokeThickness : 2
});
gTheMap.entities.push(gLine);
}
else
gLine.setLocations(Endpoints);
}
}
注意：我无法在 Bing API 中找到一个计算点之间距离的函数，所以我自己编写了一个 (CalculateDistance)。 如果您想查看它的源代码，您可以从网页上获取它。
注意：我能够通过使用场地旁边的高尔夫球洞来验证测量结果的准确性。 我将一个图钉/标记放在果岭的中心，然后通过放大，我能够看到球道上的 150 个标记，并将另一个图钉/标记放在其中一个标记上。
最终注释
总而言之，这些 API 非常相似。 两个都让用最少的代码完成很多事情变得容易。
在一个航拍图中，树上长满了叶子，而在另一个航拍图中，树木是光秃秃的。 我不知道哪个服务有更新的数据。
以下是工作页面的链接
我希望有人觉得这有用。
史蒂夫·韦伦斯