Google Maps JavaScript API v3
https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-cn

GPSspg
http://www.gpsspg.com/maps.htm

<!DOCTYPE html>

<html>

  <head>

    <title>Simple Map</title>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

    <meta charset="utf-8">

    <style>

        html, body, #map-canvas {

            height: 100%;

            margin: 0px;

            padding: 0px

        }

    </style>

    <script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

    <script>

        var map

        var latLngArray = [

            {

                name: 'hangzhou',

                url: 'http://s.baomihua.com/phone/home.aspx#hangzhou',

                longitude: 30.27211440480,

                latitude: 120.15266418460

            },

            {

                name: 'shanghai',

                url: 'http://s.baomihua.com/phone/home.aspx#shanghai',

                longitude: 31.2274816320,

                latitude: 121.4772033691

            },

            {

                name: 'beijing',

                url: 'http://s.baomihua.com/phone/home.aspx#beijing',

                longitude: 39.8970943726,

                latitude: 116.4056396484

            }

        ]

        var markersArray = []

        function initialize() {

            var mapOptions = {

                zoom: 5,

                center: new google.maps.LatLng(31.2081033213, 121.4758300781)

            }

            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions)

            if (latLngArray) {

                for (var i in latLngArray) {

                    addMarker(new google.maps.LatLng(latLngArray[i].longitude, latLngArray[i].latitude), latLngArray[i].url)

                }

            }

            showOverlays()

        }

        function addMarker(location, url) {

            var marker = new google.maps.Marker({

                position: location,

                map: map

            })

            markersArray.push(marker)

        }

        function showOverlays() {

            if (markersArray) {

                for (var i in markersArray) {

                    markersArray[i].setMap(map)

                    markersArray[i]._index = i

                    google.maps.event.addListener(markersArray[i], 'click', function() {

                        location.href = latLngArray[this._index].url

                    })

                }

            }

        }

        google.maps.event.addDomListener(window, 'load', initialize)

    </script>

</head>

<body>

    <div id="map-canvas"></div>

</body>

</html>

☀【移动】Google Maps JavaScript API v3的更多相关文章

  1. [转]MBTiles 离线地图演示 - 基于 Google Maps JavaScript API v3 + SQLite

    MBTiles 是一种地图瓦片存储的数据规范,它使用SQLite数据库,可大大提高海量地图瓦片的读取速度,比通过瓦片文件方式的读取要快很多,适用于Android.IPhone等智能手机的离线地图存储. ...

  2. MBTiles 离线地图演示 - 基于 Google Maps JavaScript API v3 + SQLite

    MBTiles 是一种地图瓦片存储的数据规范,它使用SQLite数据库,可大大提高海量地图瓦片的读取速度,比通过瓦片文件方式的读取要快很多,适用于Android.IPhone等智能手机的离线地图存储. ...

  3. Google Map JavaScript API V3 实例大全

    Google Map JavaScript API V3 实例大全 基础知识 简单的例子 地理位置 语言 位置 坐标 简单的投影 事件 简单事件 关闭事件 多次添加事件 事件属性 控制 php禁用ui ...

  4. google map javascript api v3 例子

    之前一直用百度map,但如果是国外的项目就需要用google地图.由于在国内屏蔽了google地图的服务,因此调用的是一个国内地址(开发用).这个地址没有用key,语言设置也还是中文的. //---- ...

  5. 国内使用Google Maps JavaScript API

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...

  6. 谷歌地图，国内使用Google Maps JavaScript API，国外业务

    目前还是得墙 <!DOCTYPE html> <html> <head> <meta name="viewport" content=&q ...

  7. Google maps javascript API

    https://developers.google.com/maps/documentation/javascript/datalayer .... GeoJSON 是一种针对互联网上共享地理空间数据 ...

  8. Google Map: JavaScript API RefererNotAllowedMapError

    visite https://console.developers.google.com/apis/credentials and select the project you use. http:/ ...

  9. ArcGis Javascript API (V3.6)加载天地图

    Arcgis的Javascript api开发很活跃,不知不觉都发布了3.6的版本了.该版本基于dojo 1.8.3开发的. 从dojo 1.8开始,AMD机制用得越来越多了,而且require([& ...

随机推荐

  1. （转）Cookies使用

    实际上,在web开发中,cookie仅仅是一个文本文件,当用户访问站点时,它就被存储在用户使用的计算机上,其中,保存了一些信息,当用户日后再次访问这个站点时,web可以将这些信息提取出来. 尽管现在听 ...

  2. SQL Server调优系列进阶篇 - 查询语句运行几个指标值监测

    前言 上一篇我们分析了查询优化器的工作方式,其中包括:查询优化器的详细运行步骤.筛选条件分析.索引项优化等信息. 本篇我们分析在我们运行的过程中几个关键指标值的检测. 通过这些指标值来分析语句的运行问 ...

  3. c标准库中字符和数字转换的函数

    字符转换为数字: #include<stdlib.h> atoi();    将字符转换为整型                       例:char ch1;int i=atoi(ch ...

  4. JS实现rgb与16进制颜色相互转换

    1.rgb转16进制 function to16 (a) {//RGB(204,204,024) //十六进制颜色值的正则表达式 var reg = /^#([0-9a-fA-f]{3}|[0-9a- ...

  5. JavaScript 计算两个颜色叠加值

    function multiply(rgb1, rgb2) { var result = [], i = 0; for( ; i < rgb1.length; i++ ) { result.pu ...

  6. javascript调用oc的方法

    1.引入#import <JavaScriptCore/JavaScriptCore.h> 2.JSContext *jsContext = [self.webView valueForK ...

  7. sublimeText3中 less2css error: `lessc` is not available的解决办法

    昨天在sublimeText3中安装了less 以及 less2css插件,但是在编译保存的时候总是出现错误: less2css error: `lessc` is not available 就go ...

  8. javascript闭包的理解

    闭包是Javascript的一个难点,但也是一个很重要的知识点. 1.首先我们要知道变量作用域链 变量的作用域分两种:全局变量和局部变量.没有定义到任何函数中的变量为全局变量,在函数中定义的变量为局部 ...

  9. UVA 11462 Age Sort（计数排序法 优化输入输出）

    Age Sort You are given the ages (in years) of all people of a country with at least 1 year of age. Y ...

  10. CentOS7修改网卡为eth0

    CentOS7修改网卡为eth0 1.编辑网卡信息 [root@linux-node2~]# cd /etc/sysconfig/network-scripts/  #进入网卡目录 [root@lin ...