用JavaScript，通过百度地图API显示地图，并标注地点
1先创建点
var point = new BMapGL.Point(120.392, 36.088);
2创建标注
var marker = new BMapGL.Marker(point); // 创建标注
3标注添加到地图
map.addOverlay(marker);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="author" content="wanmait">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>wanmait</title>
<!-- 百度AK -->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=百度地图AK"></script>
<style type="text/css">
#container{height: 600px;width: 800px;}
/*容器地图的宽高 */
</style>
</head>
<body>
<div id="container"></div>
<!-- 存放地图的容器 -->
<script type="text/javascript">
var map = new BMapGL.Map("container");
// 创建地图
var point = new BMapGL.Point(120.392, 36.088);
// 创建坐标
map.centerAndZoom(point, 17); //显示坐标为中心的地图
// 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
// 在地图上绘制标注的点
var marker = new BMapGL.Marker(point); // 创建标注
map.addOverlay(marker);
// 将标注添加到地图中
// 地图控件
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
map.addControl(cityCtrl);
</script>
</body>
</html>显示效果:
0条评论
点击登录参与评论