zoukankan      html  css  js  c++  java
  • 如何在Google Maps 添加多个标记

    JS如下:

    (function() {

        window.onload = function() {

            // Creating an object literal containing the properties

            // we want to pass to the map

            var options = {

                zoom: 12,

                center: new google.maps.LatLng(40.7257, -74.0047),

                mapTypeId: google.maps.MapTypeId.ROADMAP

            };

            // Creating the map

            var map = new google.maps.Map(document.getElementById('map'), options);

            // Adding a marker to the map

            

            // for New York, San Francisco, and Seattle

                var places = [];

                // Adding a LatLng object for each city

                    places.push(new google.maps.LatLng(40.756, -73.986));

                    places.push(new google.maps.LatLng(37.775, -122.419));

                    places.push(new google.maps.LatLng(47.620, -122.347));

     

     

                // Looping through the places array

                    for (var i = 0; i < places.length; i++) {

                        // Creating a new marker

                        var marker = new google.maps.Marker({

                            position: places[i],

                            map: map,

                            title: 'Place number ' + i

                        });

                    }

        };

    })();

    CSS如下:

    body {

    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

    font-size: small;

    background: #fff;

    }

    #map {

    width: 100%;

    height: 500px;

    border: 1px solid #000;

    }

    .info {

    width: 250px;

    }

     

    HTML如下:

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>My first map</title>

    <link type="text/css" href="css/style.css" rel="stylesheet" media="all" />

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript" src="js/map.js"></script>

    </head>

    <body>

    <h1>My first map</h1>

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

    </body>

    </html>

     

    效果如下:

  • 相关阅读:
    第123天:移动web开发中的常见问题
    第122天:移动端开发常见事件和流式布局
    第121天:移动端开发基本知识
    第120天:移动端-Bootstrap基本使用方法
    第119天:移动端:CSS像素、屏幕像素和视口的关系
    加入收藏 设为首页代码收藏本页的代码和收藏本站的代码设为首页代码
    JQuery和UpdatePannel的问题
    JS中apply与call的用法
    Sumlime text3 安装包、汉化包、注册码
    使用WITH AS提高性能简化嵌套SQL
  • 原文地址:https://www.cnblogs.com/my4piano/p/5327110.html
Copyright © 2011-2022 走看看