<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小区轮廓</title>
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=2.0&ak=euR7ADQe300rGsdW4KGNe51t3OsxVu3d"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/equipmentMapUtil.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom("太原市", 15);
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
var options = {
renderOptions : {
map : map,
selectFirstResult : true
},
onSearchComplete : function(results) {
//这个函数会被调用两次
}
};
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
/**
* 第一个参数是城市名，第二参数是小区名
*/
var showArea = function(city, area){
queryHouse(area, city, "E1ec599cbc4a8006eb37d99cf002e054", function(data){
if(data.message == 'ok'){
var houses = data.results;
if(houses && houses.length > 0){
var house = houses[0];
queryHouseOutline(house.uid, function(houseOutline){
var geo = houseOutline.content.geo;
if(!geo){
var location = house.location;
var point = new BMap.Point(location.lng, location.lat);
map.centerAndZoom(point, 19);
var marker = new BMap.Marker(point);
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
map.addOverlay(marker);
}else{
map.clearOverlays();
var geoObj = parseGeo(geo);
//var bounds = coordinateToPoints(geoObj.bound);
//边界点
var points = coordinateToPoints(map, geoObj.points);
var ply = new BMap.Polygon(points, {
strokeWeight: 2,
strokeColor: "#F01B2D",
strokeOpacity: 0.9,
fillColor : "#FFEBCC"
}); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
map.setViewport(ply.getPath()); //调整视野
}
});
}
}
});
};
showArea($('#cityId').val(), $('#areaId').val());
$('#showBtn').click(function(){
showArea($('#cityId').val(), $('#areaId').val());
});
});
</script>
</head>
<body>
<table>
<tr>
<td>城市:</td>
<td><input id="cityId" type="text" value="太原" /></td>
<td>小区:</td>
<td><input id="areaId" type="text" value="碧桂园城市花园" /></td>
<td>
<button id="showBtn">显示</button>
</td>
</tr>
</table>
<div id="allmap" style="width: 1024px; height: 600px;"></div>
</body>
</html>
评论0