百度地图api使用setViewport
时间: 2023-12-14 15:39:09 浏览: 172
百度地图 API 中的 `setViewport` 方法用于设置地图的可视区域。该方法接受一个参数 `viewport`,表示要设置的可视区域。可视区域是一个矩形区域,由左上角和右下角两个点确定。
以下是使用 `setViewport` 方法设置地图可视区域的示例代码:
```javascript
// 创建地图实例
var map = new BMap.Map("map-container");
// 创建可视区域
var viewport = new BMap.Viewport({
"bounds": new BMap.Bounds(
new BMap.Point(116.403874, 39.915168),
new BMap.Point(116.406105, 39.918118)
)
});
// 设置地图的可视区域
map.setViewport(viewport);
```
在上面的示例代码中,首先创建了一个地图实例 `map`,然后创建了一个可视区域 `viewport`,并指定了该区域的左上角和右下角坐标。最后调用 `setViewport` 方法将可视区域设置为地图的当前视图。
相关问题
百度地图api绘制路多边形demo
百度地图API提供了绘制路多边形的功能。通过使用百度地图JavaScript API提供的相关函数和方法,我们可以很方便地绘制出具有多个边界的多边形。
在绘制路多边形的Demo中,首先需要在HTML页面中引入百度地图的JavaScript库,并创建一个地图的容器。然后,通过调用`new BMap.Map`函数创建一个地图实例。接下来,可以通过百度地图提供的`getDrivingRoute`函数来获取行驶路线的坐标点,从而确定多边形的边界。
一旦获得了路线的坐标点,我们可以通过`new BMap.Polygon`函数创建一个多边形实例,并将路线的坐标点作为参数传入。然后,调用地图实例的`addOverlay`方法将多边形添加到地图中。
为了能够看到整个多边形,可以使用`setViewport`方法将地图的中心和缩放级别调整到合适的位置。最后,使用`enableScrollWheelZoom`方法可以开启鼠标滚轮缩放功能。
通过以上步骤,我们就可以成功绘制出一个路多边形的Demo。当用户使用鼠标滚轮进行缩放时,地图中的多边形也会相应地进行放大或缩小,从而展现出不同的效果。
值得一提的是,百度地图API还支持自定义多边形的样式和交互行为。我们可以通过设置多边形的属性,如线条颜色、填充颜色、透明度等,来实现不同的样式效果。同时,可以注册相关的事件监听器,如点击事件、鼠标移入、移出事件等,以实现对多边形的响应。
通过百度地图API提供的绘制路多边形的功能,我们可以方便地在地图上展示复杂的路线和区域边界信息,为用户提供更加直观和交互性的地图应用体验。
生成一个用百度地图js api编写的demo,demo展示百度地图绘制多边形的能力
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图绘制多边形示例</title>
<style type="text/css">
html,body,#map{height:100%;margin:0;font-family:"微软雅黑";}
#toolbar{position:absolute;top:10px;left:10px;z-index:9999;}
#polygonList{position:absolute;top:50px;left:10px;z-index:9999;}
#polygonList ul{list-style:none;margin:0;padding:0;}
#polygonList li{margin-bottom:10px;}
</style>
</head>
<body>
<div id="map"></div>
<div id="toolbar">
<button onclick="startDrawPolygon()">开始绘制多边形</button>
<button onclick="endDrawPolygon()">结束绘制多边形</button>
<button onclick="clearMap()">清除地图上的多边形</button>
</div>
<div id="polygonList">
<ul></ul>
</div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("map");
var points = []; // 多边形的点数组
var polygons = []; // 地图上的多边形数组
var polygonNames = []; // 多边形名称数组
var polygonIndex = 0; // 多边形的编号
var polygonList = document.getElementById("polygonList").getElementsByTagName("ul")[0]; // 多边形列表
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
// 启用滚轮缩放
map.enableScrollWheelZoom(true);
// 添加地图点击事件
map.addEventListener("click", function (e) {
if (points.length == 0) {
alert("请先开始绘制多边形!");
return;
}
points.push(e.point); // 将点击的点加入点数组
var polyline = new BMap.Polyline(points, {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5}); // 创建折线
map.addOverlay(polyline); // 将折线添加到地图上
});
// 开始绘制多边形
function startDrawPolygon() {
if (points.length != 0) {
alert("请先结束绘制多边形!");
return;
}
var polygonName = "多边形" + (++polygonIndex); // 生成多边形名称
polygonNames.push(polygonName); // 将多边形名称加入名称数组
var polygonListItem = document.createElement("li"); // 创建多边形列表项
polygonListItem.innerHTML = polygonName; // 设置多边形列表项的文本内容
polygonListItem.onclick = function () {
var index = polygonNames.indexOf(this.innerHTML); // 获取多边形的编号
map.setViewport(polygons[index].getPath()); // 设置地图视野显示该多边形
};
polygonList.appendChild(polygonListItem); // 将多边形列表项添加到多边形列表上
}
// 结束绘制多边形
function endDrawPolygon() {
if (points.length == 0) {
alert("请先开始绘制多边形!");
return;
}
var polygon = new BMap.Polygon(points, {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5, fillColor: "blue", fillOpacity: 0.1}); // 创建多边形
map.addOverlay(polygon); // 将多边形添加到地图上
polygons.push(polygon); // 将多边形添加到多边形数组中
points = []; // 清空点数组
}
// 清除地图上的多边形
function clearMap() {
map.clearOverlays(); // 清除地图上所有的覆盖物
points = []; // 清空点数组
polygons = []; // 清空多边形数组
polygonNames = []; // 清空多边形名称数组
polygonIndex = 0; // 重置多边形的编号
polygonList.innerHTML = ""; // 清空多边形列表
}
</script>
</body>
</html>
阅读全文
相关推荐
















