Google Map 简单应用

最新推荐文章于 2018-08-06 13:24:33 发布

xydkd

最新推荐文章于 2018-08-06 13:24:33 发布

阅读量543

点赞数

分类专栏：个人文章标签： google function stylesheet image javascript api

本文链接：https://blog.csdn.net/xydkd/article/details/7210942

版权

个人专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Ground Overlays</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//判断地图是否出界

var map;
var geocoder;
var infowindow = new google.maps.InfoWindow();
function initialize() {

//缩放等级
var minZoomLevel = 4;
//地图中心
var newark = new google.maps.LatLng(30.688707,104.057636);
//图片位置
var imageBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(30.782548,103.947716),
      new google.maps.LatLng(30.889455,104.179173));
//GMAP初始化设置
var myOptions = {
    zoom: 13,
    center: newark,
   disableDefaultUI: true,
    navigationControl: true,
   //启用滑轮
   scrollwheel: false,
   //启用拖动
   //draggable: false,
    navigationControlOptions: {
    style: google.maps.NavigationControlStyle.SMALL
},
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
//新建地图
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
   /*//自定义地图缩放范围
    google.maps.event.addListener(map, 'zoom_changed',
    function() {
        if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
    });

    //自定义地图的显示范围：中国区域内部
    var strictBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(30.782548,103.947716),
        new google.maps.LatLng(30.589455,104.179173
    ));
    google.maps.event.addListener(map, 'dragend',
    function() {
        if (strictBounds.contains(map.getCenter())) return;
        var c = map.getCenter(),
        x = c.lng(),
        y = c.lat(),
        maxX = strictBounds.getNorthEast().lng(),
        maxY = strictBounds.getNorthEast().lat(),
        minX = strictBounds.getSouthWest().lng(),
        minY = strictBounds.getSouthWest().lat();
        if (x < minX) x = minX;
        if (x > maxX) x = maxX;
        if (y < minY) y = minY;
        if (y > maxY) y = maxY;
        map.setCenter(new google.maps.LatLng(y, x));
    }); */
   //将图片覆盖原地图
var oldmap = new google.maps.GroundOverlay("3.png",imageBounds);
oldmap.setMap(map);
//添加点击画标注
   google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(event.latLng);
      });
}
//画自定义标注
function placeMarker(location){
      var image = '2.png';
      var clickedLocation = new google.maps.LatLng(location);
      var marker = new google.maps.Marker({
          position: location,
          map: map,
          icon:image
      });
   var contentString="经度:"+location.lng()+"纬度"+location.lat();
   infowindow.setContent(contentString);
   infowindow.setPosition(location);
   infowindow.open(map);
}

</script>
</head>
<body onLoad="initialize()">
<div id="map_canvas"></div>
</body>
</html>

xydkd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Google Map 简单应用

Google Maps JavaScript API v3 Example: Ground Overlays//判断地图是否出界var map;var geocoder;var infowindow = new google.maps.InfoWindow(); function initialize() { //缩放等级 var m
复制链接

扫一扫

专栏目录