zoukankan      html  css  js  c++  java
  • 如何调用Google地图?

    在建设网站中用到地图是很常见的,在国内大部分都是用百度地图,但是有时候可能会用到国外地址,这时候就只能使用谷歌地图了。

    方法一、使用框架引入谷歌地图

    用框架引入谷歌地址是最简单的方法,不是专业开发人员也可以操作。登陆ditu.google.cn地图,输入地址信息,如:"上海东方明珠",把地图移动到合适的视角,点击分享链接后,有两个信息。第一个是一个网址,用于在浏览器中打开的;第二个是一个框架的代码,网站中通常使用这个代码。把代码复制到网站中去就可以了,里面可以自己设定度度,高度,语言等信息。

    方法二、使用谷歌地图api开发

    代码如下:

    <%@ 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&v=2&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 onload="load()">    
              <div id="map" style=" 750px; height: 500px"></div>    
          </body>    
      </html> 
    

    PS:如果有写错的地方,欢迎指出,谢谢。

  • 相关阅读:
    [前端开发]Vue组件化的思想
    [前端开发]数组中哪些方法是响应式的
    冒泡排序和选择排序
    css定位属性的运用
    JS拖拽效果的原理及实现
    Js函数的形参和实参详解
    Js中的For循环详解
    什么是盒模型?
    关于使用JS去除URL中的指定参数问题,js 对url进行某个参数的删除,并返回url
    听力的尝试
  • 原文地址:https://www.cnblogs.com/heroine/p/6075308.html
Copyright © 2011-2022 走看看