`

网页嵌入Google Map地图

 
阅读更多 
<!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 onload="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 onload="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

分享到：
| html特殊符号
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Googlemap静态地图实现简介（网页复制版）

    Googlemap静态地图实现简介（网页复制版）看懂这个，可以实现浏览器上嵌入Google地图

    GoogleOfflineMapApplet.zip_MFC离线地图_google map地图_位置显示_地图显示_谷歌离线地图

    谷歌离线地图显示，或者在线地图显示,坐标位置标记

    桌面应用程序嵌入GoogleMap及其交互方法研究

    针对定位跟踪等应用领域的实际需求, 阐述了桌面应用程序嵌入Goog le Map 电子地图的基本方法, 研究了桌面程序与之进行交互操作实现路径, 并给出了一个基于GPS 的远程实时定位监测实验案例. 实验系统由桌面定位程序...

    unity地图插件Go Map

    高度可定制又搭配了经典的 Unity 检查器界面，GO Map 堪称最简单的地图插件。 通过在各种示例中进行选择可充分了解 GO Map 功能，并只需几次点击即可使用真实的 GPS 位置在智能手机上构建任何演示场景

    mfc中嵌入google map

    mfc界面中嵌入google map.通过mfc调用javascript来对地图进行交互。

    google map研究要点.doc

    google map 研究要点 想要用Google地图，首先就是要研究Google map API。Google map API是以JavaScript 形式对外开发的，允许您在网页中嵌入 Google 地图。

    3.（leaflet篇）leaflet接入高德、openstreetmap、google地图.zip

    下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/116912862

    VC++/MFC 对话框嵌入Google Map测试程序

    测试JavaScript编写的html文件，在MFC平台下调用是否有效，该程序存在Bug，得不到应用的实验现象

    ASP.NET页面中使用Google Map

    例如，我想从SQL Server中读取经纬度信息，然后在Google Map中插入一个点。如果熟悉AJAX的话，很快就能得出答案。我们必须用JavaScript调用ASP.NET服务器端函数，利用得到的数据来绘制Google Map。简单吧？其实，...

    matlab google map

    用matlab实现在GUI中嵌入google map地图，可以调整大小，可以输入坐标

    将GoogleMap嵌入到桌面应用程序窗口

    将GoogleMap嵌入到桌面应用程序窗口，适合地图开发人员阅读和参考。

    Google-map

    用mfc实现的google-earth地图显示，很简单的一个例子，主要是学会1、在应用程序中嵌入web控件，显示网页；2、google-map API的使用。注意初始化中文件的路径，要正确显示地图还需要处于联网状态。

    MapIt：在您的网站中嵌入Google地图的简便方法

    MapIt 在您的网站中嵌入Google地图的简便方法产品特点可自定义的Google地图（尺寸，缩放级别，地形类型等） 带有文本和自定义图标的多个标记。 路线处理标记和路线的事件（show，show_all，hide，hide_all）版权和...

    MFC中插入google在线或离线地图,MFC与google地图交互

    最近需要实验室需要将在无人机地面站中嵌入地图，在网上找了很多资料，终于有些眉目了， 首先，做这个需要用到的知识有，MFC控件、MFC类库、JavaScript脚本语言，Google API、Google离线地图；由于google离线地图不...

    Google Map API 使用详解

    这是我从网上整理的资料，版权归原作者所有。 资料介绍了 Google Map API V2 的使用方法，可以使你轻松地在自己的网页中插入 Google 地图，并可随意添加自己的标签。

    ASP.NET下使用免费Goolge地图(Map)服务端控件教程及源代码

    在我的应用场景中，我从SQL SERVER数据库中提取出地球的经度、纬度，用这些信息之Google地图对应位置插入插件。如果你熟悉Ajax框架，你一定知道解答的方法。于是作者写了这个控件，可以让大家更集中于服务端的功能。

    在ASP.NET中使用Google Map

    打开Default.aspx（或任何你想加入Google Map的位置），将该自定义控件拖放至相应位置并编译，这样就实现了最简单的带有Google Map的ASP.NET网页。 &lt;br&gt; &lt;br&gt;现在我们来为Google Map加一些标注点。在Page_...

    Google Map API

    Google 地图 JavaScript API 使您可以在网页中嵌入 Google 地图。要使用该 API，您需要先注册以获取 API 密钥。收到 API 密钥之后，即可以按照本文档中的说明开发地图应用程序。 任何 Google 地图 API 应用程序中的...

    android使用google地图

    在手机中使用google地图，首先需要先添加Map API密钥，具体设置过程添加maps.jar到项目，嵌入地图，获取密钥

Magicbox
Global site tag (gtag.js) - Google Analytics