包含地图初始化,添加标记,画线,取点的坐标等方法
<script src="http://maps.googleapis.com/maps/api/js?key=[you register key]&sensor=false"></script>
<div class="map"></div>
<script type="text/javascript">
$(function () {
var myMap;
var cars = {};
var ico = '/img/car.ico';
var minZoom = 8;
var maxZoom = 16;
function init() {
//初始化地图
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(29.872885, 121.552809),//中心点
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
myMap = new google.maps.Map(document.getElementById("map"), mapOptions);
//控制缩放级别
google.maps.event.addListener(myMap, 'zoom_changed', function () {
if (myMap.getZoom() < minZoom) {
myMap.setZoom(minZoom);
}
if (myMap.getZoom() > maxZoom) {
myMap.setZoom(maxZoom);
}
});
}
function addMarkers(points) {
for (var i = 0; i < points.length; i++) {
addMarker(points[i]);
}
}
function addMarker(p) {
var o = cars[p.id];
o && o.setMap(null);
cars[p.id] = new google.maps.Marker({
map: myMap,
icon: ico,
title: p.name,
status: 'active',
position: new google.maps.LatLng(p.x, p.y)
});
}
init();
//画线
var linePoints = [
new google.maps.LatLng(29.83092, 121.55923),
new google.maps.LatLng(29.83020, 121.55923),
new google.maps.LatLng(29.83015, 121.56059),
new google.maps.LatLng(29.82929, 121.56423),
new google.maps.LatLng(29.82276, 121.56407),
new google.maps.LatLng(29.82273, 121.56652),
new google.maps.LatLng(29.82234, 121.56652),
new google.maps.LatLng(29.82209, 121.56695),
];
var trackPath = new google.maps.Polyline({
path: linePoints,
strokeColor: "#FF0000", // 线条颜色
strokeOpacity: 1.0, // 线条透明度
strokeWeight: 2 // 线条粗细
});
trackPath.setMap(myMap); //画线
//右键取当前点的坐标
google.maps.event.addListener(myMap, "rightclick", function(event) {
var lat = event.latLng.lat();
var lng = event.latLng.lng();
// 经纬度
alert("Lat=" + lat + "; Lng=" + lng);
});
//添加标记
var list = [
{ id: 1, x: 29.761246, y: 121.546600, name: 'driver 1' },
{ id: 2, x: 29.891246, y: 121.566600, name: 'driver 1' },
];
addMarkers(list);
});
</script>