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

本文介绍如何使用Google Maps API v3实现地图标注,并添加交互功能如点击和双击事件处理。文中提供了详细的JavaScript代码示例,展示了如何创建、管理和响应地图上的标记。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值