Google地图-v3-创建标注画线

饶滨海
2023-12-01
/**
 * 将字符串转为js日期类型
 * @param {string} str 格式 2008-08-01 12:12:12
 * @return Date
 */
function getDate(str){
    var strs = str.split(" ");
    var strYmd = strs[0].split("-");
    var strHm = strs[1].split(":");
    return new Date(strYmd[0], parseInt(strYmd[1] - 1), strYmd[2], strHm[0], strHm[1], strHm[2]);
}

function createGoogleMap(longitude, latitude, level) {
	var latLng = new google.maps.LatLng(39.913561, 116.404161);
	if (isBlank(longitude) || isBlank(latitude)) {
		if(navigator.geolocation){
			navigator.geolocation.getCurrentPosition(function (position){
				latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
				var myOptions = {
						zoom : 12,
						center : latLng,
						mapTypeId : google.maps.MapTypeId.TERRAIN,
						scaleControl: true,    //比例尺      
						heading : 90,
						tilt : 45
					};
				return new google.maps.Map(document.getElementById("container"), myOptions);
			});
		}else{
			// 您的浏览器不支持Geolocation!
		}
	}
	var myOptions = {
		zoom : 7,
		center : latLng,
		mapTypeId : google.maps.MapTypeId.TERRAIN,
		scaleControl: true,    //比例尺   
		heading : 90,
		tilt : 45
	};
	return new google.maps.Map(document.getElementById("container"), myOptions);
}

var map;
var markers = [];
//添加多个标注
function addMarkers(map, arr, isClear){
    if (isBlank(arr) || arr.length < 1) {
        return null;
    }
    if (isClear) {
        clearMarkers(map);
    }
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < arr.length; i++) {
        var latLng = new google.maps.LatLng(arr[i].latitudeGoogle, arr[i].longitudeGoogle);
        var content = "<div  style='width: 110%;'>" +
        arr[i].realName +
        " 手机号:" +
        arr[i].phone +
        "<br/>时间:" +
        arr[i].keepTime +
        "<br/>当前位于:" +
        (isNotBlank(arr[i].addressGoogle) ? arr[i].addressGoogle : '未知') +
        "</div>";
        addMarker(map, latLng, arr[i].realName, content, google.maps.Animation.BOUNCE);
        if (!bounds.contains(latLng)) {
            bounds.extend(latLng);
        }
    }
    map.fitBounds(bounds);
}

//添加一个标注
function addMarker(map, location, title, content, animation, icon){
    var marker = new google.maps.Marker({
        position: location,
        title: title,
        animation: animation,
        map: map
    });
    if (isNotBlank(icon)) {
		marker.setIcon(icon);
	}
    var infowindow = new google.maps.InfoWindow({
        content: content
    });
    google.maps.event.addListener(marker, 'click', function(){
        infowindow.open(map, marker);
    });
    markers.push(marker);
    return marker;
}

function addMarkersPolyline(map, arr){
    if (isBlank(arr) || arr.length < 1) {
        return null;
    }
    var now = new Date();
    for (var i = 0; i < arr.length; i++) {
        var latLng = new google.maps.LatLng(arr[i].latitudeGoogle, arr[i].longitudeGoogle);
        var content = "<div  style='width: 110%;'>" +
			        arr[i].realName +
			        " 手机号:" +
			        arr[i].phone +
			        "<br/>时间:" +
			        arr[i].keepTime +
			        "<br/>当前位于:" +
			        (isNotBlank(arr[i].addressGoogle) ? arr[i].addressGoogle : '未知') +
			        "</div>";
        var icon = i == 0 ? endIconGoogle : (i == arr.length - 1 ? startIconGoogle : null);
		if (isBlank(icon)) {
//        	var dn = parseInt((now - getDate(arr[i].keepTime)) / 1000 / 60);     //把相差的毫秒数转换为分钟
//        	if (dn>10 && dn<=30) {
//        		icon = dull_redGoogle;
//        	}
//        	else if (dn > 30) {
//        		icon = greyIconGoogle; // 标识为灰色
//        	}
        }
        addMarker(map, latLng, arr[i].realName, content, google.maps.Animation.DROP, icon);
    }
}

// 删除多个标注
function clearMarkers(map){
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(null);
    }
    markers = [];
}

/**
 * 设置即时定位左则在线人员的刷新时间,单位(秒)
 */
//var onlineInterval = 60 * 3;

/**
 * 设置即时定位查询的等待时长,单位(秒)
 */
//var positionTimeOut = 30;

/**
 * 设置即时定位查询的步长,单位(秒)
 */
//var positionInterval = 3;

/**
 * 起始标记图片
 */
var startIconGoogle ={url : "../images/icons/marker_start.png"};

/**
 * 结束标记图片
 */
var endIconGoogle = {url : "../images/icons/marker_end.png"};

/**
 * 灰色标记图片
 */
var greyIconGoogle = {url : "../images/icons/marker_grey.png"};

/**
 * 暗红色标记图片
 */
var dull_redGoogle = {url : "../images/icons/marker_dull_red.png"};

 

引有JS,本机测试用可以不用key

http://maps.google.com/maps/api/js?language=zh-cn&sensor=true

 类似资料: