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. 关于MySQL中使用LOAD DATA INFILE导入csv文件时的日期格式问题

    在使用MySQL时,常常会用到Load Data Infile来导入数据,在遇到Date类型的列时,有时会遇到格式转换的问题: 首先创建一张简单的people表,包含名字,生日,年龄三个字段: mys ...

  2. 球面墨卡托(Spherical Mercator)

    地理信息描述空间位置相关的信息,在空间位置的表达中,需要基于空间参照系来保证数据精度以及不同数据源之间的相互叠加/空间分析操作.自Google Maps与2005年发布以来,电子地图服务与普通民众的日 ...

  3. ios tableview 上加 textfiled

    ios tableview 上加 textfiled 首先附上我项目中用曾经用到的几张图  并说明一下我的用法: 图1: 图2: 图3: 心在你我说一下  我当初的实现 方法 ,希望能给你们一些  启 ...

  4. java.lang.Exception: Socket bind failed 服务器端口冲突-->修改端口

    需要修改三个端口号:%apache_tomcat6%/conf/server.xml 四月 11, 2014 11:39:25 上午 org.apache.catalina.core.AprLifec ...

  5. Java 的自动装箱拆箱

    Java 是面向对象的语言,其基本数据类型也就有了相对应的类,称为包装类.以下是基本数据类型对应的包装类: 基本数据类型 包装类 byte(1字节) Byte short(2字节) Short int ...

  6. Flask,HelloWorld

    Flask,HelloWorld # -*- coding:utf-8 -*- ''' Created on 2015年10月19日 ''' from flask import Flask app = ...

  7. 配置iSCSI

    先查下yum list | grep iscsi, 存在iscsi包, 进行安装:yum install iscsi-initiator-utils.x86_64, cat /etc/iscsi/in ...

  8. Codeforces Round #80 Div.1 D

    思路:考虑离线操作,以y为关键字排序,对于y相同的一起操作,然后考虑y的范围,当y<=sqrt(n)时,直接O(n)预处理出f[x]表示f[x]+f[x+y]+f[x+2*y]+..+f[x+k ...

  9. （转）Libevent（1）— 简介、编译、配置

    转自:http://name5566.com/4190.html 参考文献列表:http://www.wangafu.net/~nickm/libevent-book/ 此文编写的时候,使用到的 Li ...

  10. 身份证js验证

    <script type="text/javascript"> //--身份证号码验证-支持新的带x身份证 function isIdCardNo(num) { var ...