gmap3 地图（二）
慕容博涛
主要代码：
<script type="text/javascript">
var ifw=null;
var allMarkers={};
var data;
var panorama;
$(function () {
data = JSON.parse($("#hdnresult").val());
loadleft(data);
$("#googleMap").gmap3({
map: {
options: {
center: [43.447194799777414, -79.20602975898436],
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
events: {
bounds_changed: function (map) {
var bounds = map.getBounds();
var mapData = JSON.parse($("#hdnresult").val());
var dataArray = [];
for (var i = 0; i < mapData.length; i++) {
var point = new google.maps.LatLng(mapData[i].lat, mapData[i].lng);
if (bounds.contains(point)) {
dataArray.push(mapData[i]);
}
}
var zoom = map.getZoom(); //21
if (zoom == 21) {
$(".cluster-1").css("background-image", "url(images/map/007.png)");
} else {
$(".cluster-1").css("background-image", "url(images/map/m1.png)");
}
loadleft(dataArray);
}
}
},
marker: {
values: data,
cluster: {
radius: 100,
// This style will be used for clusters with more than 0 markers
0: {
content: "<div class='cluster cluster-1'>CLUSTER_COUNT</div>",
width: 53,
height: 52
},
// This style will be used for clusters with more than 20 markers
5: {
content: "<div class='cluster cluster-2'>CLUSTER_COUNT</div>",
width: 56,
height: 55
},
// This style will be used for clusters with more than 50 markers
10: {
content: "<div class='cluster cluster-3'>CLUSTER_COUNT</div>",
width: 66,
height: 65
},
events: {
click: function (cluster, event, context) {
var map = $(this).gmap3("get");
var zoom = map.getZoom(); //21
var aaa = $(cluster.main.getDOMElement());
var icerik = "";
if (zoom == 21) {
for (i = 0; i < context.data.markers.length; i++) {
icerik += "<div class='accordionButton'>" + context.data.markers[i].data.itemname + "</div>";
}
if (context.data.markers[0]) {
var atLng = new google.maps.LatLng(context.data.markers[0].lat, context.data.markers[0].lng);
showInfoWindow(icerik, atLng, 21);
}
}
}
}
},
events: {
click: function (marker, event, context) {
showdetail(context.data.itemid);
}
}
}
});
$("#leftdata").on("click", ".street", function () {
var lat = $(this).attr("lat");
var lng = $(this).attr("lng");
var fenway = new google.maps.LatLng(lat, lng);
var map = $("#googleMap").gmap3("get");
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10,
zoom: 1
}
};
panorama = new google.maps.StreetViewPanorama(document.getElementById("streetview"), panoramaOptions);
map.setStreetView(panorama);
});
$("#btnmylocation").click(function () {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, { timeout: 8000 });
}
});
$("#btnAddLocation").click(function () {
var lat = 43.7631810000000;
var lng = -79.4922257000000;
var atLng = new google.maps.LatLng(lat, lng);
var address = getAddressByLatLng(atLng);
var content = '<div><input type="text" id="a" /><br /><input type="text" id="Text1" value="#@#"/><br /><input type="button" id="btnsub" value="确定"/><input type="button" id="btnclose" value="关闭"/></div>';
if (address) {
content = content.replace("#@#", address);
} else {
content = content.replace("#@#", "");
}
clearAddLocation_Marker();
showInfoWindow(content, atLng);
$("#googleMap").gmap3({
marker: {
latLng: atLng,
options: {
draggable: true
},
tag: ["marker_addLocation"],
events: {
dragend: function (marker) {
var latlng = marker.getPosition();
var address = getAddressByLatLng(latlng);
var content = '<div><input type="text" id="a" /><br /><input type="text" id="Text1" value="#@#"/><br /><input type="button" id="btnsub" value="确定"/><input type="button" id="btnclose" value="关闭"/></div>';
if (address) {
content = content.replace("#@#", address);
} else {
content = content.replace("#@#", "");
}
showInfoWindow(content, latlng);
}
}
},
map: {
options: {
center: atLng,
zoom: 12
}
}
});
});
$("#btnHideStreetView").click(function () {
if (panorama)
panorama.setVisible(false);
});
});
function clearAddLocation_Marker()
{
$("#googleMap").gmap3({
clear: {
name: "marker",
tag: ["marker_addLocation"],
all: true
}
});
}
function getAddressByLatLng(latLng) {
var address = "";
var geo = new google.maps.Geocoder();
geo.geocode({
"location": latLng
}, function (results, state) {
if (state == google.maps.GeocoderStatus.OK) {
if (results[0]) {
address = results[0].formatted_address;
}
}
}
);
return address;
}
function geoSuccess(p){
var lat = p.coords.latitude;
var lng = p.coords.longitude;
var atLng = new google.maps.LatLng(result.lat, result.lng);
$("#googleMap").gmap3({
marker: {
latLng: atLng
},
map: {
options: {
center: atLng,
zoom: 12
}
}
});
}
function geoError(e) {
switch(e.code) {
case 1:
alert("没有权限");
break;
case 2:
alert("无法确定设备的位置");
break;
case 3:
alert("超时");
break;
}
}
function markerSelected(id) {
$("ul li").removeClass("bgcolor");
$("#" + id).addClass("bgcolor");
}
function loadleft(data) {
if(!data)return;
var inhtml = "";
inhtml += ' <li style=" width:300px;" id="a">';
inhtml += '<a href="javascript:void(0)" class="itemname" id="aa">aaaaaaaaa</a> ';
inhtml += '</li>';
for (var i = 0; i < data.length; i++) {
inhtml += ' <li style=" width:300px;" id="' + data[i].data.itemid + '">';
//inhtml += '<a href="javascript:void(0)" class="itemname" οnclick="showdetail(' + data[i].lat + ',' + data[i].lng + ')">' + data[i].data.itemname + '</a> <a href="javascript:void(0);" class="street" lat="' + data[i].lat + '" lng="' + data[i].lng + '">街景</a>';
inhtml += '<a href="javascript:void(0)" class="itemname" οnclick="showdetail(' + data[i].data.itemid + ')">' + data[i].data.itemname + '</a> <a href="javascript:void(0);" class="street" lat="' + data[i].lat + '" lng="' + data[i].lng + '">街景</a>';
inhtml += '</li>';
}
$("#leftdata").html(inhtml);
}
function showdetail(itemid)
{
if(!data)return;
closeInfoWindow();
var latLng;
var result;
for(var i=0;i<data.length;i++)
{
if(itemid==data[i].data.itemid)
{
result=data[i];
break;
}
}
latLng = new google.maps.LatLng(result.lat, result.lng);
showInfoWindow(result.data.itemname, latLng,12);
}
function closeInfoWindow() {
if (ifw) {
ifw.close();
ifw = null;
}
}
function showInfoWindow(content, latLng,zoom) {
closeInfoWindow();
var map = $("#googleMap").gmap3("get");
ifw = new google.maps.InfoWindow({
maxWidth: 200,
content: content,
position: latLng,
pixelOffset: {
height: -25,
width: 0
}
});
ifw.open(map);
if (zoom) {
map.setCenter(latLng);
map.setZoom(zoom);
}
}
</script> JSON数据格式：
var macDoList = [
{lat:49.00408,lng:2.56228,data:{drive:false,zip:93290,city:"TREMBLAY-EN-FRANCE"}},
{lat:49.00308,lng:2.56219,data:{drive:false,zip:93290,city:"TREMBLAY-EN-FRANCE"}},
{lat:48.93675,lng:2.35237,data:{drive:false,zip:93200,city:"SAINT-DENIS"}},
{lat:48.93168,lng:2.39858,data:{drive:true,zip:93120,city:"LA COURNEUVE"}},
{lat:48.91304,lng:2.38027,data:{drive:true,zip:93300,city:"AUBERVILLIERS"}},
{lat:48.90821,lng:2.51795,data:{drive:false,zip:93190,city:"LIVRY-GARGAN"}},
{lat:48.90672,lng:2.33205,data:{drive:false,zip:93400,city:"SAINT-OUEN"}},
{lat:48.89191,lng:2.44477,data:{drive:true,zip:93130,city:"NOISY-LE-SEC"}},
{lat:48.87986,lng:2.4164,data:{drive:false,zip:93260,city:"LES LILAS"}},
{lat:48.8556,lng:2.41621,data:{drive:false,zip:93100,city:"MONTREUIL"}},
{lat:48.83445,lng:2.56199,data:{drive:true,zip:93160,city:"NOISY-LE-GRAND"}},
{lat:48.83907,lng:2.48585,data:{drive:false,zip:94130,city:"NOGENT-SUR-MARNE"}},
{lat:48.82102,lng:2.41444,data:{drive:false,zip:94220,city:"CHARENTON-LE-PONT"}},
{lat:48.82011,lng:2.47548,data:{drive:true,zip:94340,city:"JOINVILLE-LE-PONT"}},
{lat:48.81429,lng:2.50873,data:{drive:false,zip:94500,city:"CHAMPIGNY-SUR-MARNE"}},
{lat:48.79584,lng:2.41266,data:{drive:true,zip:94400,city:"VITRY-SUR-SEINE"}},
{lat:48.79193,lng:2.36959,data:{drive:true,zip:94800,city:"VILLEJUIF"}},
{lat:48.76182,lng:2.44355,data:{drive:true,zip:94190,city:"VILLENEUVE-SAINT-GEORGES"}},
{lat:48.75845,lng:2.37052,data:{drive:false,zip:94320,city:"THIAIS"}},
{lat:48.75619,lng:2.34647,data:{drive:true,zip:94150,city:"RUNGIS"}},
{lat:48.74476,lng:2.40973,data:{drive:true,zip:94310,city:"ORLY"}},
{lat:48.939,lng:2.52663,data:{drive:true,zip:93270,city:"SEVRAN"}},
{lat:46.04532,lng:4.05548,data:{drive:true,zip:42153,city:"RIORGES"}},
{lat:45.35301,lng:5.33501,data:{drive:true,zip:38590,city:"SAINT-ÉTIENNE-DE-SAINT-GEOIRS"}},
{lat:45.86416,lng:6.62534,data:{drive:false,zip:74120,city:"MEGÈVE"}},
{lat:47.48832,lng:-0.54378,data:{drive:true,zip:49100,city:"ANGERS"}},
{lat:43.17459,lng:2.99269,data:{drive:true,zip:11100,city:"NARBONNE"}}
];
希望看到此文章的朋友能给些指正和优化，谢谢
类似资料：