您的位置：首页 > 编程语言 > Go语言
google map 美国地区麻点图效果

2016-03-04 16:01 369 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>map</title>

<script type="text/javascript" src="http://www.taketours.com/js/jquery/jquery-core-and-ui.js"></script>
<script type="text/javascript" src="http://ditu.google.cn/maps/api/js?sensor=false&language=zh-CN"></script>
<script type="text/javascript" src="http://www.taketours.com/js/gmap3.min.5.js"></script>
<script type="text/javascript" src="http://www.taketours.com/js/gmap3.min.5.js"></script>

<script type="text/javascript">
var map = null;
var beaches = [
['Bondi Beach', 40.7984, -73.96030, 4],
['Coogee Beach', 41.7984, -73.96030, 5],
['Cronulla Beach', 42.7984, -76.96030, 3],
['Manly Beach', 36.136349, -116.162388, 2],
['Maroubra Beach', 36.136349, -115.162388, 1]
];

var prev_infowindow =false;
function initMap(){
var lat = "37.099998";
var lng = " -89.900002";

var myLatlng = new google.maps.LatLng(lat,lng);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl : false,
mapTypeControl : false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.BIG,
position: google.maps.ControlPosition.LEFT_TOP
}
}

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map, beaches);

}
function setMarkers(map, locations) {

var image = {
url: 'images/beachflag.png',
size: new google.maps.Size(20, 32),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(0, 32)

};

var shape = {
coords: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'

};

for (var i = 1; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);

var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon:'https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_red'+(i)+'.png',
shape: shape,
title: beach[0],

});
//Attach click event to the marker.
showinfomessage(marker, i);
}
}

function showinfomessage(marker,number)
{

var html = $("#d" + number).html();
var infowindow = new google.maps.InfoWindow({
content:html
});

google.maps.event.addListener(marker, 'click', function(event) {
if(prev_infowindow){
prev_infowindow.close();
}
prev_infowindow = infowindow;
infowindow.open(map,marker);
});

}

function show_marker_on_map(){
var lat = -33.890542;
var lng =  151.274856;
var shape = {
coords: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'

};

var myLatLng = new google.maps.LatLng(lat, lng);

var marker = new google.maps.Marker({
position: myLatLng,
map: map,
//icon: image,
icon:'http://www.taketours.com/images/bus_map_link.gif',
shape: shape,
// title: beach[0],
// zIndex: beach[3]

});

}

</script>
<style type="text/css">
.labels {
color: white;
background-color: red;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 10px;
text-align: center;
width: 30px;
white-space: nowrap;
}
</style>

</head>
<body  onload="initMap()">
<div id="map_canvas" style="margin:0px; padding:0px; width:100%; height:400px;" >

</div>
<input type="button" name="button" value="map1" onclick="show_marker_on_map()"/>
<div id="d1" style="width:185px;height:80px;text-align:left; display:none">1Ramada Plaza Newark Airport<br>Newark,New Jersey<br>160 Frontage Road</div>
<div style="width:100%;height:500px;"  name="n_google_map21739"></div>
<div id="d2" style="width:185px;height:80px;text-align:left; display:none">2Ramada Plaza Newark Airport<br>Newark,New Jersey<br>160 Frontage Road</div>
<div style="width:100%;height:500px;"  name="n_google_map21739"></div>
<div id="d3" style="width:185px;height:80px;text-align:left; display:none">2Ramada Plaza Newark Airport<br>Newark,New Jersey<br>160 Frontage Road</div>
<div style="width:100%;height:500px;"  name="n_google_map21739"></div>
<div id="d4" style="width:185px;height:80px;text-align:left; display:none">3Ramada Plaza Newark Airport<br>Newark,New Jersey<br>160 Frontage Road</div>
<div style="width:100%;height:500px;"  name="n_google_map21739"></div>
<div id="d5" style="width:185px;height:80px;text-align:left; display:none">4Ramada Plaza Newark Airport<br>Newark,New Jersey<br>160 Frontage Road</div>
<div style="width:100%;height:500px;"  name="n_google_map21739"></div>
<div id="d6" style="width:185px;height:80px;text-align:left; display:none">5Ramada Plaza Newark Airport<br>Newark,New Jersey<br>160 Frontage Road</div>
<div style="width:100%;height:500px;"  name="n_google_map21739"></div>
<div id="number" style=" color:#FFFFFF; font-size:12px">2</div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航