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

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 += '<table class = "park-table" style="margin-top:3px"><tr><td class="tab-park-color tab-park-font" >'
+ subName(park.parkingName, 10)
+ ''
+ showDes
+ '<img src="/static/images/maps/close-tab.png" alt="关闭" onclick="clearTab();" align="right"/></td></tr>'
+ '<tr><td class="tab-park-space tab-color-gray" >总:'
+ park.totalParkingSpaceNum
+ '空:'
+ park.leftParkingSpaceNum
+ '</td></tr>'
+ '<tr><td class="tab-park-space tab-color-gray" >地址:'
+ subName(park.parkingAddr, 32) + '</td></tr></table>';
$("#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);
}

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

猜你喜欢