在最近的一个项目中,项目中使用到了高德地图。业务是在地图上呈现多边形(动态生成),然后点击多边形出现对应地域的气象数据。鉴于高德地图的API比较晦涩,在这里总结一些工作中常用的知识点。
地图的引入,展现就不说明了。只总结一些业务逻辑。
一、点标记和信息窗体
点标记和信息窗体往往是同时出现的。有这些小知识点:
(1)点标记和信息窗体一起出现
// 标记
var marker = new AMap.Marker({
position: [116.39,39.9],//marker所在的位置
// map:map//创建时直接赋予map属性
animation:'AMAP_ANIMATION_DROP'
});
marker.setMap(map);
var info = new AMap.InfoWindow({
content:'维度39.9'+'<br />'+'经度116.39',
offset:new AMap.Pixel(0,-28),
});
map.setFitView();//根据地图上添加的覆盖物分布情况,自动缩放地图到合适的视野级别
info.open(map,marker.getPosition());//信息窗体跟随标记
(2)点击地图任意位置出现点标记和信息窗体
// 为地图注册点击事件,获取鼠标点击的经纬度坐标
map.on('click', function(e) {
document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat();
marker.setPosition([e.lnglat.getLng(), e.lnglat.getLat()])//点哪里就出现哪里的标记
// 点击出现标记和信息窗体
var info = new AMap.InfoWindow({
content:"经度:"+e.lnglat.getLng()+'<br />'+'维度:'+e.lnglat.getLat(),
offset:new AMap.Pixel(0,-28)
});
map.setFitView();//根据地图上添加的覆盖物分布情况,自动缩放地图到合适的视野级别
info.open(map,marker.getPosition());
});
marker.setMap(map);//如果不重置,则之前的点标记不会消失
(3)点击标记出现信息窗体
信息窗体自带关闭按钮,关闭后需要再次点击标记出现信息窗体
AMap.event.addListener(marker,'click',function(){
info.open(map,marker.getPosition());
})
(4)多个点标记同时展现在地图上
var markers = [{
position: [116.205467, 39.907761]
}, {
position: [116.368904, 39.913423]
}, {
position: [116.305467, 39.807761]
}];
// 添加一些分布不均的点到地图上,地图上添加三个点标记,作为参照
markers.forEach(function(marker) {
new AMap.Marker({
map: map,
icon: marker.icon,
position: [marker.position[0], marker.position[1]],
offset: new AMap.Pixel(-12, -36)
});
});
二、逆地理编码
逆地理编码也就是将经纬度转化为地理坐标。
使用时,直接引入
var lnglatXY=[116.396574, 39.992706];//地图上所标点的坐标
AMap.plugin('AMap.Geocoder',function(){//回调函数
//实例化Geocoder
geocoder = new AMap.Geocoder({
city: "010"//城市,默认:“全国”
});
//TODO: 使用geocoder 对象完成相关功能
geocoder.getAddress(lnglatXY, function(status, result) {
if (status === 'complete' && result.info === 'OK') { //获得了有效的地址信息: //即,
result.regeocode.formattedAddress
}else{ //获取地址失败 } });
})
实际工作中,点击地图,出现信息窗体和地理位置
//为地图注册click事件获取鼠标点击出的经纬度坐标
var mapmessage = '';
var coordinate = '';
var clickEventListener = map.on('click', function(e) {
//获取坐标
coordinate = e.lnglat.getLng() + ',' + e.lnglat.getLat();
//marker
AMap.plugin('AMap.Geocoder',function(){
var geocoder = new AMap.Geocoder({
city: "010"//城市,默认:“全国”
});
geocoder.getAddress(e.lnglat,function(status,result){
if(status=='complete'){
marker.setPosition([e.lnglat.getLng(),e.lnglat.getLat()])
_this.mapmessage = result.regeocode.formattedAddress;
var info = new AMap.InfoWindow({
content:_this.mapmessage+'<br />'+'维度:'+_this.latID+'<br />'+'经度:'+_this.lngID,
offset:new AMap.Pixel(0,-28),
});
map.setFitView();//根据地图上添加的覆盖物分布情况,
自动缩放地图到合适的视野级别
info.open(map,marker.getPosition());
AMap.event.addListener(marker,'click',function(){
info.open(map,marker.getPosition());
})
}
})
})
搜索服务
类似上图,在地图上搜索时,出现自动搜索,然后点击后自动跳转到对应的地点。代码如下:
首先你要引入AMap.Autocomplete、AMap.PlaceSearch两个插件。我是在src中引入的。
输入框:
<div class="autoclass" style="width:240px">
<input type="text" id="tipinput" name="keyword" value="" placeholder="请输入地址"/>
</div>
//输入提示
var autoOptions = {
input: "tipinput"//使用现象输入的input的id
};
var auto = new AMap.Autocomplete(autoOptions);//输入提示
AMap.event.addListener(auto, "select", select);//注册监听,当选中某条记录时会触发
var placeSearch = new AMap.PlaceSearch({
map: map,
extensions:String,
pageSize:1//显示多少个点
}); //构造地点查询类
function select(e) {
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name); //关键字查询查询
}
以上的代码就能实现搜索,点击跳转了。
这个时候,地图上出现的marker点击后,出现的是name和电话。如果我们需要修改这个弹出窗体,需要再对placeSearch使用markerClick事件:
//搜索后的mark点击事件,与页面打开时保持一致。否则显示地址+电话
AMap.event.addListener(placeSearch, "markerClick", function(e){
marker.setPosition([e.data.location.lng,e.data.location.lat])
_this.mapmessage = e.data.name;
var info = new AMap.InfoWindow({
content:_this.mapmessage+'<br />'+'经度:'+e.data.location.lng+'<br />'+'纬度:'+e.data.location.lat,
offset:new AMap.Pixel(0,-28),
});
map.setFitView();//根据地图上添加的覆盖物分布情况,自动缩放地图到合适的视野级别
info.open(map,marker.getPosition());
AMap.event.addListener(marker,'click',function(){
info.open(map,marker.getPosition());
})
});
如果我们需要清除地图上的点,官网给出的是clear()方法,在实际使用中,我们需要使用placeSearch .render.markerList.clear()来实现
if(placeSearch ){
placeSearch .clear();
if(placeSearch .render){
placeSearch .render.markerList.clear();
}
}
clear方法删除外圈的圆,接着是清空所有的placeSearch 中的点标记。