<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#filter {
float: left;
width: 30%;
height: 100%;
}
#map {
width: 70%;
height: 100%;
}
#dealers_list {
margin: 10px; overflow-y: scroll; height: 500px
}
#dealers_list .item{
cursor: pointer;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="filter">
<div style="margin: 10px;">
<span>选择区域</span>
<span><select id="area"><option value="">全部区域</option><option value="1">南区</option><option value="2">北区</option></select></span>
</div>
<div style="margin: 10px;">
<span>选择城市</span>
<span><select id="city"></select></span>
</div>
<div style="margin: 10px;">
<span>验证是否在区域中</span><br/>
<span>
经度:<input type="text" name="longitude" id="longitude"><br/>
维度:<input type="text" name="latitude" id="latitude"><br/>
<input type="button" btn="search" value="查询">
</span>
</div>
<div id="dealers_list">
</div>
</div>
<div id="map"></div>
<canvas id="canvas"></canvas>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<script type="text/javascript" src="/js/mapv.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css"/>
<script type="text/javascript">
$(function(){
//加载地图
window._loadMap = function(cityid,dealerid){
$.get("/test/map",{cityid:cityid,dealerid:dealerid},function(res){
$("body").append(res);
},"html");
}
//加载区域城市
window._loadCity = function(big_areaid){
$.get("/test/getcitys",{big_areaid:big_areaid},function(res){
if(res&&res.code==1){
$("#dealers_list").html("");
data = res.data;
str = "<option value=''''>请选择</option>";
for (i = 0; i < data.length; i++) {
str += "<option value=''"+data[i].cityid+"''>"+data[i].cityname+"</option>";
}
$("#city").html(str);
}else{
alert(res.msg);
}
},"json");
}
//加载城市经销商
window._loadDealer = function(cityid){
$.get("/test/getdealers",{cityid:cityid},function(res){
if(res&&res.code==1){
data = res.data;
str = "";
for (i = 0; i < data.length; i++) {
str += "<div class=''item'' data-dealerid=''"+data[i].dealerid+"''>"+data[i].dealername+"</div>";
}
$("#dealers_list").html(str);
}else{
alert(res.msg);
}
},"json");
}
//大区选择
$("#area").change(function(){
big_areaid = $(this).val();
if(big_areaid==""){
$("#city").html("");
return false;
}
_loadMap(0,0);
_loadCity(big_areaid);
});
window.dealerid = 0;
window.cityid = 0;
//城市选择
$("#city").change(function(){
cityid = $(this).val();
if(cityid==""){
alert("请选择城市");
return false;
}
_loadDealer(cityid);
_loadMap(cityid,0);
});
//经销商点击
$("#dealers_list").delegate(''.item'', ''click'', function(event) {
dealerid = $(this).attr("data-dealerid");
_loadMap(cityid,dealerid);
});
//是否当前位置是否在区域内
$(''[btn="search"]'').click(function(){
longitude = $("#longitude").val();
latitude = $("#latitude").val();
$.post("/test/search",{dealerid:dealerid,longitude:longitude,latitude:latitude},function(res){
if(res&&res.code==1)
{
alert(res.msg);
}else{
alert(res.msg);
}
},"json");
});
//初始化地图
_loadMap(0,0);
});
</script>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("map", {
enableMapClick: true
}); // 创建Map实例
@if($dealer)
//点击单一商户
point = new BMap.Point({{$dealer[''longitude'']}}, {{$dealer[''latitude'']}});
map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别
@elseif($city)
//选择某一个城市
map.centerAndZoom("{{$city[''cityname'']}}",13);
@else
//默认显示城市
map.centerAndZoom("北京",13);
@endif
//
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
map.addControl(new BMap.NavigationControl());
// 编写自定义函数,创建商家标注
function addMarker(point,dealername,show_delete){
var marker = new BMap.Marker(point);
map.addOverlay(marker);
var label = new BMap.Label(dealername,{offset:new BMap.Size(20,-10)});
marker.setLabel(label);
if(show_delete)
{
var delete_label = new BMap.Label("<a href=''javascript:;''>点击图标删除区域</a>",{offset:new BMap.Size(-38,26)});
marker.setLabel(delete_label);
marker.addEventListener("click",function(){
$.post("/test/removesign",{dealerid:dealerid},function(res){
if(res&&res.code==1){
_loadMap(cityid,dealerid);
}else{
alert(res.msg);
}
},"json");
});
}
}
//添加商户到地图
var _loadDealerToMap = function(){
@if($dealer)
var point = new BMap.Point({{$dealer[''longitude'']}}, {{$dealer[''latitude'']}});
addMarker(point,"{{$dealer[''dealername'']}}",{{$dealer[''points'']?1:0}});
@elseif($dealers)
@foreach(dealersasv)
@if($v[''longitude''] && $v[''latitude''])
var point = new BMap.Point({{$v[''longitude'']}}, {{$v[''latitude'']}});
addMarker(point,"{{$v[''dealername'']}}",false);
@endif
@endforeach
@endif
}
//setTimeout(_loadDealerToMap(),1000);
_loadDealerToMap();
//使用工具划区域后执行事件
var overlaycomplete = function (e) {
if(drawingManager.getDrawingMode() != "polygon"){
alert("请选用多边形画图工具!");
return false;
}
if(!dealerid){
alert("请先选择一个经销商!");
return false;
}
points = e.overlay.getPath();
$.post("/test/signdealer",{dealerid:dealerid,points:points},function(res){
if(res&&res.code==1){
//重新刷新地图
_loadMap(cityid,dealerid);
}else{
alert(res.msg);
}
},"json");
//debugger;
};
var styleOptions = {
strokeColor: "red", //边线颜色。
fillColor: "red", //填充颜色。当参数为空时,圆形将没有填充效果。
strokeWeight: 3, //边线的宽度,以像素为单位。
strokeOpacity: 0.8, //边线透明度,取值范围0 - 1。
fillOpacity: 0.6, //填充的透明度,取值范围0 - 1。
strokeStyle: ''solid'' //边线的样式,solid或dashed。
};
//实例化鼠标绘制工具
var drawingManager = new BMapLib.DrawingManager(map, {
isOpen: false, //是否开启绘制模式
drawingType: BMAP_DRAWING_POLYGON,
enableDrawingTool: true, //是否显示工具栏
enableCalculate: false,
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(5, 10), //偏离值
drawingModes : [
BMAP_DRAWING_POLYGON //多边形
]
},
polygonOptions: styleOptions, //多边形的样式
});
//drawingManager.setDrawingMode(BMAP_DRAWING_POLYGON);
//添加鼠标绘制工具监听事件,用于获取绘制结果
drawingManager.addEventListener(''overlaycomplete'', overlaycomplete);
map.setMapStyle({
styleJson: [
{
"featureType": "all",
"elementType": "all",
"stylers": {
"lightness": 61,
"saturation": -100
}
}
]
});
@if($dealer)
$.get(''/test/getdealerare'',{dealerid:{{$dealer[''dealerid'']}}}, function (data) {
if(data)
{
var dataSet = new mapv.DataSet(data);
var options = {
fillStyle: ''rgba(255, 80, 53, 0.8)'',
strokeStyle: ''rgba(250, 255, 53, 0.8)'',
lineWidth: 2,
draw: ''simple'',
zIndex: 1,
size: 5, // 大小值
}
var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
}
});
@endif
</script>
/**
* 判断是否在区域内部
* @param [array] $p 需要查询的经纬度
* @param [array] $points 查询的圈的经纬度集合
* @return boolean
*/
private function _isInside(p,points)
{
count=count(points);
if($count < 3)
return false;
$result = false;
for(i=0,j = count−1;i < count;i++)
{
p1=points[$i];
p2=points[$j];
if(p1[′lat′]<p[''lat''] && p2[′lat′]>=p[''lat''] || p2[′lat′]<p[''lat''] && p1[′lat′]>=p[''lat'']){
if(p1[′lng′]+(p[''lat''] - p1[′lat′])/(p2[''lat''] - p1[′lat′])∗(p2[''lng''] - p1[′lng′])<p[''lng'']){
result=!result;
}
}
j=i;
}
return $result;
}
该文章在 2021/1/29 9:59:07 编辑过