百度地图和谷歌地图封装插件（二）

作者：秋了秋发表时间：2016年06月17日

上一篇介绍了《百度地图插件》，这一片文章介绍谷歌地图插件，温馨提示：使用谷歌地图请先翻墙。相对于百度地图插件，谷歌的更加简单些，代码也比较少：

html结构：

<input id="city-input">
<div id="dituContent"></div>

js代码为：

//谷歌地图
window.initMap = function() {
  var map = new google.maps.Map(document.getElementById('dituContent'), {
    zoom: 15,
    center: {lat: 22.538329100000002, lng: 114.02683350000007}//坐标
  });
  var geocoder = new google.maps.Geocoder();
  $(".city-input").keyup(function(e) {
      var e=e||window.event;
      if(e.keyCode==13){
          geocodeAddress(geocoder, map);
      }
  });
}

function geocodeAddress(geocoder, resultsMap) {
    var detail = $('#city-input').val()||"";
    var address=detail ;
  geocoder.geocode({'address': address}, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      resultsMap.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: resultsMap,
        position: results[0].geometry.location
      });


    //标注提示窗口
    var infoWindow = new google.maps.InfoWindow({
        content: "当前位置：" + results[0].formatted_address   //提示窗体内的提示信息
    });
    //打开提示窗口
    infoWindow.open(map, marker);

    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

除此之外还要另外加载一个js文件，在页面最底部引入：

<script src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap" defer sync></script>

文章作者： “秋了秋”个人博客，本站鼓励原创。

转载请注明本文地址：http://netblog.cn/blog/448.html

目录: 前端编程标签: 谷歌地图 8026次阅读

百度地图和谷歌地图封装插件（二）

作者：秋了秋 发表时间：2016年06月17日

作者：秋了秋发表时间：2016年06月17日