caozhiping

最近在做谷歌地图,放一个例子,添加一个标注,直接复制到一个html页面就可以使用。

 

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html
        {
            height: 100%;
        }
        body
        {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map_canvas
        {
            height: 100%;
        }
    </style>

     <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=这里的key换成你自己在谷歌地图上申请的&sensor=false">
    </script>

    <script type="text/javascript">
        //sensor用于表示应用是否会使用 GPS 定位器等传感器来确定用户的位置TRUE_OR_FALSE
                function initialize() {
                    var myLatlng = new google.maps.LatLng(38.55, 121.36);//大连
                    var mapOptions = {
                        center: myLatlng, //地图中心位置
                        zoom: 8,//地图缩放级别
                        mapTypeId: google.maps.MapTypeId.ROADMAP//用户指定地图显示类别
                    };
                    //map对象将id为map_canvas(主要,dom容器只要是一般的div等容器就可以)作为容器,并指定了初始化配置信息
                    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
                    var marker = new google.maps.Marker({
                        position: myLatlng,
                        map: map,
                        title: \'Hello World!\'
                    });
                }
                google.maps.event.addDomListener(window, \'load\', initialize);
    </script>

</head>
<body onload="initialize()">
    <div id="map_canvas" style="width: 100%; height: 100%">
    </div>
</body>
</html>

 

下一篇,放上添加多个标注的例子

分类:

技术点:

相关文章:

  • 2021-05-05
  • 2021-12-09
  • 2021-10-06
  • 2021-11-23
  • 2021-10-16
  • 2021-11-12
  • 2021-04-11
  • 2021-11-17
猜你喜欢
  • 2021-10-27
  • 2021-12-23
  • 2021-11-29
  • 2021-04-23
  • 2022-01-01
  • 2021-12-09
  • 2022-12-23
相关资源
相似解决方案