概述
在开发项目过程中，有许多场景需要用到定位，地图展示坐标点等多个功能，这时候就需要引入第三方地图，本文展示的是使用高德地图的示例。
引入
首先需要引入官方提供的script，需要准备事先申请的地图key值
<script src="//webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
创建地图实例
AMap.Map(arg1,arg2), arg1为地图容器的ID,arg2为地图的配置内容.
var map = new AMap.Map('near_station', {
resizeEnable: true,
zoom: 12,
rotateEnable: false,
});
定位
在地图上定位自己的坐标，项目要求退出重进时，要求定位在退出时的位置，因代码量，暂时仅展示定位自身位置，后续可加
map.plugin('AMap.Geolocation', function() {
geolocation = new AMap.Geolocation({
showButton: false,
enableHighAccuracy: true,//是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：无穷大
buttonOffset: new AMap.Pixel(10, 150),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
zoomToAccuracy: false, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
});
map.addControl(geolocation);
/*var lnglat=[locallng,locallat]
map.panTo(lnglat);*/ //设定上次退出时为中心点
geolocation.getCurrentPosition(); //设定自身坐标为中心点
AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
});
搜索
输入关键字，联想相关地点
AMap.service('AMap.PlaceSearch', function () {
var searchString = $("#pre-search-input").val();
var placeSearch = new AMap.PlaceSearch({
//构造地点查询类
pageSize: 5,
pageIndex: 1,
city: "杭州", //城市,
extensions: 'all'
});
//关键字查询
placeSearch.search(searchString, function (status, result) {
$('.pre-search-list').html('');
if (result.info == 'OK') {
var html = '';
var pois = result.poiList.pois;
for (var i = 0; i < pois.length; i++) {
var item = pois[i];
var pca = item.pname + item.cityname + item.adname;
var lng = item.location.lng;
var lat = item.location.lat;
html += "<div class=\"weui-cell pre-search-item\" lng=\"" + lng +
"\" lat=\"" + lat +
"\" style=\"height: 55px\"> <div style=\"width: 35px; height: 35px;margin-top: 5px;float: left;\"></div> <div style=\" height: 35px;background: white;line-height: 18px;font-size: 15px;padding-top: 2px\"> <div>" +
item.name +
"</div> <div style=\"font-size: 12px;color: grey\">" + pca +
"</div> </div> <img style=\"position: absolute;right: 10px;top: 22px;z-index: 2;\" alt=\"\"></div>"
}
$('.pre-search-list').html(html);
$(".pre-search-item").unbind('click');
$(".pre-search-item").click(function () {
$('.pre-search').hide();
map.panTo([$(this).attr('lng'), $(this).attr('lat')]);
var osize = new AMap.Size(32, 32);
var myIcon = new AMap.Icon({
imageSize: osize,
image: "../../images/position_img.png",
});
var marker = new AMap.Marker({
icon: myIcon,
zIndex: 1000,
});
marker.setPosition([$(this).attr('lng'), $(this).attr('lat')]);
marker.setMap(map);
})
} else {
}
});
});
海量点
覆盖物过多时，使用单个覆盖物一个个加载效率过慢，此时可以使用海量点加载
var style = [{
//海量点构造样式
url: '../../images/replaceCabinet_green.png', //海量点替换图片
anchor: new AMap.Pixel(15, 30), //图标显示位置偏移量，基准点为图标左上角
size: new AMap.Size(40, 40), //图标尺寸
},{
url: '../../images/replaceCabinet_grey.png',
anchor: new AMap.Pixel(15, 30),
size: new AMap.Size(40, 40),
}];
//通过接口获取覆盖物的经纬度list
$.ajax({
type: 'POST',
url: '/XXXX/XXXXXX/XXXXXXXX',
data: data,
success: function (data) {
list=data.data;
$.each(list, function (i,n) {
n.lnglat = [n.lng, n.lat]
if(n.cabinetType==0){
//将上面style样式添加到list中，style是个数组，所以从0开始
n.style = 0;
}else{
n.style = 1;
}
})
},
error: function (data) {
weui.alert("网络错误,请重试")
},
矩形围栏绘制
绘制矩形围栏，项目要求绘制一个矩形围栏，要求绘制完可以知道围栏中覆盖物的数量
var rectangle;
var countsM = 0;
// 事件绑定
function StatisticalclickOn() {
console.log("开始绘制 !");
map.on('click', recordPoint);
$('#StatisticalclickOn').hide()
$('#StatisticalclickOff').show()
}
// 解绑事件
function StatisticalclickOff() {
console.log("清除绘制 !");
countsM=0;
map.off('click', recordPoint);
$('#StatisticalclickOn').show()
$('#StatisticalclickOff').hide()
if (rectangle) {
rectangle.setMap(null)
southWestLat = null
southWestLng = null
northEastLng = null
northEastLat = null
document.querySelector(".counts").innerText = '(0)';
$('.input-card').hide()
}
}
function recordPoint(e) {
if (southWestLng == null && southWestLat == null) {
southWestLng = e.lnglat.getLng()
southWestLat = e.lnglat.getLat()
var icon = new AMap.Icon({
imageSize: new AMap.Size(30, 30),
image: "../../images/location.png",
});
firstPoint = new AMap.Marker({
icon: icon,
position: [southWestLng, southWestLat],
offset: new AMap.Pixel(-13, -30),
});
firstPoint.setMap(map);
if (rectangle) {
rectangle.setMap(null)
rectangle = null
}
} else {
northEastLng = e.lnglat.getLng()
northEastLat = e.lnglat.getLat()
setRectangle()
southWestLat = null
southWestLng = null
northEastLng = null
northEastLat = null
if (firstPoint) {
firstPoint.setMap(null)
firstPoint = null
}
}
}
function setRectangle() {
//获取绘制开始时的起始点
var southWest = new AMap.LngLat(southWestLng, southWestLat)
//获取绘制结束时的结束点
var northEast = new AMap.LngLat(northEastLng, northEastLat)
//给绘制点添加样式
rectangle = new AMap.Rectangle({
bounds: bounds,
strokeColor: 'red',
strokeWeight: 6,
strokeOpacity: 0.5,
strokeDasharray: [30, 10],
// strokeStyle还支持 solid
strokeStyle: 'dashed',
fillColor: 'blue',
fillOpacity: 0.2,
cursor: 'pointer',
zIndex: 50,
})
rectangle.setMap(map)
//绘制矩形围栏四角坐标
x1 = Math.min(southWestLng, northEastLng)
y1 = Math.min(southWestLat, northEastLat)
x2 = Math.max(southWestLng, northEastLng)
y2 = Math.max(southWestLat, northEastLat)
countsM=0;
//此alllist也是由接口中取出
var alllist = data.data;
//轮询一遍接口数据，判断覆盖物是否在矩形围栏中
//数据量过大时不宜采取此方法，后期跟进优化
$.each(alllist, function (i, n) {
if (x1 < n.lng && n.lng < x2 && y1 < n.lat && n.lat < y2) {
countsM++
}
})
console.log("围栏内的覆盖物为" + countsM + "个")
}