<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>map</title>
<!-- 百度地图api -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=C17de36331be78b32a19cb854e9a2f30"></script>
<style>
.map{
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<!-- 画弧线时需引用 -->
<script type="text/javascript" src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script>
<script type="text/javascript">
/* 坐标 */
// var map = new BMap.Map('map',{minZoom:11,maxZoom:15}); // 创建Map实例
// map.centerAndZoom(new BMap.Point(118.82, 32.06), 13); // 初始化地图,设置中心点坐标和地图级别
// map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
// map.setCurrentCity('南京'); // 设置地图显示的城市 此项是必须设置的
// map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
/* 城市名 */
// var map = new BMap.Map('map', {enableMapClick:false});//构造底图时,关闭底图可点功能
// map.centerAndZoom('南京',8);
/* 异步加载 */
// function loadJScript() {
// var script = document.createElement("script");
// script.type = "text/javascript";
// script.src = "http://api.map.baidu.com/api?v=2.0&ak=C17de36331be78b32a19cb854e9a2f30&callback=init";
// document.body.appendChild(script);
// }
// function init() {
// var map = new BMap.Map("map");
// map.centerAndZoom('南京',11);
// }
// window.onload = loadJScript; //异步加载地图
/* 自动移动 */
// var map = new BMap.Map('map');
// map.centerAndZoom('南京',8);
// setTimeout(function(){ // 2秒后移动到广州
// map.panTo(new BMap.Point(113.262232,23.154345));
// }, 2000);
/* 自动缩放 */
// var map = new BMap.Map('map');
// map.centerAndZoom('南京',8);
// setTimeout(function(){ // 2秒后放大到14级
// map.setZoom(14);
// }, 2000);
// map.enableScrollWheelZoom(true);
/* 弹跳动画 */
// var map = new BMap.Map('map');
// var point = new BMap.Point(118.82, 32.06);
// map.centerAndZoom(point, 15);
// var marker = new BMap.Marker(point); // 创建标注
// map.addOverlay(marker); // 将标注添加到地图中
// marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
/* 自定义图标 */
// var map = new BMap.Map('map');
// var point = new BMap.Point(118.82, 32.06);
// map.centerAndZoom(point, 15);
// var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(300,157));
// var marker = new BMap.Marker(point,{icon:myIcon});
// map.addOverlay(marker);
// marker.enableDragging();
/* 画线、面、圆 */
// var map = new BMap.Map('map');
// var point = new BMap.Point(118.82, 32.06);
// map.centerAndZoom(point, 15);
// // 创建折线
// var polyline = new BMap.Polyline([
// new BMap.Point(118.81, 32.05),
// new BMap.Point(118.82, 32.06),
// new BMap.Point(118.83, 32.05)
// ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
// map.addOverlay(polyline);
// polyline.enableEditing();
// // 创建多边形
// var polygon = new BMap.Polygon([
// new BMap.Point(118.815, 32.07),
// new BMap.Point(118.81, 32.065),
// new BMap.Point(118.82, 32.06),
// new BMap.Point(118.83, 32.065),
// new BMap.Point(118.825, 32.07)
// ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
// map.addOverlay(polygon);
// // 创建圆
// var circle = new BMap.Circle(point,500);
// map.addOverlay(circle);
// circle.hide();
/* 文字备注 */
// var map = new BMap.Map('map');
// var point = new BMap.Point(118.82, 32.06);
// map.centerAndZoom(point, 15);
// var marker = new BMap.Marker(point);
// map.addOverlay(marker);
// var opts = {
// position : point, // 指定文本标注所在的地理位置
// offset : new BMap.Size(10, -30) // 设置文本偏移量
// }
// var label = new BMap.Label("测试百度地图", opts); // 创建文本标注对象
// label.setStyle({
// color : "red",
// fontSize : "12px",
// height : "20px",
// lineHeight : "20px",
// fontFamily:"微软雅黑"
// });
// map.addOverlay(label);
/* 图标备注 */
// var map = new BMap.Map('map');
// var point = new BMap.Point(118.82, 32.06);
// map.centerAndZoom(point, 15);
// var marker = new BMap.Marker(point);
// map.addOverlay(marker);
// var label = new BMap.Label("备注一下",{offset:new BMap.Size(20,-10)});
// marker.setLabel(label);
/* 获取图标信息 */
// var map = new BMap.Map('map');
// var point = new BMap.Point(118.82, 32.06);
// map.centerAndZoom(point, 15);
// var marker = new BMap.Marker(point);
// map.addOverlay(marker);
// marker.addEventListener('click',getAttr);
// function getAttr(){
// var p = marker.getPosition(); // 获取marker的位置
// alert('marker的位置是' + p.lng + "," + p.lat);
// }
/* 弧线 */
// var map = new BMap.Map('map');
// var point = new BMap.Point(118.82, 32.06);
// map.centerAndZoom(point, 15);
// var point1 = new BMap.Point(118.83, 32.05);
// var points = [point,point1];
// var curve = new BMapLib.CurveLine(points, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5});
// map.addOverlay(curve);
// curve.enableEditing();
/* 信息窗口 */
var map = new BMap.Map('map');
var point = new BMap.Point(118.82, 32.06);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
var opts = {
width : 200,
height: 100,
title : "测试地址title"
}
var infoWindow = new BMap.InfoWindow("地址:测试一下地址", opts);
marker.addEventListener('click', function(){
map.openInfoWindow(infoWindow,point);
});
</script>
</body>
</html>
百度地图api
最新推荐文章于 2023-02-14 03:00:00 发布