GPS/軌跡追蹤、軌跡回放、圍欄控制
折騰一個多月終於弄完了這個項目，起初都不曾接觸GPS/軌跡追蹤、軌跡回放、圈劃圍欄...等一些在百度地圖或者Googel地圖操做的一些業務，後端的業務相對來講簡單點javascript
cas單點登陸，mongdb靈活的數據存儲方式,ActiveMQ消息推送、Redis存儲...html
這篇的主要篇幅主要來說述下項目中的一些地圖上棘手的問題java
接口測試數據：git
1.GPS數據接收接口對於日期格式的轉化web
做爲碼農都知道Web接口傳輸的數據都是以Json的數據形式傳輸，日期格式不一樣是咱們頭疼的事情，固然要是咱們本身給App端，雲平臺端...都喜歡直接點java.util.Date類型直接拋給對
方，固然做爲接收方很反感這種以毫秒的形式
①org.springframework.web.bind.annotation.ResponseBody 這是咱們用SpringMvc經常使用的一種轉JSON的形式，經常使用業務中徹底能夠搞定
②com.alibaba.fastjson.annotation.JSONField 阿里巴巴的轉JSON形式，起初對它並不有所偏好，後來寫接口寫多了，就慢慢喜歡上了ajax
@ResponseBody 直接將咱們所須要的數據格式封裝起來直接轉JSON返回
如：算法
1 import java.io.Serializable; 2
3 @SuppressWarnings("rawtypes") 4 public class APIContent implements Serializable{ 5 /**
6 * 7 */
8 private static final long serialVersionUID = 2127409162712908650L; 9
10 public APIContent(){} 11
12 private Page page; 13
14 private boolean ok=true; 15
16 /**
17 * 返回的數據包 18 */
19 private Object data; 20
21 /**
22 * 錯誤碼，請查globs 23 */
24 private int code = ApiGlobals.SUCCESS; 25 /**
26 * 消息處理 27 */
28 private String msg; 29
30
31 /**
32 * 返回數據成功，設置數據。 33 * @param data 34 */
35 public APIContent(Object data){ 36 this.data=data; 37 } 38
39 /**
40 * 返回數據成功，設置數據。 41 * @param data 42 */
43 public APIContent(Page page, Object data){ 44 this.page = page; 45 this.data=data; 46 } 47 public APIContent(int code){ 48 this.code=code; 49 } 50 public Object getData() { 51 return data; 52 } 53
54 public void setData(Object data) { 55 this.data = data; 56 } 57
58 public int getCode() { 59 return code; 60 } 61
62 public void setApiCode(int code){ 63 switch(code){ 64 case ApiCode.opt.DATA_REPEAT: 65 setMsg("data is repeat! "); 66 break; 67 case ApiCode.opt.NOT_LOGIN: 68 setMsg("please login first! "); 69 break; 70 case ApiCode.bug.INVAILD_PARAMS: 71 setMsg("invaild params! "); 72 break; 73 case ApiCode.bug.NO_RESOURCE: 74 setMsg("not exists resource! "); 75 break; 76 case ApiCode.bug.OPERATION: 77 setMsg("operation falied! "); 78 break; 79 case ApiCode.bug.UNDEFINE_FUN: 80 setMsg("unimplements function or version! "); 81 break; 82 case ApiCode.fatal.ERR_SERVER: 83 setMsg("server error! "); 84 break; 85 case ApiCode.Login.INVAILD_PWD: 86 setMsg("password is invalid! "); 87 case ApiCode.Login.NOT_REGISTER: 88 setMsg("not register user! "); 89 break; 90 case ApiCode.BindDevice.DEVICE_HAS_BIND: 91 setMsg("device has binded! "); 92 break; 93 case ApiCode.BindDevice.INVAILD_PWD: 94 setMsg("device password is invalid! "); 95 break; 96 case ApiCode.BindDevice.NO_DEVICE: 97 setMsg("device is not exists! "); 98 break; 99 } 100 this.code=code; 101 } 102
103 public boolean isOk() { 104 return ok; 105 } 106 public void setOk(boolean ok) { 107 this.ok = ok; 108 } 109 public void setCode(int code) { 110
111 this.code = code; 112 } 113
114 public Page getPage() { 115 return page; 116 } 117 public void setPage(Page page) { 118 this.page = page; 119 } 120 public String getMsg() { 121 return msg; 122 } 123 public void setMsg(String msg) { 124 this.msg = msg; 125 } 126
127 }
將數據封裝到date中而後標識狀態碼，提示信息返回spring
@JSONField 的處理有所不一樣的是，對於日期的處理以及返回形式均可改變
如：咱們對日期格式的轉化sql
@JSONField(name = "type") private String mcTypeName; // 設備類型
@JSONField(name = "expireTime", format = "yyyy-MM-dd HH:mm:ss") private Date expireTime; //過時時間
@JSONField(name = "createTime", format = "yyyy-MM-dd HH:mm:ss") private Date createTime; //接入時間
返回數據處理 ：自定義形式..僅做參考apache
1 Map<Class<?>, String[]> includes = new HashMap<Class<?>, String[]>(); 2 includes.put(APIContent.class, new String[] { "code", "msg", "data" }); 3 includes.put(HashMap.class, new String[] { "gps", "obd", "hb", "status", "bd", "gg", "geoname"}); 4 includes.put(VOrganize.class, new String[] { "organizeName", "vehicles" }); 5 includes.put(Vehicle.class, new String[] { "statusMap", "plateNum", "vechleName", "imei", "id", "vechleioc" }); 6 includes.put(OBDProtocol.class, new String[] { "engineStatus", "speedAverage" }); 7 includes.put(GPSProtocol.class, new String[] { "acc", "gpsTime", "latitude", "longitude" }); 8 includes.put(HBProtocol.class, new String[] { "time" }); 9 includes.put(Point.class, new String[] { "lat", "lng" });
1 package com.jimi.commons.utils; 2
3 import java.util.ArrayList; 4 import java.util.Iterator; 5 import java.util.List; 6 import java.util.Map; 7 import java.util.Map.Entry; 8
9 import javax.servlet.ServletOutputStream; 10 import javax.servlet.http.HttpServletResponse; 11
12 import org.apache.commons.beanutils.PropertyUtils; 13 import org.apache.commons.io.IOUtils; 14 import org.apache.log4j.Logger; 15
16 import com.alibaba.fastjson.serializer.JSONSerializer; 17 import com.alibaba.fastjson.serializer.NameFilter; 18 import com.alibaba.fastjson.serializer.PropertyFilter; 19 import com.alibaba.fastjson.serializer.SerializeConfig; 20 import com.alibaba.fastjson.serializer.SerializeWriter; 21 import com.alibaba.fastjson.serializer.SerializerFeature; 22 import com.alibaba.fastjson.serializer.SimpleDateFormatSerializer; 23 import com.alibaba.fastjson.serializer.ValueFilter; 24 import com.jimi.commons.vo.APIContent; 25
26
27 /**
28 * 轉換JSON工具類 29 * 30 */
31 public class JsonUtils { 32 private static Logger log = Logger.getLogger(JsonUtils.class); 33 private final static String DATAS_FLAG = "\"data\":[]"; 34 private static boolean loaded = false; 35
36 /**
37 * 38 * @param object 39 * @param includes 40 * @return
41 * @author chengxuwei 42 * 43 */
44 public static String toJson(Object object,Map<Class<?>,String[]> includes) { 45 return toJson(object,includes,null,null); 46 } 47
48 /**
49 * 50 * @param object 51 * @param includes 52 * @param alias 53 * @return
54 * @author chengxuwei 55 */
56 public static String toJson(Object object,Map<Class<?>,String[]> includes,Map<Class<?>,Map<String,String>> alias) { 57 return toJson(object,includes,null,alias); 58 } 59 /**
60 * 帶包函，排出的序列化 61 * @param object 被轉對象 62 * @param includes 類包函的屬性 63 * @param excludes 類排出的屬性 64 * @return
65 * @author chengxuwei 66 */
67 public static String toJson(Object object,Map<Class<?>,String[]> includes,Map<Class<?>,String[]> excludes,Map<Class<?>,Map<String,String>> alias ) { 68 SerializeWriter writer = new SerializeWriter(); 69 try{ 70 JSONSerializer serializer = new JSONSerializer(writer); 71 //序列化配置 72 // serializer.config(SerializerFeature.WriteNullNumberAsZero, true); 73 // serializer.config(SerializerFeature.WriteNullStringAsEmpty, true); 74 // serializer.config(SerializerFeature.WriteNullBooleanAsFalse, true); 75 // serializer.config(SerializerFeature.WriteNullListAsEmpty, true); 76 //包括
77 if(null!=includes&&includes.size()>0){ 78 SimpleSerializerFilter filter = SimpleSerializerFilter.getIncludeFilter(); 79 Iterator<Entry<Class<?>, String[]>> ite = includes.entrySet().iterator(); 80 while(ite.hasNext()){ 81 Entry<Class<?>, String[]> kv = ite.next(); 82 filter.addFilterFields(kv.getKey(), kv.getValue()); 83 } 84 serializer.getPropertyFilters().add(filter); 85 } 86 //排出
87 if(null!=excludes&&excludes.size()>0){ 88 SimpleSerializerFilter filter=SimpleSerializerFilter.getExcludesFilter(); 89 Iterator<Entry<Class<?>, String[]>> ite = excludes.entrySet().iterator(); 90 while(ite.hasNext()){ 91 Entry<Class<?>, String[]> kv = ite.next(); 92 filter.addFilterFields(kv.getKey(), kv.getValue()); 93 } 94 serializer.getPropertyFilters().add(filter); 95
96 } 97 //別名
98 if(null!=alias&&alias.size()>0){ 99 SimpleNameFilter filter=new SimpleNameFilter(); 100 filter.addAllAlias(alias); 101 serializer.getNameFilters().add(filter); 102 } 103 //值過濾，Android,IOS終端須要空字符串爲""空數字爲0
104 serializer.getValueFilters().add(new ValueFilter(){ 105 public Object process(Object source, String name, Object value) { 106 if(null==value){ 107 try { 108 Class clazz = PropertyUtils.getPropertyType(source, name); 109 if(clazz.isAssignableFrom(String.class)){ 110 value=""; 111 }else if(clazz.isAssignableFrom(Integer.class)){ 112 value=0; 113 } 114 } catch (Exception e) { 115 e.printStackTrace(); 116 } 117 } 118
119 return value; 120 } 121
122 }); 123 //write
124 serializer.write(object); 125 return writer.toString(); 126 }catch(Exception e){ 127 log.error("to json string error", e); 128 }finally{ 129 writer.close(); 130 } 131 return null; 132 } 133
134 /**
135 * 轉爲Json字串 136 * 137 * @param object 轉換數據對象 138 * @return Json字串 139 */
140 public static String toJson(Object object) { 141 return toJson(object, new String[0]); 142 } 143
144 /**
145 * 轉爲Json字串 146 * 147 * @param object 轉換數據對象 148 * @param includes 包含屬性數組 149 * @return Json字串 150 */
151 public static String toJson(Object object, String... includes) { 152 return toJson(object, includes, new String[0]); 153 } 154
155 /**
156 * 轉爲Json字串 157 * 158 * @param object 轉換數據對象 159 * @param includes 包含屬性數組 160 * @param excludes 不包含屬性數組 161 * @return Json字串 162 */
163 public static String toJson(Object object, String[] includes, String[] excludes) { 164 return toJson(object, includes, excludes, null); 165 } 166
167 /**
168 * 轉爲Json字串 169 * 170 * 171 * 屬性名稱轉換 172 * 173 * 對象A有兩個屬性:id和name 174 * 正常轉換爲Json字串爲：{"id": 1001, "name":"測試數據"} 175 * 176 * 定義屬性名稱轉換： 177 * nameMap.put("id", "cid"); 178 * 轉換爲Json字串爲：{"cid": 1001, "name":"測試數據"} 179 * 180 * @param object 轉換數據對象 181 * @param includes 包含屬性數組 182 * @param excludes 不包含屬性數組 183 * @param aliasMap 屬性別名map 184 * @return Json字串 185 */
186 @SuppressWarnings("rawtypes") 187 public static String toJson(Object object, String[] includes, String[] excludes, final Map<String, String> aliasMap) { 188 //屬性過濾
189 PropertyFilter propertyFilter = null; 190 if ((includes != null && includes.length > 0) || (excludes != null && excludes.length > 0)) { 191 propertyFilter = new CustomPropertyFilter(includes, excludes); 192 } 193
194 /**
195 * 屬性名稱轉換 196 * 197 * 對象A有兩個屬性:id和name 198 * 正常轉換爲Json字串爲：{"id": 1001, "name":"測試數據"} 199 * 200 * 定義屬性名稱轉換： 201 * nameMap.put("id", "cid"); 202 * 轉換爲Json字串爲：{"cid": 1001, "name":"測試數據"} 203 */
204 NameFilter nameFilter = null; 205
206 if (aliasMap != null && aliasMap.size() > 0) { 207 nameFilter = new NameFilter() { 208 public String process(Object source, String name, Object value) { 209 if (aliasMap.containsKey(name)) { 210 return aliasMap.get(name); 211 } 212 return name; 213 } 214 }; 215 } 216
217 StringBuffer sb = new StringBuffer(2048); 218
219 try { 220 if (object instanceof APIContent) { 221 APIContent apiContent = (APIContent) object; 222 List list = null; 223 if(apiContent.getData() instanceof List){ 224 list =(List)apiContent.getData(); 225 List nullList=new ArrayList(); 226 apiContent.setData(nullList); 227 } 228 sb.append(toJson4Detail(DATAS_FLAG, apiContent, list, propertyFilter, nameFilter)); 229 list = null; 230 }else { 231 sb.append(toJSONString(object, propertyFilter, nameFilter)); 232 } 233 } catch (Exception e) { 234 log.error("toJson錯誤：", e); 235 } 236
237 return sb.toString(); 238 } 239
240 public static String escapeXml(String input) { 241 if (input != null) { 242 input = input.replaceAll("<", "<").replaceAll(">", ">"); 243 } 244 return input; 245 } 246
247 private static String toJSONString(Object object, SerializerFeature... features) { 248 return toJSONString(object, null, features); 249 } 250
251 private static String toJSONString(Object object, PropertyFilter propertyFilter, SerializerFeature... features) { 252 return toJSONString(object, propertyFilter, null, features); 253 } 254
255 private static String toJSONString(Object object, PropertyFilter propertyFilter, NameFilter nameFilter, SerializerFeature... features) { 256 SerializeWriter out = new SerializeWriter(); 257
258 try { 259 JSONSerializer serializer = new JSONSerializer(out); 260 for (SerializerFeature feature : features) { 261 serializer.config(feature, true); 262 } 263
264 serializer.config(SerializerFeature.WriteDateUseDateFormat, true); 265 //serializer.config(SerializerFeature.WriteTabAsSpecial, true);
266 serializer.config(SerializerFeature.DisableCircularReferenceDetect, true); 267
268 if (propertyFilter != null) { 269 serializer.getPropertyFilters().add(propertyFilter); 270 } 271 if (nameFilter != null) { 272 serializer.getNameFilters().add(nameFilter); 273 } 274
275 setSerializeConfig(serializer.getMapping()); 276
277 serializer.write(object); 278
279 return out.toString(); 280 } finally { 281 out.close(); 282 } 283 } 284
285 private static String toJson4Detail(String flag, Object data, Object list, PropertyFilter propertyFilter, NameFilter nameFilter) { 286 StringBuffer sb = new StringBuffer(2048); 287
288 if (list == null) { 289 sb.append(toJSONString(data,propertyFilter, nameFilter)); 290 } else { 291 sb.append(toJSONString(data)); 292 int pos = sb.indexOf(flag); 293 if (pos != -1) { 294 int end = pos + flag.length(); 295 int start = end - 2; 296 sb.delete(start , end); 297 sb.insert(start, toJSONString(list, propertyFilter, nameFilter)); 298 } 299 } 300
301 return sb.toString(); 302 } 303
304 private static void setSerializeConfig(SerializeConfig serializeConfig) { 305 if (!loaded) { 306 serializeConfig.put(java.sql.Date.class, new SimpleDateFormatSerializer("yyyy-MM-dd")); 307 loaded = true; 308 } 309 } 310
311
312
313 }
1 /*
2 * public void returnJson2(HttpServletResponse response, Object object, String... includes) { returnJson2(response, getJson(object, includes)); } 3 * 4 * public void returnJson2(HttpServletResponse response, Object object, String[] includes, String[] excludes) { returnJson2(response, getJson(object, includes, excludes)); } 5 * 6 * public void returnJson2(HttpServletResponse response, String json) { returnJson(response, (HttpServletRequest) null, json); } 7 */
8 public void returnJson(HttpServletResponse response, HttpServletRequest request, String json) { 9 try { 10 String contentType = "application/json; charset=UTF-8"; 11 if (request != null) { 12 String accept = request.getHeader("accept"); 13 if (accept != null && !accept.contains("json")) { 14 contentType = "text/html; charset=UTF-8"; 15 } 16 } 17 response.setContentType(contentType); 18 response.getWriter().write(json); 19 response.getWriter().flush(); 20 } catch (IOException e) { 21 if (logger.isErrorEnabled()) { 22 logger.error("returnJson is error!", e); 23 } 24 } 25 }
2.分段軌跡/軌跡追蹤
(注：每次選取不一樣軌跡的時候先清除原先畫的軌跡）
百度地圖
谷歌地圖
代碼實現：
①值得注意的是GPS經緯度轉化爲百度經緯度和谷歌經緯度是不同的
這裏我作的算法處理
獲取百度經緯度：經過GPS/(lat,lng)獲得百度地圖經緯度
獲取谷歌地圖經緯度：經過GPS/(lat,lng)獲得百度地圖經緯度，在將百度經緯度轉化爲谷歌地圖經緯度
源碼：（獲取上訴接口數據...而後在作座標處理）
Point.java
1 public class Point { 2
3 private double lat;// 緯度
4 private double lng;// 經度
5
6 public Point() { 7 } 8
9 public Point(double lng, double lat) { 10 this.lng = lng; 11 this.lat = lat; 12 } 13
14 @Override 15 public boolean equals(Object obj) { 16 if (obj instanceof Point) { 17 Point bmapPoint = (Point) obj; 18 return (bmapPoint.getLng() == lng && bmapPoint.getLat() == lat) ? true
19 : false; 20 } else { 21 return false; 22 } 23 } 24
25 public double getLat() { 26 return lat; 27 } 28
29 public void setLat(double lat) { 30 this.lat = lat; 31 } 32
33 public double getLng() { 34 return lng; 35 } 36
37 public void setLng(double lng) { 38 this.lng = lng; 39 } 40
41 @Override 42 public String toString() { 43 return "Point [lat=" + lat + ", lng=" + lng + "]"; 44 } 45
46 }
經緯度轉化算法
1 public class CoordinateConversion { 2 private static final double x_pi = 3.14159265358979324 * 3000.0 / 180.0; 3
4 private static final double pi = 3.14159265358979324; //元周率
5 private static final double a = 6378245.0; //衛星橢球座標投影到平面地圖座標系的投影因子。
6 private static final double ee = 0.00669342162296594323; //ee: 橢球的偏愛率。
7
8 /**
9 * gg_lat 緯度 10 * gg_lon 經度 11 * GCJ-02轉換BD-09 Google地圖經緯度轉百度地圖經緯度 12 * */
13 public static Point google_bd_encrypt(double gg_lat, double gg_lon) { 14 Point point = new Point(); 15 double x = gg_lon, y = gg_lat; 16 double z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi); 17 double theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi); 18 double bd_lon = z * Math.cos(theta) + 0.0065; 19 double bd_lat = z * Math.sin(theta) + 0.006; 20 point.setLat(bd_lat); 21 point.setLng(bd_lon); 22 return point; 23 } 24
25 /**
26 * wgLat 緯度 27 * wgLon 經度 28 * BD-09轉換GCJ-02 百度轉google 29 * */
30 public static Point bd_google_encrypt(double bd_lat, double bd_lon) { 31 Point point = new Point(); 32 double x = bd_lon - 0.0065, y = bd_lat - 0.006; 33 double z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi); 34 double theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi); 35 double gg_lon = z * Math.cos(theta); 36 double gg_lat = z * Math.sin(theta); 37 point.setLat(gg_lat); 38 point.setLng(gg_lon); 39 return point; 40 } 41
42
43 /**
44 * wgLat 緯度 45 * wgLon 經度 46 * BD-09轉換GCJ-02 百度轉 47 * */
48 public static Point bd_google_baidu_encrypt(double bd_lat, double bd_lon) { 49 Point point = new Point(); 50 point=wgs_gcj_encrypts(bd_lat,bd_lon); 51 point=google_bd_encrypt(point.getLat(),point.getLng()); 52 return point; 53 } 54
55
56 /**
57 * wgLat 緯度 58 * wgLon 經度 59 * WGS-84 到 GCJ-02 的轉換（即 GPS 加偏） 60 * */
61 public static Point wgs_gcj_encrypts(double wgLat, double wgLon) { 62 Point point = new Point(); 63 if (outOfChina(wgLat, wgLon)) { 64 point.setLat(wgLat); 65 point.setLng(wgLon); 66 return point; 67 } 68 double dLat = transformLat(wgLon - 105.0, wgLat - 35.0); 69 double dLon = transformLon(wgLon - 105.0, wgLat - 35.0); 70 double radLat = wgLat / 180.0 * pi; 71 double magic = Math.sin(radLat); 72 magic = 1 - ee * magic * magic; 73 double sqrtMagic = Math.sqrt(magic); 74 dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi); 75 dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi); 76 double lat = wgLat + dLat; 77 double lon = wgLon + dLon; 78 point.setLat(lat); 79 point.setLng(lon); 80 return point; 81 } 82
83 public static void transform(double wgLat, double wgLon, double[] latlng) { 84 if (outOfChina(wgLat, wgLon)) { 85 latlng[0] = wgLat; 86 latlng[1] = wgLon; 87 return; 88 } 89 double dLat = transformLat(wgLon - 105.0, wgLat - 35.0); 90 double dLon = transformLon(wgLon - 105.0, wgLat - 35.0); 91 double radLat = wgLat / 180.0 * pi; 92 double magic = Math.sin(radLat); 93 magic = 1 - ee * magic * magic; 94 double sqrtMagic = Math.sqrt(magic); 95 dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi); 96 dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi); 97 latlng[0] = wgLat + dLat; 98 latlng[1] = wgLon + dLon; 99 } 100
101 private static boolean outOfChina(double lat, double lon) { 102 if (lon < 72.004 || lon > 137.8347) 103 return true; 104 if (lat < 0.8293 || lat > 55.8271) 105 return true; 106 return false; 107 } 108
109 private static double transformLat(double x, double y) { 110 double ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y 111 + 0.2 * Math.sqrt(Math.abs(x)); 112 ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0; 113 ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0; 114 ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0; 115 return ret; 116 } 117
118 private static double transformLon(double x, double y) { 119 double ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1
120 * Math.sqrt(Math.abs(x)); 121 ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0; 122 ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0; 123 ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0
124 * pi)) * 2.0 / 3.0; 125 return ret; 126 } 127 }
初始化原型地圖通用模塊
1 <script type="text/javascript">
2 var allMap;//公共的默認加載百度google地圖
3 var allMapType=$("#selectMap").val(); 4 if(allMapType=='googleMap'){ 5 initGoogleMap(); 6
7 }else{ 8 initBaiDuMap();//默認自動加載百度地圖
9
10 } 11
12 //普通
13 $("#selectMap").change(function(){ 14 var mapType=$(this).children('option:selected').val();//這就是selected的值
15 if(mapType=='googleMap'){ 16 initGoogleMap(); 17
18 }else{ 19 initBaiDuMap(); 20
21 } 22 allMapType=mapType; 23 }); 24
25 /*** 26 電子圍欄切換 27 $("#selectGeozoneMap").change(function(){ 28 var mapType=$(this).children('option:selected').val();//這就是selected的值 29 if(mapType=='googleMap'){ 30 initGoogleMap();//初始化google地圖 31 intoGoogleTools();//初始化google地圖繪製工具 32 }else{ 33 initBaiDuMap();//初始化百度地圖 34 intoBaiDuMapTools();//初始化百度地圖繪製工具 35 } 36 }); 37 **/
38
39 function initBaiDuMaps(){ 40 var myCity = new BMap.LocalCity(); 41 myCity.get(myCenterAndZoom); 42 function myCenterAndZoom(result){ 43 var cityName = result.name; 44 //initBaiDuMaps(cityName);
45 } 46 } 47 function initBaiDuMap(){ 48 // 百度地圖API功能
49 allMap= new BMap.Map("allmap"); // 建立Map實例 divID必須爲allmap
50 allMap.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地圖,設置中心點座標和地圖級別
51 allMap.addControl(new BMap.MapTypeControl()); //添加地圖類型控件
52 allMap.addControl(new BMap.NavigationControl());//設置導航條 （左上角，添加默認縮放平移控件）
53 allMap.enableScrollWheelZoom(true); //開啓鼠標滾輪縮放
54 allMap.clearOverlays(); 55 } 56
57
58 function initGoogleMap(){ 59 //Google地圖API功能
60 //緯度&經度
61 var myCenter=new google.maps.LatLng(39.915,116.404); 62 var mapProp = { 63 center:myCenter, 64 zoom:10, 65 mapTypeId:google.maps.MapTypeId.ROADMAP 66 }; 67 allMap = new google.maps.Map(document.getElementById("allmap"),mapProp); 68 } 69
70
71 //地圖自動高度
72 function mapAutoHeight(){ 73 $("#allmap").height($(window).height() - $(".header").outerHeight() - $(".breadcrumb-func").outerHeight() - $(".footer").outerHeight()); 74 } 75 mapAutoHeight(); 76 $(window).resize(function(){ 77 mapAutoHeight(); 78 }); 79
80 //狀態
81 var icon_end = {icon:new BMap.Icon(_ctx+"/resource/images/36x43/end.png" ,new BMap.Size(36,44)),offset:new BMap.Size(0,-22),imageOffset:new BMap.Size(0,-22)}; 82 var icon_start = {icon:new BMap.Icon(_ctx+"/resource/images/36x43/start.png" ,new BMap.Size(36,44)),offset:new BMap.Size(0,-22),imageOffset:new BMap.Size(0,-22)}; 83 var icon_gray_automobile = {icon:new BMap.Icon(_ctx+"/resource/images/36x43/gray_automobile.png" ,new BMap.Size(36,44)),offset:new BMap.Size(0,-22),imageOffset:new BMap.Size(0,-22)}; 84 var icon_gray_bus = {icon:new BMap.Icon(_ctx+"/resource/images/36x43/gray_bus.png" ,new BMap.Size(36,44)),offset:new BMap.Size(0,-22),imageOffset:new BMap.Size(0,-22)}; 85 var icon_gray_truck = {icon:new BMap.Icon(_ctx+"/resource/images/36x43/gray_truck.png" ,new BMap.Size(36,44)),offset:new BMap.Size(0,-22),imageOffset:new BMap.Size(0,-22)}; 86 var icon_green_automobile = {icon:new BMap.Icon(_ctx+"/resource/images/36x43/green_automobile.png" ,new BMap.Size(36,44)),offset:new BMap.Size(0,-22),imageOffset:new BMap.Size(0,-22)}; 87 var icon_green_bus = {icon:new BMap.Icon(_ctx+"/resource/images/36x43/green_bus.png" ,new BMap.Size(36,44)),offset:new BMap.Size(0,-22),imageOffset:new BMap.Size(0,-22)}; 88 var icon_green_truck = {icon:new BMap.Icon(_ctx+"/resource/images/36x43/green_truck.png" ,new BMap.Size(36,44)),offset:new BMap.Size(0,-22),imageOffset:new BMap.Size(0,-22)}; 89 var icon_red_automobile = {icon:new BMap.Icon(_ctx+"/resource/images/36x43/red_automobile.png" ,new BMap.Size(36,44)),offset:new BMap.Size(0,-22),imageOffset:new BMap.Size(0,-22)}; 90 var icon_red_bus = {icon:new BMap.Icon(_ctx+"/resource/images/36x43/red_bus.png" ,new BMap.Size(36,44)),offset:new BMap.Size(0,-22),imageOffset:new BMap.Size(0,-22)}; 91 var icon_red_truck = {icon:new BMap.Icon(_ctx+"/resource/images/36x43/red_truck.png" ,new BMap.Size(36,44)),offset:new BMap.Size(0,-22),imageOffset:new BMap.Size(0,-22)}; 92 //0,離線; 1,在線靜止; 2,在線運動.
93 var vechleIconMap=
94 { 95 '0_bus' :icon_gray_bus , 96 '1_bus' :icon_red_bus , 97 '2_bus' :icon_green_bus , 98 '0_automobile' :icon_gray_automobile , 99 '1_automobile' :icon_red_automobile , 100 '2_automobile' :icon_green_automobile , 101 '0_truck' :icon_gray_truck , 102 '1_truck' :icon_red_truck , 103 '2_truck' :icon_green_truck 104 }; 105
106 var gicon_end = {url:_ctx+"/resource/images/36x43/end.png" ,size:new google.maps.Size(36,44),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(18,44)}; 107 var gicon_start = {url:_ctx+"/resource/images/36x43/start.png" ,size:new google.maps.Size(36,44),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(18,44)}; 108 var gicon_gray_automobile = {url:_ctx+"/resource/images/36x43/gray_automobile.png" ,size:new google.maps.Size(36,44),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(18,44)}; 109 var gicon_gray_bus = {url:_ctx+"/resource/images/36x43/gray_bus.png" ,size:new google.maps.Size(36,44),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(18,44)}; 110 var gicon_gray_truck = {url:_ctx+"/resource/images/36x43/gray_truck.png" ,size:new google.maps.Size(36,44),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(18,44)}; 111 var gicon_green_automobile = {url:_ctx+"/resource/images/36x43/green_automobile.png" ,size:new google.maps.Size(36,44),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(18,44)}; 112 var gicon_green_bus = {url:_ctx+"/resource/images/36x43/green_bus.png" ,size:new google.maps.Size(36,44),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(18,44)}; 113 var gicon_green_truck = {url:_ctx+"/resource/images/36x43/green_truck.png" ,size:new google.maps.Size(36,44),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(18,44)}; 114 var gicon_red_automobile = {url:_ctx+"/resource/images/36x43/red_automobile.png" ,size:new google.maps.Size(36,44),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(18,44)}; 115 var gicon_red_bus = {url:_ctx+"/resource/images/36x43/red_bus.png" ,size:new google.maps.Size(36,44),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(18,44)}; 116 var gicon_red_truck = {url:_ctx+"/resource/images/36x43/red_truck.png" ,size:new google.maps.Size(36,44),origin:new google.maps.Point(0,0),anchor:new google.maps.Point(18,44)}; 117
118 //0,離線; 1,在線靜止; 2,在線運動.
119 var gvechleIconMap=
120 { 121 '0_bus' :gicon_gray_bus , 122 '1_bus' :gicon_red_bus , 123 '2_bus' :gicon_green_bus , 124 '0_automobile' :gicon_gray_automobile , 125 '1_automobile' :gicon_red_automobile , 126 '2_automobile' :gicon_green_automobile , 127 '0_truck' :gicon_gray_truck , 128 '1_truck' :gicon_red_truck , 129 '2_truck' :gicon_green_truck 130 }; 131
132 </script>
軌跡分段Map.js
1 //獲取全部點的座標
2
3 var label; //信息標籤
4 var centerPoint; 5 var selfAll; 6
7 var startIcon=_ctx+"/resource/images/36x43//start.png";// 8 var startMaker;//起點
9 var startLable; 10 var startPoint; 11
12 var endIcon=_ctx+"/resource/images/36x43/end.png";// 13 var endLable;//終點
14 var endMaker; 15 var endPoint; 16
17 var points=[]; 18 //Googel
19 var map; 20
21 //選擇加載
22 $("#selectMap").change(function(){ 23 var mapType=$(this).children('option:selected').val();//這就是selected的值
24 if(mapType=='googleMap'){ 25 initGoogleMap(); 26 }else{ 27 initBaiDuMap(); 28 } 29 allMapType=mapType; 30 getPointAtMap(); 31 }); 32
33
34 //選擇路段信息
35 function getPointAtMap(startTime,endTime,imei){ 36 points.splice(0, points.length); //清除記錄
37 $.ajax({ 38 type:"post", 39 url:_ctx+"/drivingrecord/getPonitAtMap", 40 async: false, 41 cache: false, 42 data:{"startTime":startTime,"endTime":endTime,"imei":imei,"selectMap":allMapType}, 43 dataType: 'json', 44 success:function(returnData){ 45 if(returnData.code==0){ 46 if(allMapType == 'googleMap'){ 47 $.each(returnData.data,function(n,value){ 48 points.push(new google.maps.LatLng(value.lat, value.lng)); 49 }); 50 initgoogel(); 51 }else{ 52 allMap.clearOverlays(); 53 $.each(returnData.data,function(n,value){ 54 points.push(new BMap.Point(value.lng, value.lat)); 55 }); 56 initbaidu(); 57 } 58 }else{ 59 layer.msg("該時間段無行駛記錄"); 60 allMap.clearOverlays(); 61 initbaidu(); 62 } 63 } 64 }); 65 } 66
67 function initbaidu() { 68 //初始化地圖,選取第一個點爲起始點
69 allMap.centerAndZoom(points[0], 15); 70
71 centerPoint = new BMap.Point((points[0].lng + points[points.length - 1].lng) / 2, (points[0].lat + points[points.length - 1].lat) / 2); 72 allMap.panTo(centerPoint); 73 //鏈接全部點
74 allMap.addOverlay(new BMap.Polyline(points, {strokeColor: "#00cc00", strokeWeight: 5, strokeOpacity: 1})); 75
76 //顯示起點
77 startLable = new BMap.Label("", {offset: new BMap.Size(-35,-35)}); 78 //car = new BMap.Marker(points[0], {icon: new BMap.Icon(iconImg, new BMap.Size(48, 48), {imageOffset: new BMap.Size(0, 0)})});
79 startPoint=points[0]; 80 startMaker = new BMap.Marker(startPoint, {icon: new BMap.Icon(startIcon, new BMap.Size(48,48)),offset: new BMap.Size(2,-20),imageOffset: new BMap.Size(0,-20)}); 81 //startMaker.setLabel(startLable);
82 allMap.addOverlay(startMaker); 83 //顯示終點
84 endLable = new BMap.Label("", {offset: new BMap.Size(-35,-35)}); 85 //car = new BMap.Marker(points[0], {icon: new BMap.Icon(iconImg, new BMap.Size(48, 48), {imageOffset: new BMap.Size(0, 0)})});
86 endPoint=points[points.length-1]; 87 endMaker = new BMap.Marker(endPoint, {icon: new BMap.Icon(endIcon, new BMap.Size(48,48)),offset: new BMap.Size(2,-20),imageOffset: new BMap.Size(0,-20)}); 88 //endMaker.setLabel(endLable);
89 allMap.addOverlay(endMaker); 90 } 91
92 //初始化谷歌地圖
93 function initgoogel(){ 94 var indexCenter=points.length/2;
95 indexCenter=indexCenter>>0; 96
97 var mapOptions = { 98 zoom: 14, //縮放級別
99 center: points[indexCenter], 100 panControl: true, 101 zoomControl: true, 102 mapTypeControl: true, 103 scaleControl: true, 104 overviewMapControl: true, 105 mapTypeId: google.maps.MapTypeId.ROADMAP 106 }; 107 map = new google.maps.Map(document.getElementById('allmap'),mapOptions); 108 var lineSymbol = { 109 //travelMode: google.maps.DirectionsTravelMode.DRIVING,
110 path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, 111 scale: 2, 112 strokeColor: '#0000', 113 strokeOpacity: 1.0, // 透明度
114 strokeWeight: 2, // 寬度
115 strokeOpacity : 0.8, 116 fillColor : "#0000", 117 fillOpacity : 0.4
118 }; 119 line = new google.maps.Polyline({ 120 path: points, 121 icons: [{ 122 icon: lineSymbol, 123 offset: '1%'
124 }], 125 strokeColor: '#418f02', 126 //travelMode: google.maps.DirectionsTravelMode.DRIVING,
127 map: map 128 }); 129 linePath=line.getPath(); 130 new google.maps.Marker( 131 { 132 position: points[0], 133 icon:startIcon, 134 map: map 135 } 136
137 ); 138 new google.maps.Marker( 139 { 140 position: points[points.length - 1], 141 icon:endIcon, 142 map: map 143 } 144 ); 145
146 }
注：
① 咱們都知道緯度的範圍是南北緯0-90°,經度的範圍是東西經0-180°
百度地圖：對應點經緯度先填緯度，後天經度（開始沒有仔細看百度API被坑了許久）
points.push(new BMap.Point(value.lng, value.lat));
谷歌地圖：經緯度正常
points.push(new google.maps.LatLng(value.lat, value.lng));
②對起始位置，終點位置的修飾以及軌跡的修飾
其實原理都相通，咱們描畫地圖上的座標，都是經過逐個座標點來控制，肯定起始，終點座標，自定義類型
如：
百度地圖~
//初始化地圖,選取第一個點爲起始點
allMap.centerAndZoom(points[0], 15);
//鏈接全部點
allMap.addOverlay(new BMap.Polyline(points, {strokeColor: "#00cc00", strokeWeight: 5, strokeOpacity: 1}));
//顯示起點
startLable = new BMap.Label("", {offset: new BMap.Size(-35,-35)}); //car = new BMap.Marker(points[0], {icon: new BMap.Icon(iconImg, new BMap.Size(48, 48), {imageOffset: new BMap.Size(0, 0)})});
startPoint=points[0]; startMaker = new BMap.Marker(startPoint, {icon: new BMap.Icon(startIcon, new BMap.Size(48,48)),offset: new BMap.Size(2,-20),imageOffset: new BMap.Size(0,-20)});
//顯示終點
endLable = new BMap.Label("", {offset: new BMap.Size(-35,-35)}); //car = new BMap.Marker(points[0], {icon: new BMap.Icon(iconImg, new BMap.Size(48, 48), {imageOffset: new BMap.Size(0, 0)})});
endPoint=points[points.length-1]; endMaker = new BMap.Marker(endPoint, {icon: new BMap.Icon(endIcon, new BMap.Size(48,48)),offset: new BMap.Size(2,-20),imageOffset: new BMap.Size(0,-20)}); //endMaker.setLabel(endLable);
allMap.addOverlay(endMaker);
（固然這裏值得一提的中點位置，不是終點是中點，當時圍欄顯示軌跡中心位置所取的一個點，每種地圖都要設置一箇中心點）
即取起始位置和終點位置的中點就OK了~有點邏輯頭腦的均可以接收
開始作百度地圖的時候有點棘手，畢竟先前沒有接觸過，後來作谷歌地圖的時候，就靈活點了~
起點，終點 （肯定座標位置就OK了，咱們是把全部座標放到數組上的，當先後面的操做就SO easy啦）
new google.maps.Marker( { position: points[0], icon:startIcon, map: map } ); new google.maps.Marker( { position: points[points.length - 1], icon:endIcon, map: map } );
③百度經緯度，谷歌經緯度轉當前地理位置
百度地圖：
谷歌地圖：
1 /** 假數據測試 * */
2 var label; // 信息標籤
3 var centerPoint; 4 var selfAll; 5
6 var cars; // 汽車圖標
7 var cariconImg = _ctx + "/resource/images/36x43/green_automobile.png";// 8 //var cariconImg=icon_green_automobile;//
9 var carlabel; // 信息標籤
10 var carcenterPoint; 11
12 var startIcon = _ctx + "/resource/images/36x43//start.png";// 13 var startMaker;// 起點
14 var startLable; 15 var startPoint; 16
17 var endIcon = _ctx + "/resource/images/36x43/end.png";// 18 var endLable;// 終點
19 var endMaker; 20 var endPoint; 21
22 var timer; // 定時器
23 var index = 0; // 記錄播放到第幾個point
24
25 var points = []; // 座標
26 var gpsSpeeds = []; // 時速
27 var gpsTimes = []; // 時間
28
29 //Googel
30 var map; 31 var linePath; 32
33 //默認加載
34 var allMapType = $("#selectMap").val(); 35 if (allMapType == 'googleMap') { 36 initGoogleMap(); // 加載Googel地圖
37 }else{ 38 initBaiDuMap(); // 默認自動加載百度地圖
39 initPiont(); 40 } 41
42 //選擇加載
43 $("#selectMap").change(function(){ 44 var mapType=$(this).children('option:selected').val();//這就是selected的值
45 if(mapType=='googleMap'){ 46 initGoogleMap(); 47 initPiont(); 48 }else{ 49 initBaiDuMap(); 50 initPiont(); 51 } 52 allMapType=mapType; 53 }); 54
55
56 //加載百度地圖上的點
57 function initPiont() { 58 points.splice(0, points.length); //清除記錄
59 var startTime = $("#startTime").val(); 60 var endTime = $("#endTime").val(); 61 var imei = $("#imei").val(); 62 if (startTime != "" && startTime != "" && imei != "") { 63 $.ajax({ 64 type : "post", 65 url : _ctx + "/trackreplay/initPiont", 66 async : false, 67 cache : false, 68 data : {"startTime":startTime,"endTime":endTime,"imei":imei,"selectMap":allMapType}, 69 dataType : 'json', 70 success : function(returnData){ 71 if (returnData.code == 0){ 72 if (returnData.data != null){ 73 if(allMapType == 'googleMap'){ 74 $.each(returnData.data,function(n,value){ 75 points.push(new google.maps.LatLng(value.lat, value.lng)); 76 gpsSpeeds.push(value.gpsSpeed); 77 gpsTimes.push(value.CurrentTime); 78 }); 79 initGoogel(); 80 }else{ 81 $.each(returnData.data,function(n,value){ 82 points.push(new BMap.Point(value.lng, value.lat)); 83 gpsSpeeds.push(value.gpsSpeed); 84 gpsTimes.push(value.CurrentTime); 85 }); 86 initBaiDuMap();// 默認自動加載百度地圖
87 initBaidu(); 88 } 89 $("#gpsTime").text(gpsTimes[0]); 90 $("#gpsSpeed").text(gpsSpeeds[0]); 91 }else{ 92 layer.msg("該時間段無行駛記錄"); 93 initBaiDuMap();// 默認自動加載百度地圖
94 initBaidu(); 95 } 96 } 97 } 98 }); 99 } 100 } 101 //初始化百度地圖
102 function initBaidu() { 103 // 初始化地圖,選取第一個點爲起始點
104 allMap.centerAndZoom(points[0], 15); 105
106 var driving = new BMap.DrivingRoute(allMap); 107
108 centerPoint = new BMap.Point( 109 (points[0].lng + points[points.length - 1].lng) / 2, 110 (points[0].lat + points[points.length - 1].lat) / 2
111 ); 112 allMap.panTo(centerPoint); 113 // 鏈接全部點
114 allMap.addOverlay( 115 new BMap.Polyline( 116 points, 117 { 118 strokeColor : "#00cc00", 119 strokeWeight : 5, 120 strokeOpacity : 1
121 } 122 ) 123 ); 124
125 //Start
126 startLable = new BMap.Label( 127 "", 128 { 129 offset : new BMap.Size(-35, -35) 130 } 131 ); 132 startPoint = points[0]; 133 startMaker = new BMap.Marker( 134 startPoint, 135 { 136 icon : new BMap.Icon(startIcon, new BMap.Size(48, 48)), 137 offset : new BMap.Size(2, -20), 138 imageOffset : new BMap.Size(0, -20) 139 } 140 ); 141 // startMaker.setLabel(startLable);
142 allMap.addOverlay(startMaker); 143 //Car
144 carlabel = new BMap.Label( 145 "", 146 { 147 offset : new BMap.Size(-35, -35) 148 } 149 ); 150 carcenterPoint = points[0]; 151 cars = new BMap.Marker( 152 carcenterPoint, 153 { 154 icon : new BMap.Icon(cariconImg, new BMap.Size(48, 48)), 155 offset : new BMap.Size(2, -20), 156 imageOffset : new BMap.Size(0, -20) 157 } 158 ); 159 allMap.addOverlay(cars); 160 //End
161 endLable = new BMap.Label("", {offset : new BMap.Size(-35, -35)}); 162 endPoint = points[points.length - 1]; 163 endMaker = new BMap.Marker( 164 endPoint, 165 { 166 icon : new BMap.Icon(endIcon, new BMap.Size(48, 48)), 167 offset : new BMap.Size(2, -20), 168 imageOffset : new BMap.Size(0, -20) 169 } 170 ); 171 allMap.addOverlay(endMaker); 172 } 173
174 //初始化谷歌地圖
175 function initGoogel(){ 176 var indexCenter=points.length/2;
177 indexCenter=indexCenter>>0; 178 var mapOptions = { 179 zoom: 14, //縮放級別
180 center: points[indexCenter], 181 panControl: true, 182 zoomControl: true, 183 mapTypeControl: true, 184 scaleControl: true, 185 overviewMapControl: true, 186 mapTypeId: google.maps.MapTypeId.ROADMAP 187 }; 188 map = new google.maps.Map(document.getElementById('allmap'),mapOptions); 189 var lineSymbol = { 190 //travelMode: google.maps.DirectionsTravelMode.DRIVING,
191 path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, 192 scale: 2, 193 strokeColor: '#0000', 194 strokeOpacity: 1.0, // 透明度
195 strokeWeight: 2, // 寬度
196 strokeOpacity : 0.8, 197 fillColor : "#0000", 198 fillOpacity : 0.4
199 }; 200 line = new google.maps.Polyline({ 201 path: points, 202 icons: [{ 203 icon: lineSymbol, 204 offset: '1%'
205 }], 206 strokeColor: '#418f02', 207 //travelMode: google.maps.DirectionsTravelMode.DRIVING,
208 map: map 209 }); 210 linePath=line.getPath(); 211 new google.maps.Marker( 212 { 213 position: points[0], 214 icon:startIcon, 215 map: map 216 } 217
218 ); 219 new google.maps.Marker( 220 { 221 position: points[points.length - 1], 222 icon:endIcon, 223 map: map 224 } 225 ); 226 } 227
228
229 var timer; // 定時器
230 var index = 0; // 記錄播放到第幾個point
231 var statue = true; // 默認中止
232
233 var count = 0; 234
235 function Operate() { 236 $("#paly").parent().toggleClass("pause"); 237 if (statue) { 238 statue = false; 239 play(); 240 } else { 241 statue = true; 242 pause(); 243 } 244 } 245 var marker = null; 246
247 function play() { 248 var timeat = $("#palyTime").val(); 249 var point = points[index]; 250 var speed = gpsSpeeds[index]; 251 var time = gpsTimes[index]; 252 timeat = 1000 - timeat; 253 if(allMapType == 'googleMap'){ //Googel
254 var geocoder = new google.maps.Geocoder(); 255 geocoder.geocode({'latLng': point}, function(results, status) { 256 if (status == google.maps.GeocoderStatus.OK) { 257 if (results[0]) { 258 var address=results[0].formatted_address; 259 var sindex=address.indexOf("郵政編碼"); 260 if(sindex>0){ 261 $("#address").text(address.substring(0,sindex)); 262 }else{ 263 $("#address").text(address); 264 } 265
266 } 267 }}); 268 map.panTo(point); 269 if(index < points.length){ 270 index++; 271 if (!marker){ 272 marker = new google.maps.Marker( 273 { 274 position: points[index], 275 icon:cariconImg, 276 map: map 277 }); 278 }else{ 279 if(index < points.length){ 280 marker.setPosition(points[index]); 281 }else{ 282 map.panTo(point); 283 } 284 } 285 timer = window.setTimeout("play(" + index + ")", timeat); 286 } 287 }else{ //baidu
288 if (index > 0) { 289 allMap.addOverlay( 290 new BMap.Polyline( 291 [ points[index - 1], point ], 292 { 293 strokeColor : "red", 294 strokeWeight : 1, 295 strokeOpacity : 1
296 } 297 ) 298 ); 299 } 300 // 經過當前經緯度獲取當前位置
301 var geoc = new BMap.Geocoder(); 302 geoc.getLocation(point, function(rs) { 303 if (rs && rs.address) 304 $("#address").text(rs.address); 305 }); 306 cars.setPosition(point); 307 index++; 308 allMap.panTo(point); 309 if (index < points.length) { 310 timer = window.setTimeout("play(" + index + ")", timeat); 311 } else { 312 allMap.panTo(point); 313 } 314 } 315 $("#gpsTime").text(time); 316 $("#gpsSpeed").text(speed); 317 } 318
319 function pause() { 320 if (timer) { 321 window.clearTimeout(timer); 322 } 323 } 324
325 function reset() { 326 if (timer) { 327 window.clearTimeout(timer); 328 } 329 index = 0; 330 cars.setPosition(points[0]); 331 allMap.panTo(centerPoint); 332
333 Operate(); 334
335 }
圍欄設置與控制
百度：
谷歌：
百度 JS
1 //0:電子圍欄，1:地標
2 var flag = $("#flag").val(); 3 $(document).ready(function(){ 4 var allMapType=$("#selectGeozoneMap").val(); 5 if(allMapType=='googleMap'){ 6 $("#map-pin").hide(); 7 initGoogleMap(); 8 intoGoogleTools();//初始化google地圖繪製工具
9 }else{ 10 $("#map-pin").show(); 11 initBaiDuMap();//默認自動加載百度地圖
12 intoBaiDuMapTools(); 13 searchAddrTip(); 14 } 15
16 }); 17
18 $("#selectGeozoneMap").change(function(){ 19 var mapType=$(this).children('option:selected').val();//這就是selected的值
20 if(mapType=='googleMap'){ 21 $("#map-pin").hide(); 22 initGoogleMap();//初始化google地圖
23 intoGoogleTools();//初始化google地圖繪製工具
24 }else{ 25 $("#map-pin").show(); 26 initBaiDuMap();//初始化百度地圖
27 intoBaiDuMapTools();//初始化百度地圖繪製工具
28 } 29 }); 30
31 //多邊形清除
32 function initToDrawing(){ 33 //drawingManagerBaidu.setDrawingMode(BMAP_DRAWING_POLYGON);//默認進入地圖開啓畫多邊形
34 clearAll(); 35 intoBaiDuMapTools(); 36 } 37
38
39 /** 40 * 百度繪製工具加載 41 * */
42
43 var baiduoverlays = []; 44 function intoBaiDuMapTools(){ 45 allMap.removeEventListener("click", initToDrawing); 46 //實例化鼠標繪製工具
47 var drawingManagerBaidu = new BMapLib.DrawingManager(allMap, { 48 isOpen: false, //是否開啓繪製模式
49 enableDrawingTool: true, //是否顯示工具欄
50 drawingToolOptions: { 51 anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
52 //drawingModes: [BMAP_DRAWING_POLYGON,BMAP_DRAWING_CIRCLE],
53 drawingModes: [BMAP_DRAWING_POLYGON], 54 offset: new BMap.Size(150, 5), //偏離值
55 scale: 0.8 //工具欄縮放比例
56 }, 57 polygonOptions: { 58 strokeColor : "#0000FF", 59 strokeOpacity : 0.8, 60 strokeWeight : 2, 61 fillColor : "#FF0000", 62 fillOpacity : 0.4, 63 editable:false, //是否能夠編輯
64 draggable:false //是否可拖動
65 } //多邊形的樣式
66 }); 67 drawingManagerBaidu.setDrawingMode(BMAP_DRAWING_POLYGON);//默認進入地圖開啓畫多邊形
68 //添加鼠標繪製工具監聽事件，用於獲取繪製結果
69 drawingManagerBaidu.addEventListener('overlaycomplete', overlaycomplete); 70 var htmlcontent = ''; 71 var opts = ''; 72 var strName="圍欄"; 73 if(flag != 0){ 74 strName="地標"; 75 } 76
77 htmlcontent += '<div class="p-tb10">'; 78 htmlcontent += '<div>'; 79 htmlcontent += '<table>'; 80 htmlcontent += '<tr>'; 81 htmlcontent += '<td class="ta-r"><label><font color="#ff0000">*</font> 名稱: </label></td>'; 82 htmlcontent += '<td><input type="text" id="geoname" name="geoname" size="20" placeholder="請輸入'+strName+'標題" class="form-control" style="width:160px;" /></td>'; 83 htmlcontent += '</tr>'; 84 htmlcontent += '<tr>'; 85 htmlcontent += '<td class="ta-r p-t7"><label>描述: </label></td>'; 86 htmlcontent += '<td class="p-t7"><input type="text" id="description" name="description" placeholder="請輸入'+strName+'描述信息" class="form-control" size="50" style="width:160px;" /></td>'; 87 htmlcontent += '</tr>'; 88 htmlcontent += '<tr>'; 89 htmlcontent += '<td> </td>'; 90 htmlcontent += '<td class="p-t7"><input type="submit" value="提交" class="btn btn-primary btn-block" onclick="saveGoogleGeozoneInfo();" /></td>'; 91 htmlcontent += '</tr>'; 92 htmlcontent += '</table>'; 93 htmlcontent += '</div>'; 94 htmlcontent += '</div>'; 95 opts = { 96 width : 200, // 信息窗口寬度
97 height: 156, // 信息窗口高度
98 title : "建立"+strName , // 信息窗口標題
99 enableMessage:false,//設置容許信息窗發送短息
100 message:htmlcontent 101 }; 102
103
104 var infoWindow = new BMap.InfoWindow(htmlcontent,opts); // 建立信息窗口對象
105
106 //回調得到覆蓋物信息
107 function overlaycomplete(e){ 108 drawingManagerBaidu.setDrawingMode(BMAP_DRAWING_POLYGON);//默認進入地圖開啓畫多邊形
109 baiduoverlays.push(e.overlay); 110 try{ 111 var array= e.overlay.getPath(); 112 showLonLat(array); 113 }catch(e){ 114 } 115 //添加單擊事件
116 allMap.addEventListener("click",initToDrawing); 117 } 118 //獲取所畫圍欄點經緯度
119 function showLonLat(arr){ 120 var info=""; 121 for(var i=0; i<arr.length;i++){ 122 //緯度&經度
123 info+="|("+arr[i].lat+","+arr[i].lng+")"; 124 } 125 var coors=info.substring(1); 126 var str="多邊形節點數：" + (arr.length) + " 節點座標："+info; 127 //document.getElementById('mapinfo').innerHTML = "手動繪製多邊形節點數：" + arr.length + "<br>節點座標："+info;
128 console.log("overlaycomplete:"+str); 129 var falgs=false; 130 var len=arr.length; 131 len=Number(len); 132 if(len>=3){ 133 falgs=true; 134 }else{ 135 intoBaiDuMapTools(); 136 if(flag == 0){ 137 layer.msg('圍欄爲封閉的多邊形！'); 138 }else{ 139 layer.msg('地標爲封閉的多邊形！'); 140 } 141 } 142 if(falgs){ 143 $("#maptype").val("baidu"); 144 $("#coors").val(coors); 145 var point = new BMap.Point(arr[0].lng,arr[0].lat); 146 allMap.openInfoWindow(infoWindow,point); //開啓信息窗口
147 } 148 } 149 } 150
151 //清除圍欄
152 function clearAll() { 153 for(var i = 0; i < baiduoverlays.length; i++){ 154 allMap.removeOverlay(baiduoverlays[i]); 155 allMap.clearOverlays(); 156 } 157 baiduoverlays.length = 0; 158 }
谷歌：
1 //0:電子圍欄，1:地標
2 var flag = $("#flag").val(); 3 /** 4 * Google繪製工具加載 5 * */
6 function intoGoogleTools(){ 7 //圖形繪製工具控加載此AIP連接後面加上&libraries=drawing
8 var drawingManager = new google.maps.drawing.DrawingManager({ 9 drawingMode: google.maps.drawing.OverlayType.POLYGON, 10 drawingControl: true, 11 drawingControlOptions: { 12 position: google.maps.ControlPosition.TOP_CENTER, 13 drawingModes: [ 14 //google.maps.drawing.OverlayType.MARKER,
15 //google.maps.drawing.OverlayType.CIRCLE,
16 google.maps.drawing.OverlayType.POLYGON, //僅使用多邊形繪製工具
17 //google.maps.drawing.OverlayType.POLYLINE,
18 // google.maps.drawing.OverlayType.RECTANGLE
19 ] 20 }, 21 circleOptions: { 22 strokeColor : "#0000FF", 23 strokeOpacity : 0.8, 24 strokeWeight : 2, 25 fillColor : "#FF0000", 26 fillOpacity : 0.4, 27 editable:false, //是否能夠編輯
28 draggable:false //是否可拖動
29 }, 30 polygonOptions: {//設置畫線樣式
31 strokeColor: "#0000FF", 32 strokeOpacity: 0.8, 33 strokeWeight: 3, 34 fillColor: "#FF0000", 35 fillOpacity: 0.35, 36 editable: false
37 } 38 }); 39 drawingManager.setMap(allMap); 40
41 //註冊 多邊形 繪製完成事件
42 var geozonePolygon = null; 43 google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) { 44 drawingManager.setDrawingMode(null); //切換爲選擇模式
45 geozonePolygon=polygon; 46 showLonLat(polygon); 47 }); 48 var htmlcontent = ''; 49 var strName="圍欄"; 50 if(flag != 0){ 51 strName="地標"; 52 } 53
54 htmlcontent += '<div class="p-t10 p-b5">'; 55 htmlcontent += '<div>'; 56 htmlcontent += '<table>'; 57 htmlcontent += '<tr>'; 58 htmlcontent += '<td class="ta-r"><label><font color="#ff0000">*</font> 名稱: </label></td>'; 59 htmlcontent += '<td><input type="text" id="geoname" name="geoname" size="20" placeholder="請輸入'+strName+'標題" class="form-control" style="width:160px;" /></td>'; 60 htmlcontent += '</tr>'; 61 htmlcontent += '<tr>'; 62 htmlcontent += '<td class="ta-r p-t7"><label>描述: </label></td>'; 63 htmlcontent += '<td class="p-t7"><input type="text" id="description" name="description" placeholder="請輸入'+strName+'描述信息" class="form-control" size="50" style="width:160px;" /></td>'; 64 htmlcontent += '</tr>'; 65 htmlcontent += '<tr>'; 66 htmlcontent += '<td> </td>'; 67 htmlcontent += '<td class="p-t7"><input type="submit" value="提交" class="btn btn-primary btn-block" onclick="saveGoogleGeozoneInfo();" /></td>'; 68 htmlcontent += '</tr>'; 69 htmlcontent += '</table>'; 70 htmlcontent += '</div>'; 71 htmlcontent += '</div>'; 72
73 var infowindow = new google.maps.InfoWindow({ 74 content: htmlcontent, 75 zIndex: 1000
76 }); 77 //循環顯示 經緯度
78 function showLonLat(polygon){ 79 var array= polygon.getPath().getArray(); 80 var paths = polygon.getPath(); 81 var geozone=""; 82 for(var i=0; i<array.length;i++){ 83 geozone+="|"+array[i]; 84 }; 85 geozone=geozone.substring(1); 86 //document.getElementById('mapinfo').innerHTML = "手動繪製多邊形節點數：" + arr.length + "<br>節點座標："+info;
87 var falg=false; 88 var len=array.length; 89 len=Number(len); 90 if(len>=3){ 91 falg=true; 92 }else{ 93 infowindow.setMap(null); 94 geozonePolygon.setMap(null); 95 drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON); 96 if(flag == 0){ 97 layer.msg('圍欄爲封閉的多邊形！'); 98 }else{ 99 layer.msg('地標爲封閉的多邊形！'); 100 } 101 } 102 if(falg){ 103 $("#maptype").val("google"); 104 $("#coors").val(geozone); 105 infowindow.setPosition(paths.getAt(0)); 106 infowindow.open(allMap); 107 } 108 } 109
110 //信息框彈出關閉
111 google.maps.event.addListener(infowindow,'closeclick', function() { 112 geozonePolygon.setMap(null); 113 drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON); 114 }); 115
116 //點擊地圖頁面
117 google.maps.event.addListener(allMap, 'click', function(event) { 118 infowindow.setMap(null); 119 geozonePolygon.setMap(null); 120 drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON); 121 }); 122 } 123
124
125
126
127 //彈框後輸入圍欄信息保存
128 function saveGoogleGeozoneInfo(){ 129 var mapType=$("#maptype").val(); 130 var coors=$("#coors").val(); 131 var geoname=$("#geoname").val(); 132 var description=$("#description").val(); 133 ajaxMapFencingSave(mapType,coors,geoname,description); 134 } 135
136 //圍欄保存到後臺 flag:0爲電子圍欄
137 var postSaveUrl=_ctx+"/geozone/editGeozone"; 138 function ajaxMapFencingSave(mapType,coors,geoname,description){ 139 if(geoname!=''){ 140 $.ajax({ 141 type:'POST', 142 url:postSaveUrl, 143 data:{"geom":coors, 144 "mapType":mapType, 145 "type":"polygon", 146 "geoname":geoname, 147 "description":description, 148 "flag":flag}, 149 dataType:'json', 150 success: function(rest){ 151 if(rest.ok){ 152 if(flag == 0){ 153 layer.msg('圍欄設置成功！'); 154 window.location.href=_ctx+"/geozone/giveanalarm?id="+rest.data.id+"&geonames="+rest.data.geoname; 155 }else{ 156 layer.msg('地標設置成功！'); 157 window.location.href=_ctx+"/geozone/landMarkList"; 158 } 159 //$("#id").val(rest.data.id);
160 //$("#geonames").val(rest.data.geoname);
161 //$("#giveanalarmForm").submit();
162 }else{ 163 if(flag == 0){ 164 layer.msg('圍欄設置失敗！'); 165 }else{ 166 layer.msg('地標設置失敗！'); 167 } 168 } 169 } 170 }); 171 }else{ 172 document.getElementById('geoname').focus(); 173 if(flag == 0){ 174 layer.msg('圍欄名稱必須填寫！'); 175 }else{ 176 layer.msg('地標名稱必須填寫！'); 177 } 178 } 179 } 180
181
182 /** 183 * 地址查詢 184 * 自動提示功能 185 * @param inputId 186 */
187 function initSeachBaidu(inputId){ 188 //創建一個自動完成的對象
189 var autoComplete= new BMap.Autocomplete({"input" : inputId ,"location" :allMap}); 190 //鼠標點擊下拉列表後的事件
191 //查詢輸入 TODO 是否去掉查詢按鈕
192 // autoComplete.addEventListener("onconfirm", function(e) {
193 // var _value = e.item.value;
194 // var searchValue = _value.province + _value.city + _value.district + _value.street + _value.business;
195 // });
196 } 197
198
199 function searchAddrTip(){ 200 var allMapType=$("#selectGeozoneMap").val(); 201 if(allMapType=='baiduMap'){ 202 baiduInit(); 203 }else{ 204 //googleSeach(inputId);
205 } 206 } 207 /** 208 * 地址查詢 209 * 自動提示功能 210 * @param inputId 211 */
212 function baiduInit(){ 213 // 百度地圖API功能
214 function G(id) { 215 return document.getElementById(id); 216 } 217
218 var ac = new BMap.Autocomplete( //創建一個自動完成的對象
219 {"input" : "mapSearchText"
220 ,"location" : allMap 221 }); 222
223 ac.addEventListener("onhighlight", function(e) { //鼠標放在下拉列表上的事件
224 var str = ""; 225 var _value = e.fromitem.value; 226 var value = ""; 227 if (e.fromitem.index > -1) { 228 value = _value.province + _value.city + _value.district + _value.street + _value.business; 229 } 230 str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value; 231
232 value = ""; 233 if (e.toitem.index > -1) { 234 _value = e.toitem.value; 235 value = _value.province + _value.city + _value.district + _value.street + _value.business; 236 } 237 str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value; 238 G("searchResultPanel").innerHTML = str; 239 }); 240
241 var myValue; 242 ac.addEventListener("onconfirm", function(e) { //鼠標點擊下拉列表後的事件
243 var _value = e.item.value; 244 myValue = _value.province + _value.city + _value.district + _value.street + _value.business; 245 G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue; 246 setPlace(); 247 }); 248
249 function setPlace(){ 250 allMap.clearOverlays(); //清除地圖上全部覆蓋物
251 function myFun(){ 252 var pp = local.getResults().getPoi(0).point; //獲取第一個智能搜索的結果
253 allMap.centerAndZoom(pp, 18); 254 allMap.addOverlay(new BMap.Marker(pp)); //添加標註
255 } 256 var local = new BMap.LocalSearch(allMap, { //智能搜索
257 onSearchComplete: myFun 258 }); 259 local.search(myValue); 260 } 261 } 262
263 /** 264 * Google搜索 265 * */
266 function googleSeach(inputId){ 267 var options = { 268 bounds: defaultBounds, 269 types: ['establishment'] 270 }; 271 autocomplete = new google.maps.places.Autocomplete(inputId, options); 272 }
圍欄顯示：
1 var geozId=$("#geozId").val(); 2 echoGeozone(); 3 var data; 4 5 //圍欄回顯 6 $("#selectGeozoneMap").change(function(){ 7 var mapType=$(this).children('option:selected').val();//這就是selected的值 8 if(mapType=='googleMap'){ 9 initGoogleMap(); 10 echoGeozoneGoogleMapData(data);//google回顯 11 }else{ 12 initBaiDuMap(); 13 echoGeozoneBaiduMapData(data);//百度回顯 14 } 15 }); 16 function echoGeozone(){ 17 $.ajax({ 18 type:'POST', 19 url:_ctx+"/geozone/getgeozone", 20 data:{"geozId":geozId}, 21 dataType:'json', 22 success: function(ret){ 23 if(ret.ok){ 24 data=ret.data; 25 //initBaiDuMap(); 26 echoGeozoneBaiduMapData(data); 27 } 28 } 29 }); 30 } 31 32 //百度地圖回顯 33 function echoGeozoneBaiduMapData(data){ 34 var typeMap=data.mapType; 35 var datas=null; 36 if(typeMap=='google'){ 37 datas=data.backGeom; 38 }else{ 39 datas=data.geom; 40 } 41 var coords=datas.point; 42 43 var centerAndZoomPointLat; 44 var centerAndZoomPointLng; 45 var BmapPointArray=[]; 46 for(var i=0;i<coords.length;i++){ 47 var lat=coords[i].lat; 48 var lng=coords[i].lng; 49 centerAndZoomPointLat=coords[0].lat; 50 centerAndZoomPointLng=coords[0].lng; 51 var BmapPoint=new BMap.Point(lng,lat); 52 BmapPointArray.push(BmapPoint); 53 } 54 //回顯多邊形 55 var polygon = new BMap.Polygon(BmapPointArray,{ 56 strokeColor : "#0000FF", 57 strokeOpacity : 0.8, 58 strokeWeight : 2, 59 fillColor : "#FF0000", 60 fillOpacity : 0.4, 61 editable:false, //是否能夠編輯 62 draggable:false //是否可拖動 63 }); //建立多邊形 64 allMap.centerAndZoom(new BMap.Point(centerAndZoomPointLng,centerAndZoomPointLat),11); //設置中心點座標和地圖級別 65 allMap.addOverlay(polygon); //增長多邊形 66 } 67 //google 地圖回顯示 68 function echoGeozoneGoogleMapData(data){ 69 var typeMap=data.mapType; 70 var datas=null; 71 if(typeMap=='baidu'){ 72 datas=data.backGeom; 73 }else{ 74 datas=data.geom; 75 } 76 var coords=datas.point; 77 78 var centerAndZoomPointLat; 79 var centerAndZoomPointLng; 80 var GmapPointArray=[]; 81 for(var i=0;i<coords.length;i++){ 82 var lat=coords[i].lat; 83 var lng=coords[i].lng; 84 centerAndZoomPointLat=coords[0].lat; 85 centerAndZoomPointLng=coords[0].lng; 86 var pointArray= new google.maps.LatLng(lat,lng); 87 GmapPointArray.push(pointArray); 88 } 89 var centerPoint= new google.maps.LatLng(centerAndZoomPointLat,centerAndZoomPointLng); 90 91 var myLatlng = new google.maps.LatLng(centerAndZoomPointLat,centerAndZoomPointLng); 92 var mapOptions = { 93 zoom: 13, 94 center: centerPoint, 95 mapTypeId: google.maps.MapTypeId.ROADMAP 96 }; 97 //var maps = new google.maps.Map(document.getElementById("allmap"), mapOptions); 98 var polygonGoogle = new google.maps.Polygon({ 99 path : GmapPointArray, 100 strokeColor : "#0000FF", 101 strokeOpacity : 0.8, 102 strokeWeight : 2, 103 fillColor : "#FF0000", 104 fillOpacity : 0.4, 105 editable:false, //是否能夠編輯 106 draggable:false //是否可拖動 107 }); 108 polygonGoogle.setMap(allMap); 109 }
先這樣了.........瞭解詳細討論
相關文章
- 1. 軌跡回放
- 2. canvas 軌跡回放
- 3. Mapbox軌跡回放
- 4. Cesium軌跡回放
- 5. 軌跡跟蹤
- 6. DDms錄製軌跡，追蹤方法
- 7. Android+GPS軌跡跟蹤器（一）
- 8. 軌跡
- 9. 軌跡預處理（軌跡清洗）
- 10. 軌跡挖掘——軌跡模式挖掘
- 更多相關文章...
- • Lua 流程控制 - Lua 教程
- • Swift 訪問控制 - Swift 教程
- • 算法總結-回溯法
- • 漫談MySQL的鎖機制
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 軌跡回放
- 2. canvas 軌跡回放
- 3. Mapbox軌跡回放
- 4. Cesium軌跡回放
- 5. 軌跡跟蹤
- 6. DDms錄製軌跡，追蹤方法
- 7. Android+GPS軌跡跟蹤器（一）
- 8. 軌跡
- 9. 軌跡預處理（軌跡清洗）
- 10. 軌跡挖掘——軌跡模式挖掘