google map 美国地区麻点图效果

最新推荐文章于 2023-01-06 14:54:38 发布

xrl2012

最新推荐文章于 2023-01-06 14:54:38 发布

阅读量1.2k

点赞数

分类专栏： html教程

本文链接：https://blog.csdn.net/xrl2012/article/details/50803394

版权

html教程专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!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  οnlοad="initMap()">
<div id="map_canvas" style="margin:0px; padding:0px; width:100%; height:400px;" >

</div>
<input type="button" name="button" value="map1" οnclick="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>