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
  • 相关阅读:
    postgresql 添加触发器
    postgresql 操作
    postgresql 更新自增变量
    java8 stream api 文件流甚是牛逼
    fastjson妙用
    idea中springboot内置tomcat控制台中文乱码解决
    linux中开放某个端口
    idea中application.properties文件防止中文汉字自动转换成unicode编码解决办法
    使用vue开源项目vue-framework-wz遇到的问题以及解决方案
    rsync的使用
  • 原文地址:https://www.cnblogs.com/yexinw/p/2185887.html
Copyright © 2011-2022 走看看