【云图】如何制作东莞酒店地图？

哈丫 · 发表于 2014-8-27 14:29:38

本帖最后由 catalina007 于 2014-8-27 14:32 编辑

摘要：今天到深圳参加第二届电博会，果然不像车展或者漫展那样，会有萌妹纸，大家都好素净。晚上去东莞玩一圈，发现订不到酒店啊！各种商业中心关闭啊。于是想，那自己制作一张东莞酒店地图玩玩吧。于是在咖啡厅开始写代码，顺便等别人把酒店定好……啊，我果然是程序猿的命麽？！嗯，回到主题，制作好酒店地图，需要增加功能，就是按照星级，或者行政区进行分类查询检索。而且，还可以在云图上任意增减数据。真是出门在外居家旅行必备佳品，哈哈。

---------------------------------------------------------------------------------------

最终效果如下：

第一步，数据准备。

将东莞酒店的数据准备好。酒店数据来源于互联网，数据太多，只摘取部分。

注意，将数据格式保存为CSV。

注意，第一行必须是字段名，只能是字母、数字和下划线，并且不能以数字开头。

注意，经纬度必须分开成2个字段！

注意，文件只支持 .csv 格式、UTF-8编码，数据量不超过 10,000 条，文件大小不超过10M、字段总数不超过 40 个。

字段命名规则：以英文字母开头，仅由英文字母、数字、下划线组成，字段名长度不超过20位。

name,address,district,starlevel,description,image
东莞太子酒店,中国广东省东莞市黄江镇江北路,黄江镇,五星,"东莞豪京酒店隶属日源（香港）企业有限公司，是集住房、餐饮、休闲、娱乐为一体的现代化涉外商务酒店。酒店位于东莞市厚街镇中心S256省道旁，厚街车站近在咫尺，地理位置优越，交通便利。
东莞豪京酒店设有豪华客房，菜肴精美而富有特色的亚洲风情餐厅，设备完善的康娱设施；其尊贵的气派，幽雅的欧陆设计、细腻殷勤的款客态度，以及占尽地利的优越位置，诚然是宾客的最佳选择，更不愧为阳光之都，精品会所，让您尽情享受温馨与惬意。东莞豪京酒店将以专业的服务期待您的光临。
",http://a.hiphotos.baidu.com/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=6543a5053bf33a878a600848a7357b5d/738b4710b912c8fc73b4d0f8fd039245d788d43f87940983.jpg

复制代码

第二步，上传数据至云图。

打开云图管理台，http://yuntu.amap.com/datamanager/index.html

点击添加地图->导入数据，把刚才的CSV文件导入进来。

第三步，建立索引。

在文本索引和筛选排序索引处，都建立关于星级，还有行政区域的索引。这是为了能够实现云检索。

第四步，云图的渲染。

记录云图层的id，简单写代码即刻渲染。

云图渲染代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>叠加云数据图层</title>
<link rel="stylesheet" type="text/css" href="http://api.amap.com/Public/css/demo.Default.css" />
<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=【Your Key】"></script>
</head>
<body onLoad="mapInit()">
<div id="iCenter"></div>
<div id="info" style="padding:2px 0px 0px 5px;font-size:12px; color:red;height:20px"></div>
</body>
<script language="javascript">
var mapObj;
//初始化地图对象，加载地图
function mapInit(){
mapObj = new AMap.Map("iCenter",{center:new AMap.LngLat(116.39946,39.907629),level:12});
addCloudLayer();
}
//叠加云数据图层
function addCloudLayer() {
//加载云图层插件
mapObj.plugin('AMap.CloudDataLayer', function () {
var layerOptions = {
query:{keywords: '公园'},
clickable:true
};
var cloudDataLayer = new AMap.CloudDataLayer('532b9b3ee4b08ebff7d535b4', layerOptions); //实例化云图层类
cloudDataLayer.setMap(mapObj); //叠加云图层到地图
});
}
</script>
</html>

复制代码

如果要加上信息窗口的展示，就给云图层加上点击事件。当点击云图层时，弹出信息窗口，代码：

AMap.event.addListener(cloudDataLayer, 'click', function (result) {
var clouddata = result.data;
var infoWindow = new AMap.InfoWindow({
content:"<h3><font face=\"微软雅黑\"color=\"#3366FF\">"+ 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,-5)
});
infoWindow.open(mapObj, clouddata._location);
});

复制代码

第五步，云索引。

建立检索就能直接返回云图层了。如果要返回数据，需要使用云检索，比如区域检索。

注意：云图层api和云检索api都有过滤数据和检索数据的功能，所以都要用到索引，但是云图层返回的结果是图，云检索返回的是数据。

//多边形检索函数
function cloudSearch() {
mapObj.clearMap();
var arr = new Array();
//绘制多边形
arr.push(new AMap.LngLat(116.386414,39.920664));
arr.push(new AMap.LngLat(116.411648,39.922244));
arr.push(new AMap.LngLat(116.413879,39.906708));
arr.push(new AMap.LngLat(116.398087,39.904074));
arr.push(new AMap.LngLat(116.383667,39.912633));
arr.push(new AMap.LngLat(116.386414,39.920664));
var polygon = new AMap.Polygon({
map:mapObj,
path:arr,
strokeColor:"#3366FF",
strokeOpacity:0.2,
strokeWeight:2,
fillColor: "#3366FF",
fillOpacity: 0.2
});
var search;
var searchOptions = {
keywords:'公园',
orderBy:'_id:ASC'
};
//加载CloudDataSearch服务插件
mapObj.plugin(["AMap.CloudDataSearch"], function() {
search = new AMap.CloudDataSearch('532b9b3ee4b08ebff7d535b4', searchOptions); //构造云数据检索类
AMap.event.addListener(search, "complete", cloudSearch_CallBack); //查询成功时的回调函数
AMap.event.addListener(search, "error", errorInfo); //查询失败时的回调函数
search.searchInPolygon(arr); //多边形检索
});
}

复制代码

大功告成！夜晚东莞更美丽！耶耶耶~~~~

写完代码不容易，放送一下今日觉得最素的萌妹纸，觉得很像山楂树的女主角。

全部源代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="三星四星五星东莞酒店">
<title>东莞酒店分布图</title>
<link rel="stylesheet" type="text/css" href="http://api.amap.com/Public/css/demo.Default.css" />
<style type="text/css">
#iCenter{
width:600px;
height:400px;
border:1px solid #F6F6F6;
}
br strong{
color:red;
}
.jiudianpng{
float:right;
height:200px;
margin:0 auto;
width:100%;
}
</style>
<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=cd24309ecc6ac333e0d4f3985f55dcbe"></script>
</head>
<body onLoad="mapInit()">
<br/>
<h1>
<font color="pink">东莞酒店分布图</font>
<img src="http://img.taopic.com/uploads/allimg/120119/2443-12011913310994.jpg" style="width:50px;height:30px;float:left"/>
</h1>
（数据来源于网络，仅供参考哦 >_<）
<br/>
<strong>
<form id="selectStarLevel">
<strong> 请选择酒店星级 </strong>
<input type="checkbox" name="StarLevel" value="五星" onclick="getStarLevel('')" checked /> 五星
<input type="checkbox" name="StarLevel" value="四星" onclick="getStarLevel('')" checked /> 四星
<input type="checkbox" name="StarLevel" value="三星" onclick="getStarLevel('')" checked /> 三星
<strong> 选择行政区 </strong>
<select name="district" id="district" onchange="changeSelSearch(this.value);" >
<option value="none" selected style="color:black">所有</option>
</select>
</form>
</strong>
<p>------------------------------------------------------------------</p>
<div id="iCenter"></div>
<div id="info" style="padding:2px 0px 0px 5px;font-size:12px; color:red;height:20px"></div>
</body>
<script language="javascript">
var starLevelArr = new Array();
var mapObj;
var starLayers = new Array();
// var districts = new Array();
var districts = new Array('黄江镇','莞城区','塘厦镇','长安镇','沙田镇','南城区','虎门','石碣镇','东城区','常平镇','寮步镇','厚街镇','桥头镇','洪梅镇','东城区','企石镇','清溪镇','凤岗镇','高埗镇','大朗镇','万江镇','横沥镇','东坑镇');
// var keywords;
// var cloudDataLayer;
function addOpts(arr){
// 显示带有自定义文本选项的select
var selObj = document.getElementById("district");
// 添加input的选项
for(i=0;i<arr.length;i++)
{
var op = document.createElement("option");
op.appendChild(document.createTextNode(arr[i]));
op.setAttribute("value",arr[i]);
op.setAttribute("style","color:black");
selObj.appendChild(op);
}
// var op = document.createElement("option");
// op.appendChild(document.createTextNode("其他"));
// op.setAttribute("value",'others');
// selObj.appendChild(op);
}
/*
*初始化地图对象，加载地图
*/
function mapInit(){
mapObj = new AMap.Map("iCenter",{center:new AMap.LngLat(113.3833,22.9),level:12});
var arr = new Array();//经纬度坐标数组
arr.push(new AMap.LngLat(113.5167 ,22.65));
arr.push(new AMap.LngLat(113.5167,23.15));
arr.push(new AMap.LngLat(114.25,23.15));
arr.push(new AMap.LngLat(114.25,22.65));
arr.push(new AMap.LngLat(113.5167 ,22.65));
var polyline = new AMap.Polyline({
map:mapObj,
path:arr,
strokeColor:"#F00",
strokeOpacity:0.4,
strokeWeight:3,
strokeStyle:"dashed",
strokeDasharray:[10,5]
});
//调整视野到合适的位置及级别
mapObj.setFitView();
// 显示带有自定义文本选项的select
addOpts(districts);
var items = document.getElementsByName("StarLevel");
for(i = 0; i < items.length; i++){
//加载云数据图层插件
mapObj.plugin('AMap.CloudDataLayer',InitLayer(starLayers,i));
}
}
function InitLayer(newLayer,i){
//实例化一个云图层对象，设置数据表id
addCloudLayer('','',newLayer,i);
}
function getStarLevel(){
searchHotel();
}
function getDistrict(){
var mysel = document.getElementById('district').value;
if('none' == mysel){
mysel = '';
}
// if('others' == mysel){
// mysel = '';
// }
return mysel;
}
function changeSelection(maplayers,i,starlevel,district)
{
var starlevelfilter = 'starlevel:'+starlevel;
var districtfilter = 'district:'+district;
var queryfilter = starlevelfilter + '+' + districtfilter;
var op={
query:{filter:queryfilter}
}
maplayers[i].setOptions(op);
maplayers[i].setMap(mapObj);
}
function changeSelSearch(value){
searchHotel();
}
function searchHotel(){
var items = document.getElementsByName("StarLevel");
var len = items.length;
for (i = 0; i < len; i++) {
if (true == items[i].checked) {
starLevelArr[i] = items[i].checked;
district = getDistrict();
changeSelection(starLayers,i,items[i].value,district);
}else{
if(null!= starLayers[i])
{
delCloudLayer(starLayers,i);
}
}
}
}
/*
*根据查询结果
*去除云数据图层
*/
function delCloudLayer(maplayers,i) {
maplayers[i].setMap(null); //去除地图上的运图层
}
/*
*根据查询结果
*叠加云数据图层
*/
function addCloudLayer(levelofstar,seldistrict,maplayers,i) {
//加载云图层插件
var starlevelfilter = 'starlevel:'+levelofstar;
var districtfilter = 'district:'+seldistrict;
var queryfilter = starlevelfilter + '+' + districtfilter;
mapObj.plugin('AMap.CloudDataLayer', function () {
var layerOptions = {
query:{filter: queryfilter},
clickable:true
};
// maplayers[i] = undefined;
maplayers[i] = new AMap.CloudDataLayer('53465d24e4b01214f369d491', layerOptions); //实例化云图层类
maplayers[i].setMap(mapObj); //叠加云图层到地图
AMap.event.addListener(maplayers[i], 'click', function (result) {
var clouddata = result.data;
var imgurl=""
if(clouddata.image!=""){
imgurl=clouddata.image
}else{
imgurl="http://wenwen.soso.com/p/20090808/20090808091931-861961308.jpg"
}
var infoWindow = new AMap.InfoWindow({
content:"<h3><font face=\"微软雅黑\"color=\"#3366FF\">"+ clouddata._name +"</font></h3><hr />地址："+
clouddata._address + "<br />" + "行政区：" + clouddata.district+ "<br /><strong>" + "星级：<font color='red'>" + clouddata.starlevel+"</font></strong><br /><strong>" + "酒店描述：" +clouddata.description+ "</strong><img class='jiudianpng' src="+imgurl+"></img><br />" ,
size:new AMap.Size(300, 0),
autoMove:true,
offset:new AMap.Pixel(0,-5)
});
infoWindow.open(mapObj, clouddata._location);
});
});
}
</script>
</html>

复制代码

demo展示：
http://zhaoziang.com/amap/dongguan.html

效果：

htwyqjj · 发表于 2014-9-10 10:51:03

那么多demo
下面做项目方便了~

用户名		自动登录	找回密码
密码			立即注册