Google map API3 标注、添加事件、地图查询

来源:互联网 发布:日本皇族知乎 编辑:程序博客网 时间:2024/04/26 07:14

   其实google map api3标注,在google提供的api中都有说明,都很详细,叫叠加层,但有时候我们需要对该标注进行操作,比如单击、双击等。一下是代码,大部分是用原来的代码。 代码入下:

      google api 地址:https://developers.google.com/maps/documentation/javascript/overlays?hl=zh-CN

        

    var markersArray =[];
  var map;
  var myLatlng;
     /**
      * 加载地图
      */
    function initialize() {
  if(myLatlng==null){
  myLatlng = new google.maps.LatLng(46.80399, 130.381465);
  }
var mapOptions = {
 zoom: 10,
 center: myLatlng,
 mapTypeId: google.maps.MapTypeId.ROADMAP,
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);


/****地图添加标记***/    
    google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng,‘Hello!’);
  })

    }
     
    /***添加标记方法**/
    function addMarker(location,title){
marker = new google.maps.Marker({
map: map,
   draggable:true,
   position: location,
   title:title
 });
markersArray.push(marker);

     /********给标记添加双击事件  删除该标记************/
    google.maps.event.addListener(marker, 'dblclick', function(event) {
    if(confirm('确认删除地图标记?')){
    this.setMap(null);
   
  })

    }

  
   /**********根据address返回经纬度,重新初始话地图进行完成查询操作******************/
   function search(address){
var geocoder = new google.maps.Geocoder();
geocoder.geocode( {
'address' :address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var currentLatLng = results[0].geometry.location; 
myLatlng =new google.maps.LatLng(currentLatLng.lat(), currentLatLng.lng());
initialize();
//results数组里有很多有用的信息,包括坐标和返回的标准位置信息
} else {
alert('加载失败!');
}
});

   }
    </script>


第一环保网

0 0