最近有个邀请函的需求，其中有一个地点选择的需求。大致的流程是：
信息填写页 - (点击) - 地图选择页面 -(搜索选择地点后返回) - 数据自动填充到信息页面
之前没有接触过基于地图API的开发，目前国内的主流的两款地图软件也就高德和百度，简单看了下两个的API文档，最后选择高德，个人感觉高德的API文档写的要好点。
开始
高德地图有很多，我们这里选择的是JavaScript API，要使用某个具体的首先要申请key，然后就可以在页面引入API文件了：
引入插件
这里需要用到高德的三个插件:AMap.CitySearch 城市查询插件
AMap.Autocomplete 输入提示插件
AMap.PlaceSearch 地点选择插件
插件加载方式
插件有两种加载方式，一种是在引入API时通过添加参数来实现
另外一种是在代码中通过AMap.plugin方法来使用(PlaceSearch用的是AMap.service方法,一些其他插件也有使用此方法的，搞不太明白差别)
AMap.plugin('AMap.Autocomplete',function(){//回调函数
//实例化Autocomplete
var autoOptions = {
city: "", //城市，默认全国
input:"input_id"//使用联想输入的input的id
};
autocomplete= new AMap.Autocomplete(autoOptions);
//TODO: 使用autocomplete对象调用相关功能
})
个人感觉还是第一种方式更灵活一些。
初始化
初始化地图容器
要使用地图需要指定页面中的某元素为地图容器，通过Amap.Map方法来创建容器
var map = new AMap.Map('container',{
zoom: 10,
center: [116.39,39.9]
});需要特别注意的是这里的map需要是全局的或者要暴露给全局，因为高德地图的http://cache.amap.com/lbs/static/addToolbar.js中需要使用map。所以最好的方法是在初始化后挂在window上
window.map = map;
初始化输入提示
var auto = new AMap.Autocomplete({
input: 'tipinput' // 绑定输入提示框元素id
});
初始化搜索
var placeSearch = new AMap.PlaceSearch({ //构造地点查询类
pageSize: 5,
pageIndex: 1,
city: "010", //城市
map: map,
panel: "result" // 搜索结果显示列表绑定元素的id
});
//关键字查询
placeSearch.search('方恒', function(status, result) {
});实际项目中更多的是输入提示和搜索结合起来使用，本项目中就是这样用的，在输入时使用输入提示插件，然后当点击提示列表中的某一项时调用搜索。
AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){
var autoOptions = {
city: "北京", //城市，默认全国
input: "input"//使用联想输入的input的id
};
autocomplete= new AMap.Autocomplete(autoOptions);
var placeSearch = new AMap.PlaceSearch({
city:'北京',
map:map
});
AMap.event.addListener(autocomplete, "select", function(e){
//TODO 针对选中的poi实现自己的功能
placeSearch.search(e.poi.name)
});
});
填充默认值邀请函填写页面的逻辑是用户切换到地点输入一栏时直接跳转到地图页面，也就是说初次跳到地图页面是没有带搜索关键词的，所以需要一个默认值，这里我选择的是当前城市名称作为默认关键词。而这就要先获取到当前城市。
定位到当前行政区
关于定位到当前位置有许多种定位方式，大致看了一下每种定位方式的用法，最终选择选择了ip定位，因为相较其他之中没有过多限制，实现起来也相对简单。
//实例化城市查询类
var citysearch = new AMap.CitySearch();
//自动获取用户IP，返回当前城市
citysearch.getLocalCity(function(status, result) {
if (status === 'complete' && result.info === 'OK') {
if (result && result.city && result.bounds) {
var cityinfo = result.city;
var citybounds = result.bounds;
}
}
});
核心业务逻辑大致的业务逻辑为首先一进来先解析URL，然后获取其中关键词进行搜索，搜索结果返回后为每一项绑定点击事件，点击后即进行新一轮搜索。
核心代码:
// 获取当前城市名称
function currentCityInfo() {
return new Promise(function (resolve, reject) {
//实例化城市查询类
var citysearch = new AMap.CitySearch();
//自动获取用户IP，返回当前城市
citysearch.getLocalCity(function (status, result) {
if (status === 'complete' && result.info === 'OK') {
if (result && result.city) {
resolve(result);
}
} else {
reject(new Error(result.infocode));
}
});
})
}
// 关键词搜索
function chooseLocation(keyword, adcode) {
return new Promise(function (resolve, reject) {
//接收url中传入的搜索值
AMap.service(['AMap.PlaceSearch'], function () {
//关键字查询
var placeSearch = initSearch();
placeSearch.setCity(adcode || '100000');
placeSearch.search(keyword, function (status, result) {
if (status === 'complete' && result.info === 'OK') {
resolve(result);
} else {
reject(new Error(result.info));
}
});
});
})
};
if (location.search.indexOf("&") !== -1) // 如果不是初次搜索，展示上次搜索结果
return decodeURIComponent(location.search.substr(1).split("&")[0].split('=')[1]);
else { // 首次搜索，首先获取当前城市
currentCityInfo()
.then(function (data) {
return function () {
return data.city;
}
}, function (error) { console.log(error); })
.then(function (data) {
chooseLocation(data())
.then(function (data) {
var poiArr = data.poiList.pois,
resultCount = poiArr.length;
markerPoints = []; // 清空上次搜索的数据
for (var i = 0; i < resultCount; i++) {
addMarker(poiArr[i]);
}
point = markerPoints[0];
setStorage(poiArr[0].name, getImgUrl());
//注册监听，当选中某条记录时会触发
AMap.event.addListener(auto, "select", function (e) {
chooseLocation(e.poi.name, e.poi.adcode).then(function (data) {
var poiArr = data.poiList.pois,
resultCount = poiArr.length;
markerPoints = []; // 清空上次搜索的数据
for (var i = 0; i < resultCount; i++) {
addMarker(poiArr[i]);
}
}); // 选中某条纪录后再次触发搜索,重新绘制地图
});
return data;
}, function (error) {
console.log(error);
}).then(function () {
// panel列表项切换
document.getElementById('panel').addEventListener('click', clickItem, false);
}, function (error) {
console.log(error);
})
})
}
静态地图
地图组件最终返回的具体的地点和一张静态地图。对于静态地图的获取需要用到高德地图的Web服务API，首先要申请Web服务API的key。然后要做的就是依照规范拼接出URL。常用的请求参数：
* key: 用户申请的key
* location：地图的中心点坐标
* zoom：缩放级别，范围为［1，19］(官方文档中写的是[1,17],但实际最大可以到19)
* size：地图大小
* markers：标注
markers：在众多的参数中，最终决定地图绘制的即我们需要自己去通过一步步构造的为markers(labels和paths也很常用，但是项目中没有用到，原理类似不做讨论)格式:
markers=markersStyle1:location1;location2..|markersStyle2:location3;location4..|markersStyleN:locationN;locationM..
location为经纬度信息，经纬度之间使用”,”分隔，不同的点使用”;”分隔。 markersStyle可以使用系统提供的样式，也可以使用自定义图片。
markersStyle参数:size:值small mid large
color: 颜色
label: [0-9]、[A-Z]、[单个中文字] (当size为small时不展现标注名)
题图：
李宗盛《理性与感性作品音乐会》专辑封面 理性与感性 作品音乐会专辑
参考：
2381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
