javascript - Google API V3 鼠标悬停并调用

标签 javascript google-maps

我即将开始在拥有旧版 Google map 的网站中实现 Google map V3。

  1. 这是一个很难升级的改变吗?

  2. 我还需要将 api key 添加到调用中

    例如:

    新的通话

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">

    上一次通话

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=someKEY">

  3. 最后,我需要将鼠标悬停在带有地址的链接上,并且该地址显示在 map 中,这是一项复杂的任务吗?

最佳答案

  1. v3 API 的命名空间、类名和架构与 v2 API 完全不同。我不会说升级很困难,但它并不是微不足道的。进一步阅读:Announcing Google Maps API v3 .

  2. 您不再需要 v3 API 的 API key 。只需包含您在问题中提到的脚本即可。

  3. 对鼠标悬停时的地址进行地理编码并不是很困难。您可能需要查看以下示例来帮助您入门:

示例:

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps Geocoding On Hover</title> 
   <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script> 
</head> 
<body> 
   <div id="map" style="width: 400px; height: 300px;"></div> 

   <ul>
     <li><a href="#" onmouseover="gc(this);">Oxford Street, London, UK</a></li>
     <li><a href="#" onmouseover="gc(this);">5th Ave, New York, USA</a></li>
     <li><a href="#" onmouseover="gc(this);">Via Nazionale, Rome, Italy</a></li>
     <li><a href="#" onmouseover="gc(this);">Rue de Rivoli, Paris, France</a></li>
   </ul>

   <script type="text/javascript"> 
     var address = 'London, UK';

     var map = new google.maps.Map(document.getElementById('map'), { 
         mapTypeId: google.maps.MapTypeId.ROADMAP,
         center: new google.maps.LatLng(40.71, -74.00),
         zoom: 13
     });

     var geocoder = new google.maps.Geocoder();
     var marker;

     function gc(element) {
       geocoder.geocode({
           'address': element.innerHTML
        }, 
        function(results, status) {
          if(status == google.maps.GeocoderStatus.OK) {

            // Clear the previous marker
            if (marker) marker.setMap(null);

            // Set the new marker
            marker = new google.maps.Marker({
              position: results[0].geometry.location,
              map: map
            });

            // Center the map on the geocoded result
            map.setCenter(results[0].geometry.location);
          }
       });
     }

   </script> 
</body> 
</html>

屏幕截图:

Google Maps Geocoding OnMouseOver

关于javascript - Google API V3 鼠标悬停并调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3237984/

相关文章:

javascript - 放在 map 上之前的谷歌地图圆针

android - Android中的加权热图

javascript - 如何将 URL 从图像的 src 属性复制到 jQuery 中的 href 属性?

javascript - 向名为 'speak' 的原型(prototype)添加方法

javascript - 将 JavaScript 显示为文件中的可编辑代码

google-maps - 在 typescript 类中创建谷歌地图实例

java - Android 版 Google map V2 无法正常工作?

javascript - 动态设置页面背景图片

javascript - Angularjs 与 restangular : wrong PUT url

java - 如何修复模糊的自定义标记 Android google map api