GoogleMap V3 Marker 标记

最新推荐文章于 2021-05-27 07:06:09 发布

ponlya

最新推荐文章于 2021-05-27 07:06:09 发布

阅读量154

点赞数

分类专栏： maps 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/ponlya/article/details/84435991

版权

maps 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

ponlya

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
GoogleMap V3 Marker 标记

Marker用来标记单个点，或者多个示例&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Marker Animations&lt;/title&gt; &lt;link href="http://cod
复制链接

扫一扫