google map 麻点图实现方法源码

最新推荐文章于 2021-05-12 10:17:08 发布

xrl2012

最新推荐文章于 2021-05-12 10:17:08 发布

阅读量519

点赞数

分类专栏： html教程

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

版权

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', -33.890542, 151.274856, 4],
	  ['Coogee Beach', -33.923036, 151.259052, 5],
	  ['Cronulla Beach', -34.028249, 151.157507, 3],
	  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
	  ['Maroubra Beach', -33.950198, 151.259302, 1]
];
var prev_infowindow =false; 
var pids = "11636;11672;37601;37605;";

function initMap(){
    var lat = "-33.9";
    var lng = "151.2";

	
    var myLatlng = new google.maps.LatLng(lat,lng);
    var myOptions = {
		zoom: 10,
		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: image,
	    icon:'images/beachflag.png',
        shape: shape,
        title: beach[0],
       // zIndex: beach[3]

    });
	//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);	
      });
	  
} 



</script>

</head>
<body  οnlοad="initMap()">
<div id="map_canvas" style="margin:0px; padding:0px; width:1000px; height:400px;" >

</div>

<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>


</body>

</html>