如何使用google map api制作自己的地图(转载)

本文介绍如何注册并使用Google Maps API创建交互式地图。包括获取API密钥、加载JavaScript API库、初始化地图及添加标记等步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先到http://code.google.com/apis/maps/signup.html 注册Sign up for a Maps API key,例如:我把需要注册的网址为在本机上测试的一个网站:如下图所示

 

 

 

 

 

 

2.注册成功后,你将会得到一个Key:如:

 

 

3.在浏览其中输入如下网址,以得到googlejavascript函数,

http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=ABQIAAAAEWedORqIl5-9cyTUcwuZ-BQHv3pnUFPSoUAGIc-u-ab7Z5qLKBTqxknP6cwEBmhChR2NP-QaHvoWxw

4.输入此网址后,将会得到如下的文件,如下图所示:

 

 

5,把此文件保存到网站的根目录下,文件名为maps,才用如下的方法进行调用

<html>

           <head>

             <title>Google Maps JavaScript API Example - simple</title>

             <script src="maps" type="text/javascript">

            </script>

  

            <script type="text/javascript">

   

            </script>

           </head>

           <body onload="Gload()">

           <div id="map" style="width: 300px; height: 300px"/></div>

            <table align="center" border='1'>

            <th>经度:<input type='text' id='east'/> </th>

            <th>纬度:<input type='text' id='north'/> </th>

            <th> <input type='submit' name='submitName' value='submit' onclick="Gsubmit();"/> </th>

  

            <script type="text/javascript">

            var map = new GMap(document.getElementById("map"));     

               map.setCenter(new GLatLng(39.917, 116.397), 8);

               map.addControl(new GSmallMapControl());   

     

             function Gload() {

                  var p1 = new GLatLng(39.917, 116.397);

                map.addOverlay(new GMarker(p1));

     

               GEvent.addListener(map, "click", function(marker,point) {

     

                if(marker) {

                 // var p = marker.getPoint();得到该markerpoint

                 //map.openInfoWindow(p, document.createTextNode("你好"));

                 marker.openInfoWindowHtml("<img src='aa.jpg'/>" + "<a href='http://hi.baidu.com/hi521'>我的地盘</a>");

                }else {

                 //point.lat() point.lng()得到point的坐标

                 map.addOverlay(new GMarker(point));

                }

               } );

             }

           function Gsubmit() {

               var ew = document.getElementById("east").value;

               var ns = document.getElementById("north").value;

               var p = new GLatLng(ns,ew);

               map.panTo(p, 8);

               var marker = new GMarker(p, {draggable:true})

               map.addOverlay(marker);

               map.openInfoWindow(p, document.createTextNode(p));

               GEvent.addListener(marker, "dragstart", function() {           map.closeInfoWindow(); } );

           }

            </script>

           </table>

           <div align="center">

           <img src='aa.jpg'/>

           map.openInfoWindowHtml(point,"<font color='red'>Hello</font>");

            </div>

           </body>

</html>

6.输入网址:http://localhost:8080/test/test.html,就会出现如下的页面,说明调用成功。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值