网页嵌入Google Map地图

最新推荐文章于 2020-02-24 23:54:15 发布

lzyfn

最新推荐文章于 2020-02-24 23:54:15 发布

阅读量251

点赞数

分类专栏：网站开发文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/lzyfn/article/details/84359046

版权

网站开发专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!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>Google Map</title>
     <%= stylesheet_link_tag 'jquery-ui.css', :media => 'screen' %>
     <%= javascript_include_tag "jquery.js" %>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
// require jquery

var App = {};

App.Maps = {
    centerLatLng: null,
    googleMap: null,
    markerOptions: null,
    infoWindow: null,
    defaultOptions: null,
    hotel_icon: null,
    place_icon: null,
    init: function () {
        this.defaultOptions = $.extend(this.defaultOptions, {
            zoom: 13,
            center: null,
            scaleControl: true,
            navigationControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        this.hotel_icon = new google.maps.MarkerImage('2.png',
            new google.maps.Size(27, 31),
            new google.maps.Point(0, 0),
            new google.maps.Point(14, 29));
        this.place_icon = new google.maps.MarkerImage('1.png',
            new google.maps.Size(27, 31),
            new google.maps.Point(27, 0),
            new google.maps.Point(14, 29));
        this.centerLatLng = new google.maps.LatLng(39.983421, 116.337769);
        this.defaultOptions.center = this.centerLatLng;
        this.googleMap = new google.maps.Map(document.getElementById("map_canvas"), this.defaultOptions);
        this.infoWindow = new google.maps.InfoWindow({ content: '' });


        this.markerFactory($.extend(this.markerOptions, {}));
        for (var i = 0; i < 5; i++) {
            this.markerFactory($.extend(this.markerOptions, {latLng: new google.maps.LatLng(39.993421, 116.307769 + i * 0.01), title: 'ss' + i, content: 'cc' + i, i: i}));
        }

    }, markerFactory: function (options) {
        var marker = new google.maps.Marker({
            position: options.latLng || this.centerLatLng,
            map: this.googleMap,
            icon: options.icon,
            title: options.title
        });
        if (options.latLng) {
            google.maps.event.addListener(marker, 'click', function () {
                App.Maps.infoWindow.setContent(options.content);
                App.Maps.infoWindow.setPosition(options.latLng);
                App.Maps.infoWindow.open(App.Maps.googleMap);
            });
        }
    }

};
 </script>
<style type="text/css">
   #google_map_div {
    height: 300px;
    width: 300px;
    }
</style>
 </head>
<body οnlοad="initialize()">
  <div id="google_map_div" ></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"
        rel="stylesheet" type="text/css" />
    <style>
       #map_canvas {
        margin: 0;
        padding: 0;
        width:600px;
        height:400px;
        border: 1px solid black;
      }
    </style>
    <title>Google Maps JavaScript API v3 Example: Map Simple</title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script>

    <script type="text/javascript">
        function initialize() {
            var latlng = new google.maps.LatLng(39.993421,116.337769);
            var options = {
                zoom: 15,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: true,
                mapTypeControlOptions:
                { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                    poistion: google.maps.ControlPosition.TOP_RIGHT,
                    mapTypeIds: [google.maps.MapTypeId.ROADMAP,
                  google.maps.MapTypeId.TERRAIN,
                   google.maps.MapTypeId.HYBRID,
                   google.maps.MapTypeId.SATELLITE]
                },
                navigationControl: true,
                navigationControlOptions: { style: google.maps.NavigationControlStyle.ZOOM_PAN },
                scaleControl: true,
                disableDoubleClickZoom: true,
                draggable: false,
                streetViewControl: true,
                draggableCursor: 'move'
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), options);
            var marker = new google.maps.Marker(
            {
                position: latlng,
                map: map,
                title: 'Click me'
            });

            var infowindow = new google.maps.InfoWindow({ content: 'Location info: Country Name: LatLng:' });
            google.maps.event.addListener(marker, 'click', function () {
                // Calling the open method of the infoWindow          
                infowindow.open(map, marker);
            });
        }
        window.onload = initialize;

    </script>
</head>
<body οnlοad="initialize()">
    <div id="map_canvas">
    </div>
</body>
</html>

if ($('#map-canvas .gmnoprint').length > 0) {

var str, test = '<div style="float: left;">' +

'<div id="testDis" draggable="false" title="">' +

'<label class="checkbox" >测距</label></div ></div>'

var gmnoprints = $('#map-canvas .gmnoprint');

for (var i = 0, k = gmnoprints.length; i < k; i++) {

if (gmnoprints[i].style['right'] == '0px' && gmnoprints[i].style['top'] == '0px') {

str = gmnoprints[i];

break;

}

google map API https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-CN

lzyfn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页嵌入Google Map地图

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&l
复制链接

扫一扫

专栏目录