zoukankan      html  css  js  c++  java
  • PDA开发系列:Google地图接口

         Google的地图接口,相信大家都不陌生,N多人都比我这个菜鸟熟悉得多,我就不班门弄斧了,在这里我只介绍在我们项目中用到的几个实现。

         在我们的项目中,需求很简单,主要有以下几个方面:

         1.在地图上描点,显示已经标注过的点的名字。

         2.在地图上用不同的点显示在线人员的位置。

         3.显示人员的移动轨迹。

         我们用的Google的地图API的V3版本,因为V2版本要根据网址生成不同的密钥,很麻烦,而V3就不需要。下面是实现的效果:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML><HEAD>

    <title>Google Maps</title>
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"></script>

    <SCRIPT type=text/javascript>
    window.onload=function()
    {
    var myLatlng = new google.maps.LatLng(31.165598, 121.519861);
    var myOptions = { zoom: 15, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var marker = new google.maps.Marker({ position: myLatlng, title:"白宫" });
    marker.setMap(map);

    var flightPlanCoordinates = [ new google.maps.LatLng(31.165598, 121.519861), new google.maps.LatLng(31.166598, 121.518861), new google.maps.LatLng(31.163598, 121.516861), new google.maps.LatLng(31.164598, 121.517861) ]; var flightPath = new google.maps.Polyline({ path: flightPlanCoordinates, strokeColor: "green", strokeOpacity: 1.0, strokeWeight: 5 }); flightPath.setMap(map);

    var contentString = '白宫'; var infowindow = new google.maps.InfoWindow({ content: contentString });
    google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); });

    var image = new google.maps.MarkerImage("http://files.cnblogs.com/HOH/User.ico");
    var myLatLng = new google.maps.LatLng(31.165798, 121.517861);
    var beachMarker = new google.maps.Marker({position: myLatLng,map: map,icon: image,title:"奥巴马" });
    }
    </SCRIPT>
    </HEAD>
    <BODY >
    <DIV style="WIDTH: 500; HEIGHT: 500" id=map_canvas></DIV></BODY></HTML>

    下面是运行的效果:

    地图数据 ©2010 Mapabc - 使用条款
    地图
    卫星
    混合
    地形
    作者:HOH
    出处:http://hoh.cnblogs.com
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    自控力和专注力是执行力的保证
    今宵又除夕
    买了小米盒子三代
    电容相位滞后?电感超前
    lcr电桥浅谈
    ad 线束和网络
    浅谈 R_S触发器
    NTSC PAL 介绍
    verilog 之流水灯
    io 口方向调整 stm32
  • 原文地址:https://www.cnblogs.com/HOH/p/1859540.html
Copyright © 2011-2022 走看看