微信公众号插入地图及地图搜索资源的前端处理(坐标系转码,自动定位等业务实现)

var map;// 地图对象
var ac;// ac自动完成对象
var isReturnNum = false;// 初始未返回微信的经纬度信息
var parkMarkers = [];// 停车场覆盖物
var searchMarkers = [];// 搜索图标
var selectMarker = "";// 选中的覆盖物
var selectPoint = "";// 选中的覆盖物点
var selectMarkerColor = 0;// 选中的停车点剩余临界值类型(停车点标记颜色 0-蓝色(默认) 1-黄色 2-红色 )
var selectParkingType="";// 选中的停车点类型(停车点类型：0-路边停车点，1-路边简易停车点，2-场内停车点)
var selectFlag = false;// 是否选择过覆盖物,true表示选中


// 初始化获取当前用户的位置,如获取默认坐标不成功则赋值(绍兴城市广场坐标)
var latitudeNum = 30.009466;//30.214684;// 纬度
var longitudeNum = 120.58606;//120.218346;// 经度
var oldMyLocationMaker;// 旧的我的位置覆盖物
var newMypoint;//微信刷新定位:我的位置


wx.config({
//debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId : $("#appId").val(), // 必填，公众号的唯一标识
timestamp : $("#timestamp").val(), // 必填，生成签名的时间戳
nonceStr : $("#nonceStr").val(), // 必填，生成签名的随机串
signature : $("#signature").val(), // 必填，签名，见附录1
jsApiList : ['getLocation' ]// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});


wx.ready(function() {
getLocation();
});


//获取当前地址  
function getLocation(){  
wx.getLocation({
type : 'wgs84',//GPS设备获取的角度坐标，wgs84坐标;
        //type : 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标(国测局坐标)，可传入'gcj02'
success : function(res) {
var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
if(typeof (latitude) != "undefined" && latitude != null&&typeof (longitude) != "undefined" && longitude != null){
isReturnNum=true;
var gpsPoint = new BMap.Point(longitude,latitude);//GPS定位的地图坐标点
gpsConvertBaidu(gpsPoint);//(微信定位的坐标)转为百度坐标
}
var speed = res.speed; // 速度，以米/每秒计
var accuracy = res.accuracy; // 位置精度
},
cancel: function (res) {
        alert('用户拒绝授权获取地理位置!');
        isReturnNum = false;
    }
});
}


/**
 * 坐标转换完之后的回调函数处理
 */
translateCallback = function (data){
  if(data.status === 0) {
  //去除旧的定位点覆盖物,设置新的定位点覆盖物并查周边停车场信息
  newMypoint=data.points[0];
  changeMapAddr(data.points[0]);
  }
}


/**
 * 微信公众号GPS坐标转换百度坐标
 * 具体参考:http://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition
 */
function gpsConvertBaidu(gpsPoint){
    var convertor = new BMap.Convertor();
    var pointArr = [];
    pointArr.push(gpsPoint);
    convertor.translate(pointArr,1,5, translateCallback);//GPS设备获取的角度坐标，wgs84坐标,定位转码;
    // convertor.translate(pointArr,3,5, translateCallback);//google地图、soso地图、aliyun地图、mapabc地图和amap地图所用坐标，国测局坐标,定位转码; 
}








//页面加载初始化地图
initMap();


/**
 * 初始化创建和初始化地图函数
 * 初始化查询我的位置附近停车场
 */
function initMap() {
createMap_1();// 创建地图
createAutoMap();// 创建自动完成的map对象
setMapEvent_1();// 设置地图事件
addMapControl_1();// 初始化向地图添加控件
var mypoint = new BMap.Point(longitudeNum,latitudeNum); // 我的位置坐标
addMapOverlay_1(mypoint);// 初始化向地图添加覆盖物
// 初始化查询我的位置附近停车场
seachNearbyPark(longitudeNum, latitudeNum);

}


/**
 * 创建地图
 */
function createMap_1() {
map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(longitudeNum, latitudeNum), 18);// 初始化地图,设置中心点坐标和地图级别。
}


/**
 * 设置地图事件
 */
function setMapEvent_1() {
addClickHandler_1(map);// 地图页面单击事件
addClickHandler_searchOnListOnBlur(ac);//搜索框鼠标放在下拉列表上的事件
addClickHandler_searchOnListOnClick(ac);//鼠标点击下拉列表后的事件
}


/**
 * 向地图添加控件
 */
function addMapControl_1() {
// 添加比例尺控件
map.addControl(new BMap.ScaleControl());
/*
* var scaleControl = new
* BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
* scaleControl.setUnit(BMAP_UNIT_IMPERIAL); map.addControl(scaleControl);
*/


// 添加地图缩放控件
var navControl = new BMap.NavigationControl({
anchor : BMAP_ANCHOR_BOTTOM_RIGHT,
type : BMAP_NAVIGATION_CONTROL_SMALL
});
map.addControl(navControl);


/*
* var overviewControl = new
* BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
* map.addControl(overviewControl);
*/
}


/**
 * 向地图添加覆盖物
 */
function addMapOverlay_1(point) {
var myIcon = new BMap.Icon('/static/images/maps/[email protected]',
new BMap.Size(39, 39), {
        anchor : new BMap.Size(39, 20)
}, {
imageOffset : new BMap.Size(0 - 10, 0 - 10)
});
oldMyLocationMaker = new BMap.Marker(point, {
icon : myIcon
});

var infoWindow = new BMap.InfoWindow("我的位置");
//覆盖物单击事件
addClickHandler_myLocationOnClick(oldMyLocationMaker, infoWindow);
map.addOverlay(oldMyLocationMaker);// 将标注添加到地图中

}




/**
 * 初始化添加地图事件(添加覆盖物)
 * @param target
 * @param window
 */
function addClickHandler_myLocationOnClick(target,window){
    target.addEventListener("click",function(e){
      $("#searchInput").blur();
      target.openInfoWindow(window);
      e.domEvent.stopPropagation();
    });
  }




/**
 * 初始化添加地图事件(添加地图页面单击事件)
 * @param target 地图对象map
 */
function addClickHandler_1(target){
    target.addEventListener("click",function(e){
    if (!e.overlay) {
    $("#searchInput").blur();
    $(".tangram-suggestion-main").css("display", "none");
    // 点选过覆盖物之后,样式才会改变
    showFlag(selectFlag);
    }
    });
  }




/**
 * 页面点击我的定位图标,回到我的位置(注意:后续的自动纠正用户位置)
 * @param longitudeNum 全局变量经度
 * @param latitudeNum 全局变量维度
 */
function mylocation() {
var mypoint;
//重新刷新定位信息
getLocation();
if(isReturnNum){
mypoint = newMypoint; // 微信定位我的位置坐标
}else{
mypoint = new BMap.Point(longitudeNum, latitudeNum); // 默认位置坐标
}
map.centerAndZoom(mypoint, 18); 
}


/**
 * 微信获取位置后回调自动定位,并查询周边停车场信息
 * @param lo
 * @param la
 */
function changeMapAddr(mypoint) {
map.centerAndZoom(mypoint, 18); 
map.removeOverlay(oldMyLocationMaker); //清除初始化定位标注
addMapOverlay_1(mypoint);// 向地图添加新的我的位置覆盖物
seachNearbyPark(mypoint.lng, mypoint.lat);// 查询我的位置附近停车场
}
/**
 * 点击覆盖物页面显示图标位置调整
 * @param sFlag
 */
function showFlag(sFlag) {
// true,有覆盖物,高度调上来,详情宽度调整
if (sFlag) {
$(".parkingNavigate").css("height", "116px");
$(".anchorBR").css("bottom", "135px");
$(".mylocation").css("bottom", "135px");
} else {
$(".parkingNavigate").css("display", "none");// 隐藏详情信息
$(".anchorBR").css("bottom", "35px");
$(".mylocation").css("bottom", "35px");
}
}


/**
 * 获取文档对象
 * @param id
 * @returns
 */
function G(id) {
return document.getElementById(id);
}


/**
 *建立一个自动完成的map对象 
 *ac 全局变量
 */


function createAutoMap(){
ac = new BMap.Autocomplete({
"input" : "searchInput",
"location" : map
});
}


/**
 * 搜索框鼠标放在下拉列表上的事件
 * @param target ac全局对象
 */
function addClickHandler_searchOnListOnBlur(target){
    target.addEventListener("onhighlight",function(e){
    var str = "";
    var _value = e.fromitem.value;
    var value = "";
    if (e.fromitem.index > -1) {
    value = _value.province + _value.city + _value.district + _value.street + _value.business;
    }
    str = "FromItem
index = " + e.fromitem.index + "
value = "+ value;
    value = "";
    if (e.toitem.index > -1) {
    _value = e.toitem.value;
    value = _value.province + _value.city + _value.district + _value.street + _value.business;
    }
    str += "
ToItem
index = " + e.toitem.index + "
value = "+ value;
    G("searchResultPanel").innerHTML = str;
    });
  }


/**
 * 鼠标点击下拉列表后的事件
 * @param target ac全局对象
 */
function addClickHandler_searchOnListOnClick(target){
    target.addEventListener("onconfirm",function(e){
    var _value = e.item.value;
    var myValue = _value.province + _value.city + _value.district + _value.street+ _value.business;
    G("searchResultPanel").innerHTML = "onconfirm
index = " + e.item.index+ "
myValue = " + myValue;


    // 设置搜索的位置
    setPlace(myValue);
    });
}




/**
 * 设置搜索的覆盖物属性
 * @param myValue
 */
function setPlace(myValue) {
function myFun() {
for ( var i = 0; i < searchMarkers.length; i++) {
map.removeOverlay(searchMarkers[i]);
}
// 搜索后,清空覆盖物,改变页面图标的位置
searchMarkers = [];
selectFlag = false;
showFlag(selectFlag);
$("#searchInput").blur();// 去除输入焦点


var pp = local.getResults().getPoi(0).point; // 获取第一个智能搜索的结果
map.centerAndZoom(pp, 18);
var marker = new BMap.Marker(
pp,
{
icon : new BMap.Icon(
"http://api.map.baidu.com/lbsapi/createmap/images/icon.png",
new BMap.Size(20, 25), {
imageOffset : new BMap.Size(3, 3)
})
});
searchMarkers.push(marker); // 添加标注
map.addOverlay(marker);

// 搜索后,云检索附近的停车点
seachNearbyPark(pp.lng, pp.lat);
}

var local = new BMap.LocalSearch(map, { // 智能搜索
onSearchComplete : myFun
});
local.search(myValue);
}


/**
 * 搜索附近停车点
 * 
 * @param longitude
 * @param latitude
 * @returns
 */
function seachNearbyPark(longitude, latitude) {
// 停车点周边云检索
$.ajax({
type : 'POST',
dataType : 'json',
data : {
"longitude" : longitude,
"latitude" : latitude
},
url : "/mobile/mapSearchNearByPark",
success : function(data) {
//调用停车点周边云检索回调无论是否有数据,必须清理之前的停车点标记
for ( var i = 0; i < parkMarkers.length; i++) {
map.removeOverlay(parkMarkers[i]);
}
parkMarkers = [];//清空数组停车点原数据
//回调返回的周边停车点信息列表
var parkArr = data.dataList;
if (parkArr != null && $.isArray(parkArr) && parkArr.length > 0) {
for ( var i = 0, len = parkArr.length; i < len; i++) {
var park = parkArr[i];
parkMarkers.push(addParkMarker(park));
}
}
},
error : function() {
alert("停车点周边云检索异常！");
}
});
}


/**
 * 添加停车场覆盖物
 * 
 * @param park
 * @returns
 */
function addParkMarker(park) {
var lat = park.latitude;// 纬度
var lng = park.longitude;// 经度
var point = new BMap.Point(lng, lat); // 创建点坐标
//根据停车点剩余车位详情设置地图标记
var marker=setParkMakerByType(park,point);
//添加标记覆盖物到地图
map.addOverlay(marker);


marker.addEventListener("click", function(e) {
// 禁止事物冒泡
e.domEvent.stopPropagation();
// 先将之前选中的覆盖物的图标样式还原,并清空其所选项
var pointIcon=setParkMakerColor(selectPoint,selectMarkerColor,selectParkingType);
if(selectMarker!=""){
selectMarker.setIcon(pointIcon);
selectMarker = "";
selectMarkerColor=0;
selectParkingType="";
}


// 点击覆盖物之后,将搜索框的焦点移除
$("#searchInput").blur();
selectFlag = true;
showFlag(selectFlag);


// 单击覆盖物时,修改其标注样式
var selectIcon=setSelectParkMakerColor(selectIcon,park.parkingType);
marker.setIcon(selectIcon);
selectMarker=marker;
selectMarkerColor=park.parkMarkColor;
selectParkingType=park.parkingType;
selectPoint=marker.point;


// 根据parkingCode去获取停车场详情信息
getParkInfo(park);


});
return marker;


}


/**
 * 根据停车点剩余车位详情设置地图标记
 * @param park
 */
function setParkMakerByType(park,point){

//设置标注图标及对象
var pointIcon=setParkMakerColor(point,park.parkMarkColor,park.parkingType);
var marker = new BMap.Marker(point, {icon : pointIcon});


//设置标签文字偏移及字体颜色等
var offsetX = 8;
var parkNum = 0;
if (park.leftParkingSpaceNum < 10) {
offsetX = 11;
parkNum = park.leftParkingSpaceNum;
} else if (park.leftParkingSpaceNum < 100) {
offsetX = 8;
parkNum = park.leftParkingSpaceNum;
} else if (park.leftParkingSpaceNum < 1000) {
offsetX = 6;
parkNum = "99+";
} else{
offsetX = 6;
parkNum = "99+";
}
var label = new BMap.Label(parkNum, {
offset : new BMap.Size(offsetX,9)
});
label.setStyle({
color : "#FFFFFF",
border : 0,
padding : 0,
fontSize : "10px",
});
marker.setLabel(label);

return marker;
}




/**
 * 设置标注图标及对象
 * @param marker
 * @param parkMarkColor
 * @param parkingType 停车点类型：0-路边停车点，1-路边简易停车点，2-场内停车点
 * @returns
 */
function setParkMakerColor(point,parkMarkColor,parkingType){
//设置标注图标及对象
var pointIcon;
if(parkMarkColor==2){//红色2
if(parkingType==2){
pointIcon = new BMap.Icon('/static/images/maps/place-red.png',
new BMap.Size(28, 28), {offset : new BMap.Size(14, 28)});
}else{
pointIcon = new BMap.Icon('/static/images/maps/side-red.png',
new BMap.Size(28, 28), {offset : new BMap.Size(14, 28)});
}
}else if(parkMarkColor==1){//黄色1
if(parkingType==2){
pointIcon = new BMap.Icon('/static/images/maps/place-yellow.png',
new BMap.Size(28, 28), {offset : new BMap.Size(14, 28)}); 
}else{
pointIcon = new BMap.Icon('/static/images/maps/side-yellow.png',
new BMap.Size(28, 28), {offset : new BMap.Size(14, 28)}); 
}
}else{//(默认)蓝色 0
// 当标注显示在地图上时，其所指向的地理位置距离图标左上角各偏移10像素和28像素。您可以看到在本例中该位置即是图标中央下端的尖角位置。
if(parkingType==2){
pointIcon = new BMap.Icon('/static/images/maps/place-green.png',
new BMap.Size(28, 28), {offset : new BMap.Size(14, 28)}); 
}else{
pointIcon = new BMap.Icon('/static/images/maps/side-green.png',
new BMap.Size(28, 28), {offset : new BMap.Size(14, 28)}); 
}
}

return pointIcon;
}


/**
 * 单击覆盖物时,修改其标注样式
 * @param selectIcon
 * @param parkingType
 */
function setSelectParkMakerColor(selectIcon,parkingType){
if(parkingType==2){
selectIcon = new BMap.Icon('/static/images/maps/place-selected.png',
new BMap.Size(28, 40), {offset : new BMap.Size(28, 40)}); 
}else{
selectIcon = new BMap.Icon('/static/images/maps/side-selected.png',
new BMap.Size(28, 40), {offset : new BMap.Size(28, 40)}); 
}

return selectIcon;
}


/**
 * 展示停车场详情信息
 * 
 * @param park
 * @returns
 */
function getParkInfo(park) {
// 点选搜索结果之后,先将导航栏去掉
$("#parkingNavigate").removeClass("parkingNavigate");
$("#parkingNavigate").empty();
var showDes;
if (park.distance == 0) {
showDes = park.direction;// 描述显示的是附近,故而distance=0
} else {
showDes = park.distance + '(m)';// 显示距离(m)
}
var htmlTab = '';
htmlTab += '

'
+ subName(park.parkingName, 10)
+ ''
+ showDes
+ ''
+ ''
+ '

总:' + park.totalParkingSpaceNum + '空:' + park.leftParkingSpaceNum + '

地址:' + subName(park.parkingAddr, 32) + '

';
$("#parkingNavigate").addClass("parkingNavigate");
$("#parkingNavigate").append(htmlTab);
$(".anchorBR").css("bottom", "135px");
$(".parkingNavigate").css({
"height" : "116px",
"display" : "block"
});
$("#searchResult").hide();
$("#searchInput").blur();
}


// 搜索栏功能
$(function() {
var $searchBar = $('#searchBar'), $searchResult = $('#searchResult'), $searchText = $('#searchText'), $searchInput = $('#searchInput'), $searchClear = $('#searchClear'), $searchCancel = $('#searchCancel');


function hideSearchResult() {
$searchResult.hide();
$searchInput.val('');
}
function cancelSearch() {
hideSearchResult();
$searchBar.removeClass('weui-search-bar_focusing');
$searchText.show();
}


$searchText.on('click', function() {
$searchBar.addClass('weui-search-bar_focusing');
$searchInput.focus();
});
$searchInput.on('blur', function() {
if (!this.value.length)
cancelSearch();
}).on('input', function() {
if (this.value.length) {
$searchResult.show();
} else {
$searchResult.hide();
}
}).on('focus', function() {
// console.log(123);
});
$searchClear.on('click', function() {
hideSearchResult();
$searchInput.focus();
});
$searchCancel.on('click', function() {
cancelSearch();
$searchInput.blur();
});
});


/**
 * 字符串截取
 * 
 * @param fullName
 *            原始字符串
 * @param length
 *            保留长度，不传时默认为：10
 * @returns
 */
function subName(fullName, length) {
if (length == undefined) {
length = 10;
}
if (typeof (fullName) == "undefined" || fullName == null) {
fullName = "";
}
var subName = fullName;
if (fullName && fullName.length > length) {
subName = fullName.substring(0, length);
subName += "...";
}
return subName;
}


/**
 * 关闭停车点详情面板
 */
function clearTab(){
selectFlag = false;
showFlag(selectFlag);
}