百度地图api学习

实例1：画线画字
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>济南景点步行图</title>
<style type="text/css">
#holder {
    width: 800px;
    height: 600px;
    background-color: pink;
}
</style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=tdPBKDSysoLON3V3f3k7z7p0"></script>
</head>
<body>
<div id="holder">
</div>
</body>
</html>
<script>
var map = new BMap.Map('holder');
var point = new BMap.Point(117.030568, 36.667777);
map.centerAndZoom(point, 14);
map.enableScrollWheelZoom();
var places = [
    {name: '大明湖', point: new BMap.Point(117.023669,36.679587)},
    {name: '趵突泉', point: new BMap.Point(117.023238,36.667545)},
    {name: '泉城广场', point: new BMap.Point(117.028124,36.66743)},
    {name: '植物园', point: new BMap.Point(117.027981,36.653996)},
    {name: '千佛山', point: new BMap.Point(117.03488,36.650985)}
];
var polyline = new BMap.Polyline([
        places[0].point,
        places[1].point,
        places[2].point,
        places[3].point,
        places[4].point
        ], {strokeColor: 'purple', strokeWeight: 5, strokeOpacity: .5});
map.addOverlay(polyline);
var style = {
    color: 'red',
    fontSize: '12px',
    height: '20px',
    lineHeight: '20px',
    fontFamily: '微软雅黑'
};
var label0 = new BMap.Label(places[0].name, {position: places[0].point});
var label1 = new BMap.Label(places[1].name, {position: places[1].point});
var label2 = new BMap.Label(places[2].name, {position: places[2].point});
var label3 = new BMap.Label(places[3].name, {position: places[3].point});
var label4 = new BMap.Label(places[4].name, {position: places[4].point});
label0.setStyle(style);
label1.setStyle(style);
label2.setStyle(style);
label3.setStyle(style);
label4.setStyle(style);
map.addOverlay(label0);
map.addOverlay(label1);
map.addOverlay(label2);
map.addOverlay(label3);
map.addOverlay(label4);
</script>
View Code