<!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>選擇區(qū)域</span>
<span><select id="area"><option value="">全部區(qū)域</option><option value="1">南區(qū)</option><option value="2">北區(qū)</option></select></span>
</div>
<div style="margin: 10px;">
<span>選擇城市</span>
<span><select id="city"></select></span>
</div>
<div style="margin: 10px;">
<span>驗(yàn)證是否在區(qū)域中</span><br/>
<span>
經(jīng)度:<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" />
<script type="text/javascript">
$(function(){
//加載地圖
window._loadMap = function(cityid,dealerid){
$.get("/test/map",{cityid:cityid,dealerid:dealerid},function(res){
$("body").append(res);
},"html");
}
//加載區(qū)域城市
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");
}
//加載城市經(jīng)銷商
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");
}
//大區(qū)選擇
$("#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);
});
//經(jīng)銷商點(diǎn)擊
$("#dealers_list").delegate(''.item'', ''click'', function(event) {
dealerid = $(this).attr("data-dealerid");
_loadMap(cityid,dealerid);
});
//是否當(dāng)前位置是否在區(qū)域內(nèi)
$(''[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
}); // 創(chuàng)建Map實(shí)例
@if($dealer)
//點(diǎn)擊單一商戶
point = new BMap.Point({{$dealer[''longitude'']}}, {{$dealer[''latitude'']}});
map.centerAndZoom(point, 13); // 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級別
@elseif($city)
//選擇某一個(gè)城市
map.centerAndZoom("{{$city[''cityname'']}}",13);
@else
//默認(rèn)顯示城市
map.centerAndZoom("北京",13);
@endif
//
map.enableScrollWheelZoom(true); // 開啟鼠標(biāo)滾輪縮放
map.addControl(new BMap.NavigationControl());
// 編寫自定義函數(shù),創(chuàng)建商家標(biāo)注
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:;''>點(diǎn)擊圖標(biāo)刪除區(qū)域</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();
//使用工具劃區(qū)域后執(zhí)行事件
var overlaycomplete = function (e) {
if(drawingManager.getDrawingMode() != "polygon"){
alert("請選用多邊形畫圖工具！");
return false;
}
if(!dealerid){
alert("請先選擇一個(gè)經(jīng)銷商！");
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", //填充顏色。當(dāng)參數(shù)為空時(shí)，圓形將沒有填充效果。
strokeWeight: 3, //邊線的寬度，以像素為單位。
strokeOpacity: 0.8, //邊線透明度，取值范圍0 - 1。
fillOpacity: 0.6, //填充的透明度，取值范圍0 - 1。
strokeStyle: ''solid'' //邊線的樣式，solid或dashed。
};
//實(shí)例化鼠標(biāo)繪制工具
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);
//添加鼠標(biāo)繪制工具監(jiān)聽事件，用于獲取繪制結(jié)果
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>
/**
* 判斷是否在區(qū)域內(nèi)部
* @param [array] $p 需要查詢的經(jīng)緯度
* @param [array] $points 查詢的圈的經(jīng)緯度集合
* @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 編輯過
400 186 1886
