今天要实现的功能就是：
1、在地图上添加几个input 的 type 为checkbox 的代码。 注意是好几个checkbox。
2、选中复选框， 在地图上简标注marker， 取消选中复选框和不选中复选框， 则地图上没有标注对应地名的marker。
3、不使用坐标， 而是使用的地名， 比如说通过"银河SOHO"字符串， 转化出坐标， 然后在地图上标注marker。
image
碰到的问题
1、首先， 我在高德开发平台上面拷下来的关于POI的代码， 在本地无论如何都运行不了。
控制台也不报错， 找了好久的问题， 结果发现就是密钥的问题。查找了很久， 结果是密钥出了问题。
我自己申请的是b开头的。
半天没有反应， 结果在网上找到别人的Key 值是c开头的就可以了。就是这个key值 c93e1e293e5b1c3dc581f3ff633144d3 。真真的是救了我的命呀。
2、在高德开发平台上选择事例的问题。
我在placeSearch.search("辽宁大厦")这种方法上面费了很大的劲。用这个方法能搜出来一堆的点的位置， 可以选取的就是数组的第一个的点的位置。 如下就是得到了第一个点的位置。
placeSearch.search("辽宁大厦", function (status, result ) {
//下图标号为1的坐标 console.log(result.poiList.pois[0].location.lng); console.log(result.poiList.pois[0].location.lat);});
image
另一种方法就是高德的 **开发指南 **里的 **地址与经纬度 **里的 根据地址查询经纬度(地理编码)；下面实例代码的连接：
高德JavaScript API提供AMap.Geocoder服务插件来完成这地理编码和逆地理编码，
地理编码 ：需要将地址描述转化为经纬度；
逆地理编码 ： 或将经纬度转化为地址描述。
3、创建的marker和对应的input的checkbox怎么对应起来？
循环做了多个marker， 删除其中的确定的一个的参考链接， 如下。 跟我碰到的问题是一样样的。
http://bbs.lbsyun.baidu.com/forum.php?mod=viewthread&tid=1371
解决办法：把所有的marker添加到数组里面，给marker这个属性赋个值 setTitle(title:String) ，这样每一个marker都是一个特殊的个体， 循环marker数组，找到对应的marker删除即可。
4、input 的checkbox的选中与未选中的状态。
image
image
$("#IsAdmin").is(':checked') 判断收否选中 返回true 或者false， 这个对单个的input checkbox有用， 多个就不管用了。
我这里面采用的是 input checkbox 对象的checked属性，来进行判断是否选中。
image
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<style type="text/css">
body,html,#container{
height: 100%;
margin: 0px;
font-size: 12px;
}
body {
font-size: 12px;
}
#container{
margin-top: 30px;
}
</style>
<title>地理编码</title>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
</head>
<body>
<div class = "chooseShow">
<label><input name="银河SOHO" type="checkbox" value="0" />银河SOHO</label>
<label><input name="北京师范大学" type="checkbox" value="1" />北京师范大学</label>
<label><input name="清华大学" type="checkbox" value="" />清华大学</label>
<label><input name="北京站" type="checkbox" value="" />北京站</label>
</div>
<div id="container" tabindex="0"></div>
<script src="http://webapi.amap.com/maps?v=1.4.3&key=c93e1e293e5b1c3dc581f3ff633144d3"></script>
<script type="text/javascript">
var map = new AMap.Map('container',{
resizeEnable: true,
zoom: 13,
center: [116.39,39.9]
});
AMap.plugin('AMap.Geocoder',function(){
var geocoder = new AMap.Geocoder({
city: "010"//城市，默认：“全国”
});
var markers = [];
$(".chooseShow input").click(function () {
var address = $(this).parent().text();
//console.log($(this)[0]);
//获得当前的input的checked属性是否为选中的状态, $(this)是一个数组
if ( $(this)[0].checked == true ){
console.log("选中");
geocoder.getLocation(address,function(status,result){
if(status=='complete' && result.geocodes.length){
/*地址的数组里面添加坐标*/
var addr = result.geocodes[0].location;
//console.log(typeof addr);
var marker = new AMap.Marker({
map:map,
bubble:true
});
marker.setTitle(address);
marker.setPosition(result.geocodes[0].location);
map.setCenter(marker.getPosition());
markers.push(marker);
console.log(markers);
//document.getElementById('message').innerHTML = '';
}else{
//document.getElementById('message').innerHTML = '获取位置失败';
}
});
}else{
console.log("未选中");
//删除地图上的marker, 遍历marker,
for( var i = 0; i < markers.length; i ++){
//console.log( markers[i].getTitle() + "title" );
// 未选中的input checkbox 的address 和 marker的 title 比较
if(markers[i].getTitle() == address ){
markers[i].setMap(null);
}
}
}
});
});
</script>
<script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
<script>
</script>
</body>
</html>
网友评论