Google Maps(JS)开发入门(10):点击地图添加marker效果

这里要实现的是一种地图交互效果,用户在地图上点击鼠标左键,然后在地图上会添加一个marker,同时地图的中心将移到用户点击的坐标点。实现方法并不是很复杂,需要对地图的点击事件做一个监听。

核心代码

var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(25.091075 , 121.55983449999997)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
  google.maps.event.addListener(map,'click',function(e){//监听click事件
    addMarker(e.latLng,map);
  });
}
//添加marker函数
function addMarker(position,map){
  var marker = new google.maps.Marker({
    position: position,
    map: map
  });
  map.panTo(position);
}

代码解释

google.maps.event.addListener(map,'click',function(e){//监听click事件 addMarker(e.latLng,map); }); } 

这句代码中 ,对地图的点击左键事件做了一个监听,如果用户点击了左键,触发addMarker函数,同时将点击处的经纬度和map对象传给addMarker函数,在函数中完成添加marker的任务。需要说明的是,这里也用到了闭包,关于闭包,可以点击这里

效果展示

全部代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>点击添加marker</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.exp&key=你的API-KEY&sensor=true&language=zh-cn"></script>
<script type="text/javascript">
var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(25.091075 , 121.55983449999997)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
  google.maps.event.addListener(map,'click',function(e){
    addMaker(e.latLng,map);
  });
}
function addMaker(position,map){
  var marker = new google.maps.Marker({
    position: position,
    map: map
  });
  map.panTo(position);
}
window.onload = initialize;
</script>
</head>
<body>
  <div id="map-canvas" style="width:500px; height:500px;"></div>
</body>
</html>

把这段代码直接复制保存为.html文件,然后修改你的API Key即可使用。如果你没有 ,这里是API-KEY申请方法

Google Maps(JS)开发入门(9):事件监听中使用闭包 Google Maps(JS)开发入门(11):获取地图事件属性

作者:,GIS爱好者。
分享本文,请您带上本文链接
分享到:

发表评论