当前位置: 秋叶网络博客 前端编程 ◊ 百度地图和谷歌地图封装插件(二)

百度地图和谷歌地图封装插件(二)

作者:秋叶 发表时间: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>
0
文章作者: 秋叶网络博客,本站鼓励原创。
转载请注明本文地址:https://www.mizuiren.com/blog/448.html
目录:前端编程标签:谷歌地图 6209次阅读
登 录
点击获取验证码
还没账号?点击这里