百度地图开发

Question

百度地图地图JS

Answer 1

不知道你说的两个地图是什么意思，一般我们都是用GPS坐标，然后转化成百度坐标，之后才添加到地图显示

Answer 2

 var centerId = document.getElementById(this.contentEl);
        var baiduMaps = new BMap.Map(this.body.dom);
        var point = new BMap.Point(107.00, 33.00);
        baiduMaps.centerAndZoom(point, 5);
        baiduMaps.addControl(new BMap.NavigationControl());   //地图平移缩放控件
        baiduMaps.addControl(new BMap.ScaleControl());    //比例尺控件
        baiduMaps.addControl(new BMap.OverviewMapControl());   //缩放地图控件
        baiduMaps.enableScrollWheelZoom();            //启用滚轮放大缩小
        baiduMaps.addControl(new BMap.MapTypeControl());   //地图类型控件
这是第一个实例的创建方法。var centerId = document.getElementById(this.contentEl);
        this.googleMaps = new BMap.Map(centerId);
        var point = new BMap.Point(107.00, 33.00);
        this.googleMaps.centerAndZoom(point, 5);
        this.googleMaps.addControl(new BMap.NavigationControl());   //地图平移缩放控件
        this.googleMaps.addControl(new BMap.ScaleControl());    //比例尺控件
        this.googleMaps.addControl(new BMap.OverviewMapControl());   //缩放地图控件
        this.googleMaps.enableScrollWheelZoom();            //启用滚轮放大缩小
        this.googleMaps.addControl(new BMap.MapTypeControl());   //地图类型控件
这是第二个实例的创建方法。
添加标注点的时候。
两个地图的标注点经纬度都弹出来看了。都是一样的！
但是第一个地图的标注点和第二个地图的标注点存在一定的偏差。

Answer 3

没看到你添加标注的代码怎么写的// 百度地图API功能
//GPS坐标
var xx = 116.397428;
var yy = 39.90923;
var gpsPoint = new BMap.Point(xx,yy);//地图初始化
var bm = new BMap.Map("allmap");
bm.centerAndZoom(gpsPoint, 15);
bm.addControl(new BMap.NavigationControl());//坐标转换完之后的回调函数
translateCallback = function (point){
    var er = new BMap.Marker(point);
    bm.addOverlay(er);
    var label = new BMap.Label("我是百度标注哦",{offset:new BMap.Size(20,-10)});
    er.setLabel(label); //添加百度label
    bm.setCenter(point);
    alert(point.lng + "," + point.lat);
}setTimeout(function(){
    BMap.Convertor.translate(gpsPoint,0,translateCallback);     //真实经纬度转成百度坐标
}, 2000);

Answer 4

        var mapobj = this.getmapobj(obj.name); 
        this.deleteMarker(obj.car_num);
        this.removemaker(mapobj); 
        this.setwinarray(null);
        var map = this.getMap();
        //map.clearOverlays();
        //var center = new google.maps.LatLng(obj.lat, obj.lng);
        var center = new BMap.Point(obj.lng, obj.lat);
        //map.centerAndZoom(center, 5);
        var speed = obj.speed;
        var car_num = obj.car_num;
        var rev_time = obj.rev_time;
        var pic_src = obj.pic_src;
        var url = obj.icon;
        var information;
        alert(obj.lng + "," + obj.lat);
        //var label = new BMap.Label(car_num, { offset: new BMap.Size(-5, 35) });
        var icon = new BMap.Icon(url, new BMap.Size(40, 40), { anchor: new BMap.Size(10, 30) });
        var obj = new BMap.Marker(center, { icon: icon });
        var inforwin = new BMap.InfoWindow();
        var opts = {
            width: 200,     // 信息窗口宽度
            height: 60,
        }
        //obj.setLabel(label);
        obj.setTitle(obj.car_num);
        erobjArray.push(obj);
        map.addOverlay(obj);//这是第一个地图添加标注的方法
                alert(lng + "," + lat);
                obj = new BMap.Marker(new BMap.Point(lng, lat), { icon: icon });
                var label = new BMap.Label(car_num, { offset: new BMap.Size(-5, 35) });
                var opts = {
                            width: 280,     // 信息窗口宽度   
                            height: 150,     // 信息窗口高度   
                        }
                var usin_id = code;
                obj.setTitle(car_num);
                var information = "<b>" + Lan_P_GMP_7 + "</b><span onclick='reloadaddress(this," + lat + "," + lng + ")'>" + Lan_P_GM_18 + "</span><br/><b>" + Lan_P_GM_19 + "</b>" + speed + "<br/>"
                   + "<b>" + Lan_P_M_35 + ":</b><span style='width:300px' onclick='reloadStatus(this," + usin_id + ")'>" + Lan_bu_120 + "</span><br/>"
                   + "<b>" + Lan_P_GM_20 + "</b>" + car_num + "<br/><b>" + Lan_P_GM_21 + "</b>" + rev_time + "<br/>"
                   + "<br/>"
                   + "<span><input style='width:90px' type='button' value='" + Lan_P_GM_22 + "' onclick=\"return following('" + usin_id + "','" + car_num + "')\"/>"
                   + "<input style='width:90px' type='button' value='" + Lan_P_GM_23 + "' onclick=\"return monitoring('" + usin_id + "','" + car_num + "')\"/>"
                   + "<input style='width:90px' type='button' value='" + Lan_P_GM_24 + "' onclick=\"return tracking('" + usin_id + "','" + car_num + "')\"/></span>";
                        if (powersaving == 3) {
                            information += "</br><b>" + Lan_bu_54 + ":</b>" + Lan_bu_121
                        }
                        var infoWindow = new BMap.InfoWindow(information, opts);
                        //alert(information);
                        obj.addEventListener('click', function () {
                            this.openInfoWindow(infoWindow);
                        })
                        obj.setLabel(label);
                        bdArray.push(obj);
            }    
        }
        map.addOverlay(obj);
//这是第二个地图添加标注的方法经纬度都是从后台传过来的。
两个添加标注的地方经纬度弹出来对比 
值是一模一样的。
但是两个标注的位置存在偏差

Answer 5

我不知道我的理解对不对，楼主应该是一个页面有两个div，分别都存放地图map1， map2，至少在命名上，会不会有冲突啊，因为我看到你的两个添加标注都是map.addOverlay(obj);
我之前我坐过类似的测试，一个页面多个map， 不存在这样的问题的

Answer 6

看到你的截图，就明白了，引起的原因很简单，你的图片设置不一样var icon = new BMap.Icon(url, new BMap.Size(40, 40), { anchor: new BMap.Size(10, 30) });
anchor 是用来设置图片偏移的，你看两个map设置是否一样

Answer 7

    addMarker: function(obj) { 
        
        var lat = obj.lat,lng = obj.lng,car_num = obj.name,rev_time = obj.rev_time, code = obj.code,current_signal=obj.current_signal,current_battery = obj.current_battery,
        speed = obj.speed, powersaving = obj.powersaving;
        var icon = new BMap.Icon(obj.icon, new BMap.Size(40, 40), { anchor: new BMap.Size(10, 30) });是一样的。

Answer 8

如果这样的话，只能一点点检查了，还原成百度的 er 图标， 不做任何 anchor ,看看效果一样不，然后再调试，因为后台传来的经纬度是一样的，问题出在了添加标注这块了