|
|
地板
楼主 |
发表于 2015-12-11 15:11:47
|
只看该作者
好的,非常乐意
<!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="http://cache.amap.com/lbs/static/main1119.css"/>
<style type="text/css">
.title {
font: 13px 'Microsoft Yahei';
color: #09f
}
.amap-info-content {
font-size: 12px
}
.adcode {
height: 45px;
background-color: #fff;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #969696;
position: absolute;
font-size: 12px;
right: 10px;
bottom: 20px;
border-radius: 3px;
line-height: 45px;
}
</style>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=e1235145c132fab11720c11de549ada8&plugin=AMap.DistrictSearch"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body >
<div id="container"></div>
<div class="adcode">
省：<select id='province' style="width:50px" onchange='amapAdcode.createCity(this.value)'></select>
市：<select id='city' style="width:50px" onchange='amapAdcode.createDistrict(this.value)'></select>
区：<select id='district' style="width:50px" onchange='amapAdcode.createBiz(this.value)'></select>
<select id='biz_area' style="width:100px" hidden="hidden"></select>
</div>
<script type="text/javascript">
function getUrlRequest() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = [url];
if (url.indexOf("?") != -1) {
var str = url.substr(1);
if (str.indexOf("&") != -1) {
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs.split("=")[0]] = unescape(strs.split("=")[1]);
}
} else {
theRequest[str.split("=")[0]] = unescape(str.split("=")[1]);
}
}
return theRequest;
}
var url = getUrlRequest();//2015 12 09 13 40 */
var locations = url.localtions;
var latitude = 34.762978;
var longitude = 113.681942;
if (locations != null) {
var ll = locations.split(",");
latitude = ll[0];
longitude = ll[1];
longitude = parseFloat(longitude);
latitude = parseFloat(latitude);
}
//初始化地图对象，加载地图
var map = new AMap.Map("container", {
resizeEnable: true,
center: [longitude, latitude],//地图中心点
zoom: 14 //地图显示的缩放级别
});
addCloudLayer(); //叠加云数据图层
//addCloudLayer1(); //添加第二个云图数据
function addCloudLayer() {
//加载云图层插件
map.plugin('AMap.CloudDataLayer', function() {
var layerOptions = {
query: {keywords: ''},
clickable: true
};
var cloudDataLayer = new AMap.CloudDataLayer('563ab494e4b034d328aae5a6', layerOptions); //实例化云图层类
cloudDataLayer.setMap(map); //叠加云图层到地图
AMap.event.addListener(cloudDataLayer, 'click', function(result) {
var clouddata = result.data;
var phone = clouddata.telephone.split(" ");
var content = [];
if(phone.length>1){
content=['<a href="tel: '+ phone[0] + '">' + phone[0] + '</a> <a href="tel: '+ phone[1] + '">' + phone[1] + '</a>'];
}else{
content=['<a href="tel: '+ phone[0] + '">' + phone[0] + '</a>'];
}
var photo=[];
if(clouddata._image[0]){//如果有上传的图片
photo=['<img width=240 height=100 src="'+clouddata._image[0]._preurl+'"><br>'];
}
AMap.plugin('AMap.AdvancedInfoWindow',function(){
infoWindow = new AMap.AdvancedInfoWindow({
content: "<div class=\"info-title\">" + clouddata._name + "</div><div class=\"info-content\">"+photo.join("")+"地址：" + clouddata._address + "<br />" + "电话：" + content.join("") + "<br />" + "服务：" + clouddata.sphere+"</div>",offset: new AMap.Pixel(0, -35)
});
})
infoWindow.open(map, clouddata._location);
});
var cloudDataLayer1 = new AMap.CloudDataLayer('563aca86e4b034d328ac0d3b', layerOptions); //实例化云图层类
cloudDataLayer1.setMap(map); //叠加云图层到地图
AMap.event.addListener(cloudDataLayer1, 'click', function(result) {
var clouddata = result.data;
var phone = clouddata.telephone
var content = [];
content=['<a href="tel: '+ phone + '">' + phone + '</a>'];
var photo=[];
/* if(clouddata._image[0]){//如果有上传的图片
photo=['<img width=240 height=100 src="'+clouddata._image[0]._preurl+'"><br>'];
} */
AMap.plugin('AMap.AdvancedInfoWindow',function(){
infoWindow = new AMap.AdvancedInfoWindow({
content: "<div class=\"info-title\">" + clouddata._name + "</div><div class=\"info-content\">"+photo.join("")+"地址：" + clouddata._address + "<br />" + "电话：" + content.join("") + "<br />" + "服务：" + clouddata.sphere+"</div>",
size: new AMap.Size(0, 0),
autoMove: true,
offset: new AMap.Pixel(0, -35)
});
})
infoWindow.open(map, clouddata._location);
});
});
}
var amapAdcode = {};
amapAdcode._district = new AMap.DistrictSearch({//高德行政区划查询插件实例
subdistrict: 1 //返回下一级行政区
});
amapAdcode._overlay = [];//行政区划覆盖物
amapAdcode.createSelectList = function(selectId, list) {//生成下拉列表
if(selectId == "province"){
var geocoder;
var lnglatXY=new AMap.LngLat(longitude,latitude);
//加载地理编码插件
map.plugin(["AMap.Geocoder"],function(){
geocoder=new AMap.Geocoder({
//radius:1000, //以已知坐标为中心点，radius为半径，返回范围内兴趣点和道路信息
//extensions: "all"//返回地址描述以及附近兴趣点和道路信息，默认"base"
});
//返回地理编码结果
AMap.event.addListener(geocoder, "complete",function(data){
var address ="";
var province = "";
var city = "";
//返回地址描述
address = data.regeocode.addressComponent;
province = address.province;
city = address.city;
var selectList = document.getElementById(selectId);
selectList.innerHTML = '';
selectList.add(new Option(province));
for (var i = 0, l = list.length, option; i < l; i++) {
option = new Option(list.name);
option.setAttribute("value", list.adcode)
selectList.add(option);
}
//alert(province+"......"+city);
});
//逆地理编码
geocoder.getAddress(lnglatXY);
});
}else{
var selectList = document.getElementById(selectId);
selectList.innerHTML = '';
selectList.add(new Option("--请选择--"));
for (var i = 0, l = list.length, option; i < l; i++) {
option = new Option(list.name);
option.setAttribute("value", list.adcode)
selectList.add(option);
}
}
}
amapAdcode.search = function(adcodeLevel, keyword, selectId) {//查询行政区划列表并生成相应的下拉列表
var me = this;
if (adcodeLevel == 'district'||adcodeLevel == 'city') {//第三级时查询边界点
this._district.setExtensions('all');
} else {
this._district.setExtensions('base');
}
this._district.setLevel(adcodeLevel); //行政区级别
this._district.search(keyword, function(status, result) {//注意，api返回的格式不统一，在下面用三个条件分别处理
var districtData = result.districtList[0];
if (districtData.districtList) {
me.createSelectList(selectId, districtData.districtList);
} else if (districtData.districts) {
me.createSelectList(selectId, districtData.districts);
} else {
document.getElementById(selectId).innerHTML = '';
}
map.setCenter(districtData.center);
me.clearMap();
//me.addPolygon(districtData.boundaries);
});
}
amapAdcode.search1 = function(adcodeLevel, keyword, selectId) {//查询行政区划列表并生成相应的下拉列表
var me = this;
if (adcodeLevel == 'district'||adcodeLevel == 'city') {//第三级时查询边界点
this._district.setExtensions('all');
} else {
this._district.setExtensions('base');
}
this._district.setLevel(adcodeLevel); //行政区级别
this._district.search(keyword, function(status, result) {//注意，api返回的格式不统一，在下面用三个条件分别处理
var districtData = result.districtList[0];
if (districtData.districtList) {
me.createSelectList(selectId, districtData.districtList);
} else if (districtData.districts) {
me.createSelectList(selectId, districtData.districts);
} else {
document.getElementById(selectId).innerHTML = '';
}
//当前位置
var marker2 = new AMap.Marker({
icon: "http://webapi.amap.com/theme/v1.2/0.png",
position new AMap.LngLat(longitude,latitude)),
draggable:true, //点标记可拖拽
cursor:'move' //鼠标悬停点标记时的鼠标样式
});
marker2.setMap(map);
marker2.setAnimation('AMAP_ANIMATION_BOUNCE');
//map.setCenter(districtData.center);
me.clearMap();
//me.addPolygon(districtData.boundaries);
});
}
amapAdcode.clearMap = function(selectId) {//清空地图上的覆盖物
map.remove(this._overlay);
this._overlay = [];
}
amapAdcode.addPolygon = function(boundaries) {//往地图上添加覆盖物
if (boundaries) {
for (var i = 0, l = boundaries.length; i < l; i++) {
//生成行政区划polygon
var polygon = new AMap.Polygon({
map: map,
path: boundaries
});
this._overlay.push(polygon);
}
map.setFitView();//地图自适应
}
}
amapAdcode.clear = function(selectId) {//清空下拉列表
var selectList = document.getElementById(selectId);
selectList.innerHTML = '';
}
amapAdcode.createProvince = function() {//创建省列表
this.search1('country', '中国', 'province');
}
amapAdcode.createCity = function(provinceAdcode) {//创建市列表
this.search('province', provinceAdcode, 'city');
this.clear('district');
this.clear('biz_area');
}
amapAdcode.createDistrict = function(cityAdcode) {//创建区县列表
this.search('city', cityAdcode, 'district');
this.clear('biz_area');
}
amapAdcode.createBiz = function(districtAdcode) {//创建商圈列表
this.search('district', districtAdcode, 'biz_area');
}
amapAdcode.createProvince();
</script>
</body>
</html> |
|
发表于 2015-12-9 15:59:48
收藏
发表于 2015-12-10 20:51:21
