百度地图

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<title>Ark Zhang Baidu Map</title>
<script type="text/javascript">

var map = undefined;
var polyline = undefined;
var carMarker = undefined;
var pointCount = 0;
var LatLong = [];

//初始化地图显示
function initialize() {
    map = new BMap.Map("allmap");
    var point = new BMap.Point(116.397428, 39.90923);
    map.centerAndZoom(point, 15);
    map.enableScrollWheelZoom();
    
    map.addControl(new BMap.NavigationControl({
                   anchor: BMAP_ANCHOR_TOP_LEFT, 
                   type: BMAP_NAVIGATION_CONTROL_SMALL}));
   
    //setMapCenter(116.397428, 39.90923);
    //addTrackLine("116.397,39.909|116.398,39.904|116.394,39.905")
}

//设置地图大小
function setMapSize(width, height)
{
    var nWidth = parseInt(width);
    var nHeight = parseInt(height);
    if (nWidth <= 0 || nHeight <= 0) 
        return ;   
    document.getElementById("map_canvas").style.height = nHeight;
    document.getElementById("map_canvas").style.width = nWidth;
}

//设置地图中心位置
function setMapCenter(lng, lat)
{    
    if (map == undefined)
        return;

    var ggPoint = new BMap.Point(parseFloat(lng), parseFloat(lat));
    BMap.Convertor.translate(ggPoint, 2, mapCenterCallback);
}

//设置地图中心位置坐标转化回调
mapCenterCallback = function (point)
{
    map.setCenter(point);    
}

//移动车辆
function placeCar(id, longitude, latitude, direction)
{
    if (map == undefined)
        return;
        
    var ggPoint = new BMap.Point(parseFloat(longitude), parseFloat(latitude));
    BMap.Convertor.translate(ggPoint, 2, placeCarCallback);
}


//移动车辆坐标转化回调
placeCarCallback = function (point)
{
    if (carMarker != undefined)
    {
        carMarker.setPosition(point);
        return ;
    }
    var myIcon = new BMap.Icon("car.PNG", new BMap.Size(32, 32));
    carMarker = new BMap.Marker(point, {icon: myIcon});
    map.addOverlay(carMarker);      
}

//新增轨迹
function addTrackLine(point_list) 
{
    if (map == undefined)
        return;

    var Lat = [];
    var Long = [];
    var temp = point_list.split("|");
    var i = 0;
    pointCount = temp.length;
    for(;i < temp.length;i++)
    {
        Lat.push(temp[i].split(",")[0]);
        Long.push(temp[i].split(",")[1]);
        var ggPoint = new BMap.Point(parseFloat(Long[i]), parseFloat(Lat[i]));
        BMap.Convertor.translate(ggPoint, 2, addTrackLineCallback);
    }

}

//新增轨迹坐标转化回调
addTrackLineCallback = function (point)
{
//     if (polyline != undefined)
//     {
//         return ;
//     }
    LatLong.push(point);
    pointCount--;
    if (!pointCount) {
    var polyline = new BMap.Polyline(LatLong, {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
    map.addOverlay(polyline);     
    }
}


//删除轨迹
function clearTrackLine() 
{
    if (map == undefined)
        return;
    //map.clearOverlays();
    pointCount = 0;
}


</script>
  </head>
  <body onload="initialize()">
    <div id="allmap" style="width:196px;; height:500px;"></div>
  </body>
</html>

可替换前面的google地图,百度地图部分代码没有完全实现

你可能感兴趣的:(百度地图)