百度地图JS API GPS坐标转换成百度地图坐标
程序员文章站
2022-06-10 10:42:22
...
首先引入百度地图
<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
上一篇： 前端（1）js：百度地图api使用
下一篇： js调用百度地图api实现定位