`
ponlya
  • 浏览: 160421 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

GoogleMap V3 Marker 标记

    博客分类：
  • maps
 
阅读更多

Marker用来标记单个点，或者多个

示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Marker Animations</title> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
  var myLatlng = new google.maps.LatLng(36.612,113.766); //河北，邯郸
  var mapOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Hello World!'
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
 </script> 
</head>
<body>
	<div id="map-canvas"></div>
</body>
</html>

 标记多个点，并为标记设置click事件

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(30.51667,114.31667),
    mapTypeId: google.maps.MapTypeId.HYBRID
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  setMarkers(map, beaches);
}

var beaches = [
  ['河北省邯郸市涉县井店二街村 ',36.60 , 113.77, 4], 
  ['2广东省惠州市龙门县仙女石 ', 23.75, 113.98, 1]
];

function setMarkers(map, locations) {
  // Add markers to the map  
  for (var i = 0; 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, 
        title: beach[0],
        zIndex: beach[3]
    });
	
	google.maps.event.addListener(marker, 'click', function() {
		map.setZoom(8);
		map.setCenter(marker.getPosition());
	});

  }
}
google.maps.event.addDomListener(window, 'load', initialize);

 

分享到：
| GoogleMap V3
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics