zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    js 运算符优先级
    原生js获取样式
    RGBA 与opacity
    闭包(自己的学习+理解~~水水的)
    css 单位-px、em、rem、百分比
    js之正则1
    querySelector和querySelectorAll
    关于瀑布流的算法(转淘宝ued)
    瀑布流的几个注意点
    jsonp跨域
  • 原文地址:https://www.cnblogs.com/yexinw/p/2185887.html
Copyright © 2011-2022 走看看