google map api v3
2020-12-13 02:05
标签:c style class blog code java 实现地图车辆轨迹回放、车辆ID显示等功能。 google map api v3链接 https://developers.google.com/maps/documentation/javascript/reference?hl=zh-cn google map api v2链接(已弃用) https://developers.google.com/maps/documentation/javascript/v2/reference google-maps-utility-library-v3 工具库 http://code.google.com/p/google-maps-utility-library-v3/source/checkout google map api v3,搜素材,soscw.com google map api v3 标签:c style class blog code java 原文地址:http://www.cnblogs.com/liteng_0436/p/3756270.htmlDOCTYPE html>
html>
head>
script type="text/javascript">
function killerrors() {
return true;
}
window.onerror = killerrors;
script>
meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
.labels {
color: black;
background-color: white;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 10px;
font-weight: bold;
text-align: center;
width: 60px;
border: 2px solid black;
white-space: nowrap;
}
style>
script type="text/javascript" src="jquery-1.9.1.min.js">script>
script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true">script>
script type="text/javascript" src="markerwithlabel.js">script>
script type="text/javascript">
var g_nWidth = 224;
var g_nHeight = 500;
var map = undefined;
var poly = undefined;
var carMarker = undefined;
var carNumMarker = undefined;
var infoWindow = undefined;
var carIconList = undefined;
jQuery.support.cors = true;
//初始化地图显示
function initialize() {
$.ajax({
type: "GET",
cache: false,
url: "markerwithlabel.js",
dataType:"text",
success: function(){
var mapOptions = {
center: new google.maps.LatLng(22.514826, 113.917547),
zoom: 15,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
carMarker = new google.maps.Marker();
carMarker.setMap(map);
carIconList = new Array(
"north.png",
"northeast.png",
"east.png",
"southeast.png",
"south.png",
"southwest.png",
"west.png",
"northwest.png");
//placeCar(‘粤B1234‘, 113.917547, 22.514826, 0);
},
error:function(r){}
});
}
//设置地图大小
function setMapSize(width, height)
{
var nWidth = parseInt(width);
var nHeight = parseInt(height);
g_nWidth = nWidth;
g_nHeight = nHeight;
if (nWidth 0 || nHeight 0)
return ;
document.getElementById("map_canvas").style.height = nHeight;
document.getElementById("map_canvas").style.width = nWidth;
}
//新增轨迹
function addTrackLine(point_list)
{
if (map == undefined)
return;
var Lat = [];
var Long = [];
var LatLong = [];
var temp = point_list.split("|");
var i = 0;
for(;i temp.length;i++)
{
Lat.push(temp[i].split(",")[0]);
Long.push(temp[i].split(",")[1]);
LatLong.push(new google.maps.LatLng(parseFloat(Lat[i]), parseFloat(Long[i])));
}
poly = new google.maps.Polyline({
path: LatLong,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 5
});
poly.setMap(map);
}
//删除轨迹
function clearTrackLine()
{
if (poly == undefined)
return;
poly.setMap(null);
if (carMarker != undefined)
carMarker.setMap(null);
if(carNumMarker != undefined)
carNumMarker.setMap(null);
}
//设置地图中心位置
function setMapCenter(lng, lat)
{
if (map == undefined)
return;
map.panTo(new google.maps.LatLng(parseFloat(lat), parseFloat(lng)));
}
//移动车辆
function placeCar(id, longitude, latitude, direction)
{
if (map == undefined)
return;
if (carMarker != undefined)
carMarker.setMap(null);
var carLatLng = new google.maps.LatLng(parseFloat(latitude), parseFloat(longitude));
carMarker.setPosition(carLatLng);
var iconX = 0;
var iconY = 0;
var nDir = parseInt(direction);
var iconNum = 0;
if (nDir >= 338 && nDir 22) {//北
iconNum = 0;
}
else if (nDir >= 23 && nDir 67) {//东北
iconNum = 1;
}
else if (nDir >= 68 && nDir 112) {//东
iconNum = 2;
}
else if (nDir >= 113 && nDir 157) {//东南
iconNum = 3;
}
else if (nDir >= 158 && nDir 202) {//南
iconNum = 4;
}
else if (nDir >= 203 && nDir 247) {//西南
iconNum = 5;
}
else if (nDir >= 248 && nDir 292) {//西
iconNum = 6;
}
else if (nDir >= 293 && nDir 337) {//西北
iconNum = 7;
}
else {
iconNum = 0;
}
var image = new google.maps.MarkerImage(carIconList[iconNum],
new google.maps.Size(34, 34),
new google.maps.Point(0, 0),
new google.maps.Point(17, 17));
carMarker.setIcon(image);
carMarker.setMap(map);
if(carNumMarker != undefined)
carNumMarker.setMap(null);
carNumMarker = new MarkerWithLabel({
position: carLatLng,
draggable: false,
map: map,
labelContent: id,
labelAnchor: new google.maps.Point(34, 34),
labelClass: "labels",
labelStyle: {opacity: 0.75},
icon:{}
});
}
script>
script>
head>
body onload="initialize()">
div id="map_canvas" style="width:g_nWidth; height:g_nHeight;">div>
body>
html>
下一篇:python中的md5加密