• Google Maps JavaScript API V3 根据地址 加载地图


     

    效果图如下:
    Google Maps JavaScript API V3 根据地址 加载地图

    javascript代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>
          无标题文档
      </title>
      <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
              
      </script>
      <script type="text/javascript">
              var geocoder;
      var map;
      var query = "香港 湾仔 维多利亚公园";
      var display = "<b>单位:</b> 维多利亚公园";
    
      function initialize() {
          geocoder = new google.maps.Geocoder();
          var myOptions = {
              zoom: 17,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          }
          map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
          codeAddress();
      }
    
      function codeAddress() {
          var address = query;
          geocoder.geocode({
              'address': address
          }, function(results, status) {
              if (status == google.maps.GeocoderStatus.OK) {
                  map.setCenter(results[0].geometry.location);
                  var marker = new google.maps.Marker({
                      map: map,
                      position: results[0].geometry.location
                  });
                  var infowindow = new google.maps.InfoWindow({
                      content: "<b>地址:</b>" + address + "<br>" + display
                  });
                  infowindow.open(map, marker);
              } else {
                  alert("未能解析该地址的原因: " + status);
              }
          });
      }
      </script>
    </head>
    
    <body onload="initialize()">
      <div id="map_canvas" style="500px; height:400px">
      </div>
    </body>
    联盟快卖 商人,生意人,待创业人士在此可以共赢互利 期待你的加入 群号:140809277
  • 相关阅读:
    症状解,杠杆解
    分页[转]
    如何用SVN版本控制器将提交的文件还原到以前的版本
    VN问题:error:请求的名称有效,但是找不到请求的类型的
    客户端怎么查看SVN的代码库
    VisualSVN Server的配置和使用方法
    2017年04月19日
    github 添加geilibuy仓库,给力百货开放源代码
    gae crawler
    windows python相关工具
  • 原文地址:https://www.cnblogs.com/yexinw/p/2185887.html
Copyright © 2020-2023  润新知