百度地图JS API GPS坐标转换成百度地图坐标

最新推荐文章于 2024-08-29 19:45:56 发布

weixin_34146410

最新推荐文章于 2024-08-29 19:45:56 发布

阅读量755

点赞数 1

文章标签： javascript java xhtml ViewUI

原文链接：https://my.oschina.net/hehongbo/blog/477105

版权

2019独角兽企业重金招聘Python工程师标准>>>

首先引入百度地图

<script type="text/javascript" src=" 

<!-- 引入转换坐标的js文件 -->
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>

var lng="119.306667";
var lat="26.075208";

var p=[];// 装转换过后的数据

BMap.Convertor.translate(new BMap.Point(lng, lat),0,translateCallback);//真实经纬度转成百度坐标  

//坐标转换完之后的回调函数
function translateCallback(point){
    //alert(point.lng + "," + point.lat);
    p.push(point);
}

真实案例：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="s" uri="/struts-tags" %>

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>

  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" name="viewport" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

  <s:iterator id="map" value="PathHistoryCoordinates" var="map" status="index"></s:iterator>

<title>行车轨迹</title>
<style type="text/css">
#container{height:100%; width:100%;}
</style>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=百度地图KEY"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>

</head>

<body style='padding:0;margin:0;'>
 <!-- 地图图层 -->
 <div id="container"></div>

<script type="text/javascript">

//折线  2
 var Models = "${PathHistory}";// 获取后台行车轨迹的数据
 //alert(Models);
	var CoordinatesArr=Models.split("/");
	var p=[];
	var polyline;

	for(var i=0;i<CoordinatesArr.length-1;i++){
		var Coordinates = CoordinatesArr[i].split(",");
		//p.push(new BMap.Point(Coordinates[0],Coordinates[1]));

		BMap.Convertor.translate(new BMap.Point(Coordinates[0],Coordinates[1]),0,translateCallback);
	}
	
	//坐标转换完之后的回调函数
	function translateCallback(point){
	   //alert(point.lng + "," + point.lat);
		p.push(point);
	}

window.onload=function(){

var map = new BMap.Map("container");          // 创建地图实例  116.399, 39.910
var pointhead = CoordinatesArr[0].split(",");
	// 判断！如果云端没有数据，则提示用户，并将坐标定位到北京
	if(pointhead[0] && pointhead[1]){
		var point = new BMap.Point(p[0].lng, p[1].lat);  // 创建点坐标  
	}else{
		var point = new BMap.Point(113.95260205509,22.592205782717);  // 创建点坐标  南宁108.27589,22.810024
		//alert("云端没有数据！");
		if(Models=="设备没有绑定车辆！"){
			alert("设备没有绑定车辆！");
		}else{
			alert("云端没有数据！");
		}
	}

map.centerAndZoom(point, 18);                 // 初始化地图，设置中心点坐标和地图级别 
map.addControl(new BMap.MapTypeControl()); 
map.enableScrollWheelZoom();

	//polyline = new BMap.Polyline(p);
	polyline = new BMap.Polyline(p, {strokeColor:"red", strokeWeight:3, strokeOpacity:0.5}); //颜色、宽度为3
	map.addOverlay(polyline); // 将路线添加到地图上

//添加标注    画意摄影主义
var markerhead = new BMap.Marker(point);        // 在起点创建标注  
map.addOverlay(markerhead);                     // 将标注添加到地图中 

};

</script> 

</body>  
</html>

转载于:https://my.oschina.net/hehongbo/blog/477105