在同一个应用程序中使用谷歌地图和百度地图

Question

我想知道是否有谁在同一个版本中实现了谷歌地图、V2和百度地图，因为通用汽车没有像中国那样工作？

或者我应该将项目分成两个分支来代替？不过，最好跳过要维护的两个分支。

Answer 1

我的解决方案是像往常一样实现通用汽车，但是如果用户有中国设置(通过设置)静态地图将被使用，但是静态地图是从百度而不是谷歌获取的。

staticUrl = "http://api.map.baidu.com/staticimage?center=" 
                + location.getLongitude() + "," + location.getLatitude() 
                + "&width=" + width + "&height=" + width + "&zoom=15"
                + "&markers=" + location.getLongitude() + "," + location.getLatitude();

https://api.map.baidu.com/staticimage?center=121,31&width=300&height=300&zoom=15结果

​

​

如果试图实现真正的地图解决方案，则不建议使用此方法。由于我有不同的地点，只有不同的国家使用，这个解决方案可以使用。

所以，我就是这样解决的。希望有人能帮上忙。

Answer 2

此外，我发现，如果你使用http://ditu.google.cn，而在中国，它是有效的。

当使用中国的在线地图为你的应用，无论是谷歌地图或百度，有一个基于法律原因的经纬度转换。

谷歌地图中的卫星视图使用“地球”(WGS-84)坐标。中国的GMaps地图视图使用“火星”坐标(GCJ-02)，还有在两者之间进行转换的代码。百度地图使用的是“比尔爪”坐标，具有不同的偏移量。百度地图API有一个Google坐标与自己的系统之间的演示转换。

在中国，全球定位系统，就像一切，有一个额外的复杂层:)

如果你已经建立了这个应用程序，请张贴详细信息。有一个与百度地图的英语界面将是很好的。

Answer 3

你可以同时使用谷歌地图和百度地图，但要确保从WGS-84坐标(被世界上大多数人使用)转换为百度的坐标(BD-09，不同于中国的GCJ-02)。下面是一些基于一个来自百度地图API的例子的代码

​

// Google coordinates
var gPoint = new BMap.Point(121.4914, 31.2423);  // lon, lat of the Bund Museum in Shanghai - https://www.google.com/maps/@31.2423,121.4914,19z
// gPoint = new BMap.Point(-122.0851053, 37.4219593);  // lon, lat of the Googleplex (no Baidu map data but zooms out in Mountain View)

var labelOffset = { offset: new BMap.Size(20, -10) };

// Initialize map
var map = new BMap.Map('allmap');
map.centerAndZoom(gPoint, 15);
map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT}));  // add scale
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.MapTypeControl());   // map type control: street/satellite/2.5D
map.enableScrollWheelZoom();  // mouse wheel scroll is disabled by default

// Add Google marker and label
var markerG = new BMap.Marker(gPoint);
map.addOverlay(markerG);
markerG.setLabel(new BMap.Label('Google coordinates marker appears<br/>at incorrect location on Baidu Map', labelOffset));

// Coordinate conversion ... GCJ-02 coordinates ... Baidu coordinates
BMap.Convertor.translate(gPoint, 2, function (point) {
  var marker = new BMap.Marker(point);
  map.addOverlay(marker);
  marker.setLabel(new BMap.Label('Converted to Baidu coordinates:<br/>' +
    point.lng + ', ' +
    point.lat +
    '<br/>(note the offset of ' + (map.getDistance(gPoint, point)).toFixed(2) + ' meters)',
  labelOffset));
  
  map.addOverlay(new BMap.Polyline([gPoint, point]));  // draw a line between points

});

<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=gd0GyxGUxSCoAbmdyQBhyhrZ"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>

<div id="allmap"></div>

​

如果上面的代码段由于StackOverflow沙箱脚本的方式而不能工作，那么可以尝试使用JSbin demo of Google -> Baidu coordinates conversion。

如果必须脱机执行转换，请查看GitHub上的GitHub项目。

不过，还不清楚用中文本地化的浏览器将通过navigator.geolocation API返回哪些坐标类型。我已经为此做了一个测试应用程序，并将问题发布在

在百度地图中显示navigator.geolocation.getCurrentPosition。

进一步读：

• 中国的GPS漂移是什么原因？
• 中国对地理数据的限制