Google地图API 在网站上嵌入谷歌地图API

最新推荐文章于 2024-08-16 17:41:49 发布

cactusz

最新推荐文章于 2024-08-16 17:41:49 发布

阅读量944

点赞数

分类专栏： Google JavaScript HTML IDEA

本文链接：https://blog.csdn.net/cactusz/article/details/74557096

版权

JavaScript 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

HTML

16 篇文章 0 订阅

订阅专栏

Google

9 篇文章 0 订阅

订阅专栏

非常感谢：http://67566894.iteye.com/

Google的地图API很完善，用起来也不复杂。我通过JavaScript实现了一个简单的Google地图，并带有地图标记。
如果你的网站有域名而不是localhost，则需要根据域名在Google官网上申请一个KEY，替换我提供的代码中的key。

    Java代码  
  
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
    <head>  
    <script  
        src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true;  
        key=ABQIAAAAevysxt9O5lBUCrSalm80MxQx8gmx0K-_Fjj4Tf8bNXH3BBSxZRRmI_CuZM2zQyuXEpG_uxt-aqPr-A"  
        type="text/javascript"></script>  
        //author:67566894   <script language="javascript" type="text/javascript">  
    function load() {     //加载地图  
        if (GBrowserIsCompatible()) {   
            var map = new GMap2(document.getElementById("map"));   
            map.addControl(new GSmallMapControl());    //放大缩小  
            map.addControl(new GMapTypeControl());     //地图种类  
            map.enableScrollWheelZoom();    //启用鼠标滚轮  
            map.setCenter(new GLatLng(39.9000, 116.3000), 6);   //地图坐标 三个参数分别为 "纬度" "经度" "比例尺"  
         
            function createMarker(point, address,name,tel) {  //创建标记内容及标记的鼠标事件  
               var marker = new GMarker(point);  
               var html = '<div>'+  
                   '<a >Name:'+ name +'</a><br/>'+  
                   '<a >Address:'+address +'</a><br/>'+  
                   '<a >telephone:'+tel +'</a>'+  
                   '</div>';  
               GEvent.addListener(marker, "mouseover", function() {  
                   marker.openInfoWindowHtml(html);  
               });  
               GEvent.addListener(marker, "mouseout", function() {  
                   marker.closeInfoWindow();  
               });  
               GEvent.addListener(marker, "click", function() {  
                   map.setCenter(point, 12);   
               });  
               return marker;  
           }  
           var point = new GLatLng(39.9000,116.3000);     //设置标记  
           map.addOverlay(createMarker(point,'beijing','sh','123456'));//加入标记  
       }    
   }      
</script>  
    </head>  
    <body οnlοad="load()">  
        <div id="map" style="width: 750px; height: 500px"></div>  
    </body>  
</html>  