高德地图使用实例二
高德地图使用实例二:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>云数据周边检索-使用默认皮肤</title>
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main.css"/>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" type="text/css">
<script src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.13&key=e27f01c86fc0c625f8bb0bf713ac37dd"></script>
<style type="text/css">
html,body,#container{
height: 100%
}
.input-item{
height: 2.2rem;
}
.btn{
width: 6rem;
margin: 0 1rem 0 2rem;
}
.input-text{
width: 4rem;
margin-right:1rem;
}
#mapContainer .amap-marker-label{
border: none;
background: transparent;
color: #fff;
left: 2px!important;
}
#panel {
position: absolute;
background-color: white;
max-height: 90%;
overflow-y: auto;
top: 10px;
right: 10px;
width: 200px;
}
.info{
left: 1rem;
width: 400px;
}
.input-card{
left: 1rem;
}
.btn{
margin: 0 1rem 0 1rem;
}
.amap-icon img{
width: 25px;
height: 34px;
}
#mapContainer .amap-marker-label{
left: 5px!important;
}
.amap_lib_cloudDataSearch_poi{
background: url(https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png) no-repeat;
background-size: cover;
width: 22px;
}
</style>
</head>
<body style='font-size:12px'>
<div id="mapContainer"></div>
<div id="panel"></div>
<div class='info'>操作说明：圆和矩形通过拖拽来绘制，其他覆盖物通过点击来绘制</div>
<div class="input-card" style='width: 24rem;'>
<!--<div class="input-item">-->
<!--<input type="radio" name='func' checked="" value='marker'><span class="input-text">画点</span>-->
<!--<input type="radio" name='func' value='polyline'><span class="input-text">画折线</span>-->
<!--<input type="radio" name='func' value='polygon'><span class="input-text" style='width:5rem;'>画多边形</span>-->
<!--</div>-->
<div class="input-item">
<input type="radio" name='func' value='circle'><span class="input-text">画圆</span>
<!--<input type="radio" name='func' value='rectangle'><span class="input-text">画矩形</span>-->
<input type="radio" name='func' value='polygon'><span class="input-text" style='width:5rem;'>画多边形</span>
</div>
<div class="input-item">
<!--<input id="clear" type="button" class="btn" value="清除" />-->
<input id="close" type="button" class="btn" value="关闭绘图" />
<input id="closeSearch" type="button" class="btn" value="清除搜索" />
</div>
</div>
<script type="text/javascript">
var overlays = [];
var layObj = [];
var search;
var mouseTool;
var markers = [];
var map = new AMap.Map("mapContainer", {
mapStyle: "amap://styles/80a1c6c32084be7eb7861eca15256b02",
center: [121.550511, 31.210178],
resizeEnable: true,
zoom: 12 //地图显示的缩放级别
});
//添加云图
AMap.plugin(["AMap.CloudDataLayer"], function() {
var layerOptions = {
query: {
keywords: ""
},
clickable: true
};
var cloudDataLayer = new AMap.CloudDataLayer("5c80ba987bbf195c07e7888f", layerOptions);
//cloudDataLayer.setMap(map); //添加到地图
// AMap.event.addListener(cloudDataLayer, 'click', function(result) {
// var clouddata = result.data;
// var infoWindow = new AMap.InfoWindow({
// content: "<h3><font face='微软雅黑' color=''#36F'>" +
// clouddata._name + "</font></h3><hr>地址：" +
// clouddata._address + "<br>" + "创建时间：" +
// clouddata._createtime + "<br>" + "更新时间：" +
// clouddata._updatetime,
// size: new AMap.Size(300, 0),
// autoMove: true,
// offset: new AMap.Pixel(0, -25)
// });
// infoWindow.open(map, clouddata._location);
// });
});
//云图检索
AMap.plugin(["AMap.CloudDataSearch"], function() {
//画圆
map.plugin(["AMap.MouseTool"],function(){
mouseTool = new AMap.MouseTool(map);
var radios = document.getElementsByName('func');
for(var i=0;i<radios.length;i+=1){
radios[i].onchange = function(e){
//console.log(123)
draw(e.target.value)
}
}
//监听draw事件
AMap.event.addListener(mouseTool,'draw',function(e){
//画圆
if(e.obj.CLASS_NAME=='AMap.Circle') {
var lng = e.obj.getCenter().lng;
var lat = e.obj.getCenter().lat;
var radius = e.obj.getRadius();
overlays = e.obj.getPath();
layObj.push(e.obj);
var searchOptions = {
//map: map, //
panel: 'panel',
keywords: '',
pageSize: 10,
orderBy: '_id:ASC',
autoFitView: false
};
//执行区域搜索
var x = overlays[0].lng;
var x1 = overlays[1].lng;
// console.log(AMap.GeometryUtil.ringArea(overlays))
if (x != x1) {
if (search != null) {
search.clear();
clearMarker();
}
//实例化搜索
search = new AMap.CloudDataSearch("5c80ba987bbf195c07e7888f", searchOptions);
search.searchNearBy([lng, lat], radius, cloudSearch_CallBack);
// search.searchByDistrict('福州市', function(status, result) {
// console.log(status, result);
// });
}
}
//画多边形
if(e.obj.CLASS_NAME=='AMap.Polygon') {
overlays = e.obj.getPath();
layObj.push(e.obj);
overlays.push(overlays[0]);
var searchOptions = {
//map: map, //
panel: 'panel',
keywords: '',
pageSize: 10,
orderBy: '_id:ASC',
autoFitView: false
};
//执行区域搜索
var x = overlays[0].lng;
var x1 = overlays[1].lng;
if (x != x1) {
if (search != null) {
// search.clear();
// clearMarker();
}
//实例化搜索
search = new AMap.CloudDataSearch("5c80ba987bbf195c07e7888f", searchOptions);
search.searchInPolygon(overlays,cloudSearch_CallBack);
}
}
});
//监听map事件
map.on('mousedown',function(){
map.remove(layObj);
layObj = [];
})
// document.getElementById('clear').onclick = function(){
// map.remove(layObj);
// layObj = [];
// }
document.getElementById('closeSearch').onclick = function(){
map.remove(layObj);
layObj = [];
overlays = [];
if(search!=null){
search.clear();
clearMarker()
}
}
document.getElementById('close').onclick = function(){
mouseTool.close(true)//关闭，并清除覆盖物
for(var i=0;i<radios.length;i+=1){
radios[i].checked = false;
}
}
})
});
//成功回调
function cloudSearch_CallBack(status,data){
// console.log(status);
// console.log(data);
clearMarker()
//初始化地图对象，加载地图
var dataArr = data.datas;
// console.log(dataArr)
if(dataArr&&dataArr.length>0) {
var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
for (var i = 0, marker; i < dataArr.length; i++) {
// dataArr[i].type = dataArr[i].industry_code;
var marker = new AMap.Marker({
icon:'//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
position: dataArr[i]._location,
map: map,
// content:' '
label: {content: (i + 1), offset: {x: 0, y: 0}}
});
var photo = [];
if (dataArr[i]._image[0]) {//如果有上传的图片
photo = ['<img width=240 height=100 src="' +
dataArr[i]._image[0]._preurl + '"><br>'];
}
marker.content = "<font face=\"微软雅黑\"color=\"#36F\">" +
dataArr[i]._name + "</font><hr />" + photo.join("") +
"地址：" + dataArr[i]._address + "<br />" +
"联系电话：" + dataArr[i].telephone + "<br />" +
"创建时间：" + dataArr[i]._createtime + "<br />" +
"更新时间：" + dataArr[i]._updatetime;
marker.on('click', markerClick);
//marker.emit('click', {target: marker});
markers.push(marker)
}
// console.log(markers)
$(".poibox").on('click',function(){
var mIndex = $(this).index();
infoWindow.setContent(markers[mIndex].content);
infoWindow.open(map,markers[mIndex].getPosition());
})
}
function markerClick(e) {
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
map.setFitView();
}
//画图
function draw(type){
switch(type){
case 'marker':{
mouseTool.marker({
//同Marker的Option设置
});
break;
}
case 'polyline':{
mouseTool.polyline({
strokeColor:'#80d8ff'
//同Polyline的Option设置
});
break;
}
case 'polygon':{
mouseTool.polygon({
fillColor:'#00b0ff',
strokeColor:'#80d8ff'
//同Polygon的Option设置
});
break;
}
case 'rectangle':{
mouseTool.rectangle({
fillColor:'#00b0ff',
strokeColor:'#80d8ff'
//同Polygon的Option设置
});
break;
}
case 'circle':{
mouseTool.circle({
fillColor:'#00b0ff',
strokeColor:'#80d8ff'
//同Circle的Option设置
});
break;
}
}
}
// 清除 marker
function clearMarker() {
map.remove(markers);
markers=[]
}
</script>
<!--<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>-->
<!--<script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>-->
</body>
</html>
文章
总共 0 条评论