以下内容涉及到一些简单的接口
使用场景是:通过选择某级别的城市或省份,将该级别下的所有具体地址标注到地图上,该场景适合通过地址查询经纬度
来标记,以下内容为测试代码。刚看了下API写的,学习阶段,仅供参考
使用高德地图,创建应用获得KEY,并通过JS导入。
<!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"/>
<!---->
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=0c64f99ed596762bcb311cf2b6495f81&plugin=AMap.Geocoder"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body >
<div id="container"></div>
<select name="search" style="position: relative;z-index: 100;left: 20%;" id='search'>
<option value='guangzhou'>广州</option>
<option value='shenzhen'>深圳</option>
</select>
<script type="text/javascript">
//新建地图对象
var map = new AMap.Map("container", {
resizeEnable: true
});
var marker_list={};//用于存储各城市的marker,方便根据城市隐藏
//测试数据
var test={'guangzhou':['广州大学','暨南大学'],'shenzhen':['大梅沙','小梅沙']};
//初始创建地理编码对象
var geocoder= new AMap.Geocoder({
city: "guangzhou", //城市,默认:“全国”
radius: 1000
});
</script>
<script type="text/javascript" src="js.max/jquery-3.1.1.min.js">
</script>
<script type="text/javascript">
/**
* @param {Object} lng 经度
* @param {Object} lat 纬度
* @param {Object} title 标记内容
* @param {Object} city 该标记所属的城市
*/
function marker(lng,lat,title,city)
{
var marker = new AMap.Marker({
position:[lng,lat],
title:title,
map:map
});
marker_list[city].push(marker);//将该标记存入JSON中格式如:{'guangzhou':[marker1,marker2]};
//每个标记触发的事件
marker.on('click',function(){
//点击标记触发事件
});
}
$('#search').on('change',function(){
//获取当前选择的城市
var cur_city=$(this).val();
geocoder.setCity(cur_city);//设置地理编码的城市
marker_list[cur_city]=new Array();//为JSON数据创建一个数组,根据城市来存储marker
for(l in test[cur_city])//循环遍历所有城市的数组,为每个点创建一个marker
{
geocoder.getLocation(test[cur_city][l],function(statu,GeocodeResult){
var g=GeocodeResult;
if(statu=='complete')
{//创建该城市的标记存储数组。
for(i in g.geocodes)
{
marker(g.geocodes[i].location.lng,g.geocodes[i].location.lat,g.geocodes[i].formattedAddress,cur_city);
if(i==0)//把地图中心设置在某城市的第一个标注点
{
var lnglat=new AMap.LngLat(g.geocodes[i].location.lng,g.geocodes[i].location.lat);
map.setCenter(lnglat);//设置城市的中心,该参数为LngLat对象
map.setZoom('12');//设置缩放级别,越小,地图越不详细
}
}
//取消除了将要显示的标记,其他城市的标记全部隐藏
marker_list&&(function(){
for(key in marker_list)//每次改变城市,将其他城市的标注全部隐藏,这就是marker_list的作用
{
key!=cur_city&&(function(){
for(i in marker_list[key])
{
console.log(marker_list[key].length);
marker_list[key][i].hide();
}})()
}
})()
}
else
{
console.log('查询地址失败');
}
});
}
})
</script>
</body>
</html>