精华内容
下载资源
问答
  • 在网页中接入百度地图

    千次阅读 2016-11-28 00:48:09
    百度地图API点击打开链接 打开百度地图API图如下 第一步创建地图: 1.查找所要定位的地方,2....1.添加点标记,在地图中按鼠标左键即可标记位置,左面设置参数并且保存。(可设置多个标注) 2.

    百度地图API点击打开链接

    打开百度地图API图如下


    第一步创建地图:

    1.查找所要定位的地方,2.中心点纬度可以用鼠标拖拽地图设置,3.当前地图级别即是地图缩放级别


    第二步设置地图:

    这里其实默认设置即可,等一下可以直接用代码改地图参数。


    第三步添加标注

    1.添加点标记,在地图中按鼠标左键即可标记位置,左面设置参数并且保存。(可设置多个标注)


    2.线标记,这里画线标注怎么到达“我的位置”,左边可设置参数。(可设置多条线标记)


    3.文字标记,这里给画线添加备注,左边设置文字。(可设置多个文字标记)


    第四步获取代码复制到html里面


    运行代码,然后发现网页出现乱的字符,并且标记的图标没显示出来,没关系我们开始改代码。


    1.在head标签里把charset改成中文国际标准utf-8

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    2.下面代码可以改标记图标路径,这里我改成自己想要的

    //创建一个Icon
        function createIcon(json){
            var icon = new BMap.Icon("img/mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
            return icon;
        }
    3.设置图标在地图的位置和大小(一般图有多大,w和h就设置多大)

    //标注点数组
        var markerArr = [{title:"我的位置",content:"地址:腾讯大厦<br/><br/>电话:88888888<br/><br/>联系人:测试猫",point:"113.941079|22.546052",isOpen:1,icon:{w:38,h:38,l:0,t:0,x:16,lb:15}}
    		 ];
    效果出来了,点开看见我的信息。

    这样百度地图的接入完成了,当然有很多参数可以自行修改,例如地图在网页中的大小,在div标签里改即可等等。。现在你可以把js封装成一个脚本,然后在html里引入封装的js代码,在html中插入<!--百度地图容器--><div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>。

    当然这里引入封装的javascript脚本有一个重要事项:1.api的key  <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>  要在head标签里引入,而你copy过来的那些javascript代码封装成的脚本,要在</body>结束标签后引入,否则百度地图的接入无效哦,这个是经过测试的,必须要等html的body内容加载完才能加载百度地图。要不你也可以试试在head里引入封装脚本,加个defer="defer"属性延迟加载应该也是可以的。



    展开全文
  • 地图mapicon

    2020-12-29 10:24:43
    入天地图,多种地图切换,省份区域高亮,,地图事件等
  • Google Map Api 谷歌地图接口整理

    千次阅读 2018-07-10 09:05:11
    使用谷歌地图 API 的第一步就是要注册一个 API 密钥,需要注重一下两点: 1.假如使用 API 的页面还没有发布,只是在本地调试,可以不用密钥,随便用个字符串代替就可以了。 2.API 密钥只对网站目录或者域有效。对...

    一:基本知识:

     1. 使用谷歌地图 API 的第一步就是要注册一个 API 密钥,需要注重一下两点:

        1.假如使用 API 的页面还没有发布,只是在本地调试,可以不用密钥,随便用个字符串代替就可以了。

        2.API 密钥只对网站目录或者域有效。对不同域的网页,需要用这些域分别注册不同的密钥

    2.页面引用javascript文件<script src="http://ditu.google.com/maps?file=api&hl=zh-CN&v=2&key=abcdefg" type="text/javascript"></script>

       URL(http://ditu.google.com/maps?file=api&hl=zh-CN&v=2&key=abcdefg)解析:

         1.ditu.google.com:也可以用ditu.google.cn,假如你需要在地图上显示大陆以外的具体地图,就用 maps.google.com

         2.file=api 这个是请求API 的JS 文件用的,固定的格式。

         3.hl=zh-CN

          这个是在设定地图上除了地图图片以外的诸如控件名称、版权声明、使用提示等所需要显示文本的语言版本时候用的,假如没有指定这个参数就使用 API 的默认值,对itu.google.com 来说,默认是中文简体aps.google.com 默认的是英文。

         4. v=2

          这个是用来指定需要导入的 API 类库的版本号,可以有四种设定方式:

            v=2.s  稳定版本,更新最慢,但是最可靠;

            v=2 当前版本(只用主版本号),更新速度和可靠性介于 s 和 x 之间

            v=2.x 最新版本,更新最快,包括最新功能,可能没有当前版本可靠;

            v=2.76 指定具体版本。不建议使用。

        注:目前谷歌地图 API的主版本号是2,当API升级时旧版本只能继续使用一个月,所以要及时更改主版本号,版本号改变会在Google Code和Maps API讨论组发布相关信息

         5.key=abcdefg这个是设定你注册的 API 密钥.

      

    二:核心类:

       google地图API主要包括:地图类(GMap2)、标记类(GMarker)、标记选项类(GMarkerOptions)、折线类 (GPolyline)、经纬度(GLatLng)、命名空间(GEvent)、坐标类(GPoint)、控件的大小类GSize、 interface(GControl)、地图类型类(GMapType)、地图上面的图标类(GIcon)、窗体类(GInfoWindow)、窗体选 项类 GInfoWindowOptions)、接口GOverlay、枚举GMapPane等等

       注:标记和折线都是地图的覆盖物

     1.GMap2:地图类,下面实例化一张地图:

       var map= new GMap2(container: DOM_Div,opts: Options);

       构造函数的参数如下:

        参数       是否必要      值类型         定义

        container      是          DOM_Div    DOM元素,是个Div

        opts          可选        Options    构造函数选项

       

        GMap2包含的方法:

         1.设置状态的方法:

           enableDragging():设置地图可以被拖动。

           disableDragging():禁止地图被拖动。

           draggingEnabled():返回地图是否能够被拖动的布尔值。假如能够拖动,返回"真";否则返回"假"。

           enableInfoWindow():设置地图信息窗口可以弹出。

           disableInfoWindow():禁止地图信息窗口弹出。

           infoWindowEnabled():返回地图信息窗口是否能够被弹出的布尔值。假如能够弹出,返回"真";否则返回"假"。这个方法通常作为检验之用。

           enableDoubleClickZoom():设置可以双击缩放地图,左键双击为放大,右键双击为缩小(默认)。

           disableDoubleClickZoom():禁止双击缩放地图,Google Earth 默认为禁止双击缩放。

           doubleClickZoomEnabled():返回地图是否可以双击缩放的布尔值。假如能够双击缩放,返回"真";

           enableContinuousZoom():设置地图可以连续平滑地缩放。

           disableContinuousZoom():禁止地图连续平滑地缩放。

           continuousZoomEnabled():返回地图是否可以连续平滑地缩放的布尔值。假如能够连续平滑地缩放,返回"真";否则返回"假"。

           enableScrollWheelZoom():设置地图可以由鼠标滚轮控制缩放。

           disableScrollSheelZoom():禁止由鼠标滚轮控制地图缩放。

           scrollWheelZoomEnabled():返回地图缩放是否可以由鼠标滚轮控制。假如能够由鼠标滚轮控制缩放,返回"真";否则返回"假"。

           isLoaded() 返回类型布尔值 假如地图已经被setCenter()初始化,则返回true.

        2.得到地图的数据信息方法:     

           getCenter() 返回类型GLatLng 返回地图中心点的地图坐标.

           getBounds() 返回类型GLatLngBounds 返回地图视口范围的矩形区域的地理坐标.

           getBoundsZoomLevel(bounds) 返回类型数字返回显示指定的区域需要的最适合的地图缩放等级.该缩放等级是根据当前的地图类型计算出来的,假如还没有指定地图类型,将使用地图类型数组之中的第一项.

           getSize() 返回类型GSize 返回地图视口的像素大小.

           getZoom() 返回数字 返回当前的缩放等级.

           getContainer():取得地图的容器

           getCurrentMapType()得到当前的地图类型。注重得到的是地图类型GMapType对象,而不是对象名称

        3.设置地图:

          setCenter(center, zoom?, type?)将地图视图切换到指定的中心点,也可以同时设置可选的地图缩放等级和地图类型.地图类型必须已经添加到地图.

          addMapType()该方法必须在构造地图实例之后初始化地图状态时立即执行.在地图刚刚构造的时候调用地图其他的方法都将会产生错误.

          panTo(center) 设置地图的中心点到指定的坐标,假如该点已经在当前的视口之中,则地图中心会滑动到该位置.

          panBy(distance) 地图滑动指定的像素距离.

          panDirection(dx, dy) 以指定的方向滑动地图宽度一半的距离.+1代表右方和下方,-1代表左方和上方.

          setZoom(level)设置地图的缩放等级到给定值.

          zoomIn()缩小地图(将地图的缩放等级增加1).

          zoomOut()放大地图(将地图的缩放等级减少1).

          savePosition()保存地图当前的位置和缩放等级,以供以后通过returnToSavedPosition()方法来返回当前视图.

          returnToSavedPosition()返回到上一次通过savePosition()保存的地图视图.

          checkResize()检查地图容器(container)的大小是否已经发生变化,在地图容器DOM大小可能发生变化的时候调用该方法,以便地图能进行自动调整.

          setMapType(GMapType):设置地图类型:大概有三种类型:G_NORMAL_MAP,G_SATELLITE_MAP,G_PHYSICAL_MAP,

          removeMapType(GMapType)从当前地图上删除一个地图类型。

          enableGoogleBar():设置地图上的搜索栏

     

        4.有关地图覆盖物的方法:

          addOverlay(overlay) 在地图上添加一个标注并触发地图的addoverlay事件.

          removeOverlay(overlay) 在地图上删除指定的标注.假如该标注确实在地图上.

          clearOverlays()删除所有地图上的标注.

     

        5.有关信息浮窗的方法:

         openInfoWindow(point, node, opts?)在指定的地理点打开一个简单的信息浮窗.滑动地图以保证打开的信息浮窗可见.信息浮窗的内容以DOM节点的形式给定.

         openInfoWindowHtml(point, html, opts?)在指定的地理点打开一个简单的信息浮窗.滑动地图以保证打开的信息浮窗可见.信息浮窗的内容以HTML文本的形式给定.

         openInfoWindowTabs(point, tabs, opts?)在指定的地理点打开一个分标签的信息浮窗.滑动地图以保证打开的信息浮窗可见.信息浮窗的内容以DOM节点的形式给定.

         openInfoWindowTabsHtml(point, tabs, opts?)在指定的地理点打开一个分标签的信息浮窗.滑动地图以保证打开的信息浮窗可见.信息浮窗的内容以HTML文本的形式给定.

         showMapBlowup(point, opts?)在指定的地理点打开一个显示指定点更近的视图的信息浮窗.

         closeInfoWindow()关闭当前打开的信息浮窗.

         getInfoWindow() 返回类型GInfoWindow 返回地图的信息浮窗对象.假如当前并不存在信息浮窗,则创建一个信息浮窗而不显示它.这个操作并不被enableInfoWindow()影响.

       

       6.控件的方法:

        addControl(GControl)添加一个google地图的控件

        RemoveControl(GControl)删除一个google地图的控件

       7. 示例:

          var map = new Map2(document.getElementByIdx_x_x("map"),{size:GSize(200,200), backgroundColor:"#FF0000"});

          map.addControl(new GSmallMapControl());//添加一个地图左侧的缩放按钮控件

          map.addControl(new GMapTypeControl());//添加地图类型控件包括普通地图、卫星地图、混合地图

          map.setCenter(new GLatLng(37.4419, -122.1419), 13); //实例化一个维度为37.4419、经度为 -122.1419的经纬度实例,然后设置地图的中心。地图缩放值为13

     

          // Add 10 markers in random locations on the map

          var bounds = map.getBounds();//得到地图四面的边界值

          var southWest = bounds.getSouthWest();//西南的经纬度

          var northEast = bounds.getNorthEast();//东北的经纬度

          var lngSpan = northEast.lng() - southWest.lng();//经度差

          var latSpan = northEast.lat() - southWest.lat();//维度差

          //实例化一个在本张地图中的一个经纬度

          var point = new GLatLng(southWest.lat() + latSpan * Math.random(),

                              southWest.lng() + lngSpan * Math.random());

          var marker = new GMarker(point);//实例化一个标点

     

          //给标点加click事件,当点击标点时弹出一个信息窗

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

          marker.openInfoWindowHtml("<b>hello</b>");

          });

         map.addOverlay(marker);//把标点添加到地图覆盖物

       

       2.GMapOptions类:

    这个类型包含以下4个属性

        1.size

         默认情况下,你创建的地图大小就是你给定的地图容器的大小,所以,通常情况下,你需要显式的声明你的地图容器的width和height属性,否则,地图 是不能正常显示的,但是,有了size这个可选属性后,你就多了一个选择了。你可以在创建地图的时候直接通过size这个属性指定地图的大小,而不需要听 命于地图容器了,即使这个地图容器已经显示的定义了width和height的大小。当然,size属性对应的值是一个GSize类型的数据,比如,假如 给定options={size:GSize(400, 300)},那么,你所创建的地图大小就是400×300的一个 矩形块,而和你指定的容器大小无关。

     

       2.mapType

        创建地图后,默认显示的地图类型是普通地图,假如要加上可以选择的卫星地图、地形地图等等其他类型的地图,可以使用 GMap2.setMapType()方法,但这样往往会罗列一堆的setMapType。GMapOptions提供了mapTypes这个可选项,通 过一个数组就可以给地图加上多种支持类型,比如使用{mapTypes: [G_NORMAL_MAP,G_SATELLITE_MAP,G_PHYSICAL_MAP]}

    ,你的地图就拥有三种普通、卫星、地形三种类型了。mapTypes数组中的第一项是地图加载的默认类型,所以,假如你想默认加载卫星地图,把G_SATELLITE_MAP移到数组的第一项就可以了。

     

       3.draggableCursor、draggingCursor

        这两个选项是用来定义地图上你的光标类型,我把它们放在一起介绍不等于它们必须一起使用,你可以单独使用任何一个。其中,draggableCursor 是地图可拖拽状态(默认就是可拖拽的)下的光标,draggingCursor是拖拽地图时的光标,对应的值和你在JavaScript里面设置其他的光 标时使用的值一样,比如,

    {draggableCursor:"crosshair",draggingCursor:"move"}。当然,你也可以使用url形式加上你自己的图标

       4.backgroundColor

        在地图图块的图片还没有传送完成之前,地图的显示区域默认会使用灰色填充,这个就是backgroundColor可以发挥作用的地方了,你可以把灰色换成其他任何符合W3C标准的颜色

      5.googleBarOptions

        这个和你在地图上通过GMap2.enableGoogleBar()时有关系,指定你添加GoogleBar时的一些默认属性

      示例:

       var options = {size:GSize(400, 300), backgroundColor:"#FF0000"};

       var map = new GMap2(document.getElementByIdx_x_x("mapContainer"), options);

     

     3.GMarker类

          构造函数:

          1.GMarker(point, icon?, inert?) 在指定位置point使用指定图标icon或G_DEFAULT_ICON创建一个标记.假如inert参数为true,该标记将不可点击而且没有任何参数.(2.50版本不再支持)

          2.GMarker(point, opts?) 在指定位置point使用指定的选项GMarkerOptions创建一个标记.默认标记能够点击并使用默认图标G_DEFAULT_ICON. (从 2.50开始支持)

          Gmarker包含的主要方法:

          1.openInfoWindow(content, opts?) 在标记图标之上打开地图信息窗口。信息窗口的内容为 DOM 节点。仅适用于 GInfoWindowOptions.maxWidth 选项。

          2. openInfoWindowHtml(content, opts?) 在标记图标之上打开地图信息窗口。信息窗口的内容显示为包含 HTML 文本的字符串。仅适用于 GInfoWindowOptions.maxWidth 选

     

    项。

          3.getIcon() GIcon 如构造函数所设置的,返回此标记的 icon。

          4.getTitle() String 如构造函数通过 GMarkerOptions.title 属性所设置的,返回此标记的标题。假如未传入标题,则返回“undefined(未定义)”(自 2.85 开始)

          5.getPoint() GLatLng 如构造函数或 setPoint() 所设置的,返回此标记锚定的地理坐标。(自 2.88 开始建议不要使用)

          6.getLatLng() GLatLng 如构造函数或 setLatLng() 所设置的,返回此标记锚定的地理坐标。(自 2.88 开始)

          7.setPoint(point) none 设置此标记所锚定点的地理坐标。(自 2.88 开始建议不要使用)

          8.setLatLng(point) none 设置此标记所锚定点的地理坐标。(自 2.88 开始)

          9.enableDragging() none 答应在地图上拖拽标记。对于函数,必须已经用 GMarkerOptions.draggable = true 初始化标记。

          10.disableDragging() none 禁止在地图上拖拽标记。

          11.draggable() Boolean 假如已使用 GMarkerOptions.draggable = true 通过构造函数对标记进行了初始化,则返回 true。否则,返回 false。 

          12.draggingEnabled() Boolean 假如当前答应用户在地图中拖拽标记,则返回 true。 

          13.setImage(url) none 请求将 url 指定的图像设置为此标记的前景图。注:不调整打印图像和阴影图像。因此,此方法主要是为了达到高亮显示或变暗显示效果,而不是彻底改变标记的外观。(自 2.75 开始)

          15.hide() none 假如当前标记可见,则隐藏标记。注:假如当前标记可见,则此函数会触发 GMarker.visibilitychanged 事件。(自 2.77 开始)

          16.show() none 假如当前标记不可见,则显示标记。注:假如当前标记不可见,则此函数会触发 GMarker.visibilitychanged 事件。(自 2.77 开始)

          17.isHidden() Boolean 假如当前标记不可见,则返回 true。否则,返回 false。(自 2.77 开始)

     

     

        示例:

          1.

           var point = new GLatLng(pointx,pointy);

           var icon = new GIcon();

           icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";

           var myMarker = new GMarker(point, icon);

           alert(myMarker.getIcon().image);

          2.

           var point = new GLatLng(pointx,pointy);

           var myMarker = new GMarker(point,{draggable:true});//可拖拽的标记

           alert(myMarker.getPoint());

                         

      4.GPolyline类

         构造函数

          GPolyline(latlngs, color?, weight?, opacity?, opts?) 根据顶点数组创建折线。color 是一个字符串,包含十六进制数字、HTML 样式的颜色,即 #RRGGBB。weight 是以像素表示的线宽度。 opacity 为 0 到 1 之间的数字。该线条是消除锯齿且半透明的。

        GPolyline包含的方法

           1.getVertexCount() Number 返回折线的顶点数目。(自 2.46 开始)

           2.getVertex(index) GLatLng 返回折线中给定索引值对应的顶点。(自 2.46 开始)

           3.getLength() Number 返回沿地球表面的折线长度(以米表示)。(自 2.85 开始)

           4.getBounds() GLatLngBounds 返回此折线的边界。(自 2.85 开始)

           5.hide() none 假如当前折线可见并且 GPolyline.supportsHide() 返回 true,则隐藏此线。注:假如当前折线可见,则此函数会触发 GPolyline.visibilitychanged 事件(自 2.87 开始)

           6.isHidden() Boolean 假如当前折线不可见,则返回 true。否则,返回 false。(自 2.87 开始)

           7.show() none 假如当前折线不可见,则显示该线。注:假如当前折线不可见,则此函数会触发 GPolyline.visibilitychanged 事件。(自 2.87 开始)

           8.supportsHide() Boolean 假如当前环境下支持 GPolyline 对象的 GPolyline.hide(),则返回 true。否则,返回 false。(自 2.87 开始)

           注:假如您想在地图里面显示折线,您需要在您的XHTML文档里面包含VML命名空间和一些CSS代码,这样可以令它们在IE下面可以正常工作。XHTM文档的开头看起来就像这

     

    样:

     

           <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

            <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

             <head>

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

               <title>My Google Maps Hack</title>

                 <style type="text/css">v\:* {behavior:url(#default#VML);}

                  </style>

               <script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg" type="text/javascript"></script>

              </head>

      5.GLatLng类

          构造函数:

            GLatLng(lat, lng, unbounded?) 注重纬度和经度的顺序。假如 unbounded 标记为 true,则表示数字以原始输入状态使用,否则纬度将在 -90 度到 +90 度之间,而经度在 -180 度和 +180 度之间周而复始。

           GlatLng包含的方法:

          lat() Number 返回以度数表示的纬度坐标(-90 到 +90 之间的数值)。假如在构造函数中设置了 unbounded 标记,则纬度坐标值可能超出此范围。

          lng() Number 返回以度数表示的经度坐标(-180 到 +180 之间的数值)。假如在构造函数中设置了 unbounded 标记,则经度坐标值可能超出此范围。

      

       6. GPoint类

          GPoint 是以像素坐标表示的地图上的一点。注重:在 v2 中,它不再是以地理坐标表示的地面上的一个点。现在,地理坐标可以用 GLatLng 表示。

         在地图坐标系统中,x 坐标向右增大,y 坐标向下增大。

         注重:GPoint 的两个参数同 x 和 y 属性一样可访问,但最好不要修改它们,而是在创建新对象时使用不同的参数。

      

        7. GEvent命名空间

         此命名空间包含的函数可用于注册事件处理程序(既处理自定义事件也处理 DOM 事件)和触发自定义事件。此 API 定义的所有事件都是由 GEvent.trigger() 内部触发的自定义事件。

           addListener(source, event, handler) 返回GEventListener 为源对象的自定义事件注册事件处理程序。返回一个可用于最终注销处理程序的句柄。事件触发时,this 将被设置为源对象,同时调用事件处理程序。

           addDomListener(source, event, handler) 返回GEventListener 为源对象的 DOM 事件注册事件处理程序。源对象必须为 DOM 节点。返回一个可用于最终注销处理程序的

     

            句柄  。事件触发时,this 被设置为源对象,同时调用事件处理程序。此函数将 DOM 方法用于当前浏览器,来注册事件处理程序。

           removeListener(handle)删除使用 addListener() 或 addDomListener() 安装的处理程序。

           clearListeners(source, event)删除使用 addListener() 或 addDomListener() 为给定事件在给定对象上安装的所有处理程序。

           clearInstanceListeners(source)删除使用 addListener() 或 addDomListener() 为所有事件在给定对象上安装的所有处理程序。

           trigger(source, event, ...)使源对象触发自定义事件。将 event 后所有剩余的可选参数依次输入给事件处理程序作为参数。 

           bind(source, event, object, method)返回GEventListener 将给定对象的方法调用注册为源对象自定义事件的处理程序。返回一个可用于最终注销处理程序的句柄。

           bindDom(source, event, object, method)返回 GEventListener 将给定对象的方法调用注册为源对象自定义事件的处理程序。返回一个可用于最终注销处理程序的句柄。

           callback(object, method) Function 返回在 object 上调用 method 的 closure。

           callbackArgs(object, method, ...) Function 返回在 object 上调用 method 的closure。调用返回的函数时,将 method 后面所有余下的可选参数依次输入 method 作为参数。

        

        8.GClientGeocoder地址解析类:

         此类用于和 Google 服务器建立直接通讯,以获得用户指定地址的地理位置信息。另外,地理解析器可维护自己的地址缓存,可以无需与服务器通讯而回答反复的查询。注重:目前中国地图地址解析器只支持市/县/区级别的地址。

         getLatLng(address, callback) 给 Google 服务器发送请求,对指定的地址进行地址解析。假如地址已成功定位,则用 GLatLng 点调用用户指定的回调函数。否则,向回调函数提供一个 null 点。假如地址不明确,则仅向回调函数传送最匹配的点。(自 2.55 开始)

         getLocations(address, callback) 给 Google 服务器发送请求,对指定的地址进行地址解析。包含状态代码的答复,假如答复成功,则向用户指定的回调函数传送一个或多个 Placemark 对象。与 GClientGeocoder.getLatLng 方法不同,回调函数可以通过检查 Status 字段的代码值确定失败原因。(自 2.55 开始)

        示例:      

         var map = new GMap2(document.getElementByIdx_x_x("map"));

         var geocoder = new GClientGeocoder();

         var address="五道口"; 

         geocoder.getLatLng(address,function(point) {      

         if (!point) 

         {        

           alert(address + " not found");       

         }

         else 

         {        

           map.setCenter(point, 13);  

           var marker = new GMarker(point);        

           map.addOverlay(marker);        

           marker.openInfoWindowHtml(address);

           alert(point);     

         }

       });

           

       三:下面是Google API自带控件

        

          GLargeMapControl:放大缩小调节杆

          GMapTypeControl:地图和卫星图片的切换功能

          GSmallMapControl:GLargeMapControl的精简版 ,去掉了缩放的调节杆保留了缩放按钮

          GSmallZoomControl:只包括缩放按钮,去掉了GLargeMapControl里其他的所有控制

          GScaleControl:比例尺控件

     

        四:减少浏览器内存泄露

         Google Maps API鼓舞使用闭包/Closures,Maps API的第二版引入一个GUnload()函数,用于最大限度地消除可能引发内存泄露的循环引用。您应该在页面的unload事件中调

     

    用GUnload()函数来降低您的应用程序内存泄露的风险:<body οnunlοad="GUnload()">这个函数确实可以消除Google地图在Internet Explorer下的内存泄露,但是假如您比较关心

     

    内存消耗问题,您仍然应该用Drip之类的工具测试您自己网站的内存泄露情况。

     

     

        五:浏览器兼容性

         Google Maps API支持的浏览器种类与Google地图网站相同。因为不同的应用程序在碰到不兼容的浏览器的时候需要表现不同的行为,所以Maps API提供了一个全局方法 (GBrowserIsCompatible())来检查兼容性,但是,发现一个不兼容的浏览器时,它不会自动采取任何措施。 http://maps.google.com/maps?file=api&v=2里面的脚本似乎可以在任何浏览器里面解析而不产生错误,所以您可以在检查浏览器兼容性之前就包含脚本文件。

      

       六:相关资料的网址:

    http://code.google.com/intl/zh-CN/apis/maps/

    http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/v2/reference.html

    Google地图API的同步中文文档:http://www.codechina.org/doc/google/gmapapi/

    百度文库:http://wenku.baidu.com/view/a2885c27a5e9856a561260b2.html

    csdn博客:http://blog.csdn.net/jiali765/archive/2010/03/03/5338265.aspx

    http://www.jbedu.com/study/jishuwenzhang/196.html


    原文链接https://www.cnblogs.com/jpfss/p/7486159.html

    展开全文
  • qgis+qt+vs二次开发,打开在线地图后,利用串口接收gps信号并对不同信号加载不同的svg格式图标显示,可以从中学习qgis3.14加载svg的方法,以及对特征和图层等基本处理,供大家学习调试!
  • 前端调用高德地图的接口

    千次阅读 2019-11-19 16:53:05
    Document 选择模式 拖拽地图模式 拖拽图标模式 开始选点 关闭选点 选址结果 经纬度: 地址: 最近的路口: 最近的路: 最近的POI: 可以关注我的公众号:技术趣谈
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="jquery-3.4.1.min.js"></script>
        <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=7f3b04e41812fc230bf64bc4bf0b40e7"></script>
        <!--  异步版本 ui组件, 用于添加城市信息 -->
        <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
        <!-- <script src="//webapi.amap.com/ui/1.0/main-async.js"></script> -->
        <!-- 移动端开发时, 添加以下内容 -->
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    </head>
    <style>
        #container {
            width: 600px;
            height: 480px;
            display: inline-block;
        }
        #container1 {
            width: 600px;
            height: 480px;
        }
        #right{
            float: left;
            margin-top: 40px;
        }
    </style>
    
    <body>
        <!-- 先在开发者页面创建应用,申请key, 然后使用 -->
        <!-- 高德教程地址  https://lbs.amap.com/api/javascript-api/guide/abc/plugins#plugins -->
    
        <!-- 选择城市教程
            https://lbs.amap.com/api/webservice/guide/api/district -->
        <div id="container"> </div>
        <div id='right'>
            <div>
                <div class='title'>选择模式</div>
                <input type='radio' name='mode' value='dragMap' checked>拖拽地图模式</input>
                <!-- </br> -->
                <input type='radio' name='mode' value='dragMarker' checked>拖拽图标模式</input>
            </div>
            <div>
                <button id='start'>开始选点</button>
                <button id='stop'>关闭选点</button>
            </div>
            <div>
                <div class='title'>选址结果</div>
                <div class='c'>经纬度:</div>
                <div id='lnglat'></div>
                <div class='c'>地址:</div>
                <div id='address'></div>
                <div class='c'>最近的路口:</div>
                <div id='nearestJunction'></div>
                <div class='c'>最近的路:</div>
                <div id='nearestRoad'></div>
                <div class='c'>最近的POI:</div>
                <div id='nearestPOI'></div>
            </div>
        </div>
        <div id="container1"> </div>
        <!-- 同步加载 -->
        <!-- <script type="text/javascript">
            var map = new AMap.Map('container', {
                center: [117.000231, 36.456755],
                zoom: 11
            })
        </script> -->
    
        <!-- 异步加载,推荐使用, 异步加载指的是为 js API指定加载的回调函数,在 js API 的主体资源加载完毕之后,将自动调用该回调函数. 回调函数应该声明在 JS API入口文件引用之前,异步加载可以减少其对其他脚本执行的阻塞, -->
        <script type="text/javascript">
            // var position = new AMap.LngLat(116, 39);//标准写法
            // var position = [116, 39]; //简写, 经纬度不能加引号
    
            // 创建地图
            // 如果不传入center坐标, 会默认定位到所在城市,可以使用插件进行自动定位
            var map = new AMap.Map('container', {
                // center: [117.000000, 38.000000], //设置地图中心点坐标
                zoom: 14, //级别, 级别与地图尺寸成正比,越大越详细, web最小为3级,高德最大为20
                viewMode: '2D', // 设置地图的显示样式
                lang: 'zh_cn',  //设置地图语言类型
                mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
            });
            // 加载一个(不使用数组)或多个插件
            AMap.plugin(['AMap.ToolBar', 'AMap.Driving', 'AMap.CitySearch', 'Zepto'], function () {
                var toolbar = new AMap.ToolBar(); //工具条, 地图的缩放,平移
                map.addControl(toolbar);
                // var driving = new AMap.Driving(); // 驾车路线规划
                // driving.search("参数")
    
                // ip定位
                var citySearch = new AMAP.citySearch()
                citySearch.getLocalCity(function (status, result) {
                    if (status === 'complete' && result.info === 'OK') {
                        // 查询成功, result为当前所在城市信息
                        // result.bounds  为当前所在经纬度, 113.315606,34.536169
                        if (result && result.city && result.bounds) {
                            var cityinfo = result.city;
                            var citybounds = result.bounds;
                            // document.getElementById('info').innerHTML = '您当前所在城市:' + result.bounds;
                            //地图显示当前城市
                            map.setBounds(citybounds);
                        }
                    } else {
                        // document.getElementById('info').innerHTML = result.info;
                    }
                });
    
            });
    
    
            // 加载ui模块, 可以地图选点
            // 'control/BasicControl' 多个地图图层的组件
            // misc/PositionPicker 选坐标的组件
            AMapUI.loadUI(['misc/PositionPicker', 'control/BasicControl'], function (PositionPicker) {
                // 如果使用ui组件, map 则在ui组件里定义即可
                var map = new AMap.Map('container', {
                    zoom: 16,
                    scrollWheel: false
                })
                var positionPicker = new PositionPicker({
                    mode: 'dragMarker',
                    map: map,
                    iconStyle: { //自定义外观
                        url: 'https://webapi.amap.com/ui/1.0/assets/position-picker2.png',
                        ancher: [24, 40],
                        size: [48, 48]
                    }
                });
    
                positionPicker.on('success', function (positionResult) {
                    document.getElementById('lnglat').innerHTML = positionResult.position;
                    document.getElementById('address').innerHTML = positionResult.address;
                    document.getElementById('nearestJunction').innerHTML = positionResult.nearestJunction;
                    document.getElementById('nearestRoad').innerHTML = positionResult.nearestRoad;
                    document.getElementById('nearestPOI').innerHTML = positionResult.nearestPOI;
                });
                positionPicker.on('fail', function (positionResult) {
                    document.getElementById('lnglat').innerHTML = ' ';
                    document.getElementById('address').innerHTML = ' ';
                    document.getElementById('nearestJunction').innerHTML = ' ';
                    document.getElementById('nearestRoad').innerHTML = ' ';
                    document.getElementById('nearestPOI').innerHTML = ' ';
                });
                var onModeChange = function (e) {
                    positionPicker.setMode(e.target.value)
                }
                var startButton = document.getElementById('start');
                var stopButton = document.getElementById('stop');
                var dragMapMode = document.getElementsByName('mode')[0];
                var dragMarkerMode = document.getElementsByName('mode')[1];
                AMap.event.addDomListener(startButton, 'click', function () {
                    positionPicker.start(map.getBounds().getSouthWest())
                })
                AMap.event.addDomListener(stopButton, 'click', function () {
                    positionPicker.stop();
                })
                AMap.event.addDomListener(dragMapMode, 'change', onModeChange)
                AMap.event.addDomListener(dragMarkerMode, 'change', onModeChange);
                positionPicker.start();
            })
    
            //多个地图图层
            AMapUI.loadUI(['control/BasicControl'], function (BasicControl) {
                var layerCtrl1 = new BasicControl.LayerSwitcher({
                    position: 'tr'
                });
                var map1 = new AMap.Map('container1', {
                    //这里将layerCtrl中启用的图层传递给map
                    layers: layerCtrl1.getEnabledLayers()
                });
                map1.addControl(layerCtrl1);
                var layerCtrl2 = new BasicControl.LayerSwitcher({
                    theme: 'dark',
                    //自定义基础图层
                    baseLayers: [{
                        enable: true, //默认显示
                        id: 'tile',
                        name: '标准图',
                        layer: new AMap.TileLayer()
                    }, {
                        id: 'satellite',
                        name: '卫星图',
                        layer: new AMap.TileLayer.Satellite()
                    }],
                    //自定义覆盖图层
                    overlayLayers: [{
                        enable: true,
                        id: 'traffic',
                        name: '路况图',
                        layer: new AMap.TileLayer.Traffic()
                    }, {
                        id: 'roadNet',
                        name: '路网图',
                        layer: new AMap.TileLayer.RoadNet()
                    }]
                });
                var map2 = new AMap.Map('container1', {
                    //这里将layerCtrl中启用的图层传递给map
                    layers: layerCtrl2.getEnabledLayers()
                });
                map2.addControl(layerCtrl2);
            });
    
    
    
            map.on('complete', function () {
                // 地图加载完成后触发complete事件
            })
            // map.destroy(); // 销毁地图,并清空地图容器
    
    
    
        </script>
        <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=7f3b04e41812fc230bf64bc4bf0b40e7"></script>
        <!-- 或者 -->
        <!-- <script>
            window.onLoad = function(){
                var map = new AMap.Map("container");
            }
            var url = 'https://webapi.amap.com/maps?v=1.4.15&key=7f3b04e41812fc230bf64bc4bf0b40e7'
            var jsapi = document.createElement('script');
            jsapi.charset = 'utf-8';
            jsapi.scr = url;
            document.head.appendChild(jsapi);
        </script> -->
    </body>
    
    </html>

    可以关注我的公众号:技术趣谈

     

    展开全文
  • 瓦片地图什么

    千次阅读 2019-04-30 10:01:54
    瓦片地图诞生以前,地图多在局域网的桌面软件使用。互联网的发展,催生了通过浏览器使用地图的需求,于是在1999年,出现了WMS(Web Map Service)这样的解决方案。在浏览器这一端,没有地图的概念,但浏览器天生...

    瓦片地图的诞生

     地图数据通常体量较大,需要充足的带宽和数据渲染能力。瓦片地图诞生以前,地图多在局域网的桌面软件中使用。互联网的发展,催生了通过浏览器使用地图的需求,于是在1999年,出现了WMS(Web Map Service)这样的解决方案。在浏览器这一端,没有地图的概念,但浏览器天生就是为了显示文本和图片。WMS的设计是,在服务器端把地图渲染成图片,浏览器端显示地图图片。地图图片大小根据浏览器视窗大小来定。

    WMS大大推进了互联网地图的进程。 问题是,WMS根据浏览器视窗大小每次生成一大张图片,对于后端渲染和网络传输都是挑战,效率低下。紧接着就有了WMS-C(Cached)的思想,通过缓存地图瓦片提高效率。在工程实践方面更胜一筹的Google成为这一思想的最佳实践者。2005年,Google地图上线,通过高效的瓦片地图技术,让全球用户轻而易举的享受到了地图的福利。

     

    Google地图采用的Web Mecator投影和瓦片分级切割方案,也成为目前互联网地图事实上的标准。紧接着,Google地图又新增了路网服务、实时路况、街景地图和Google地球,互联网地图的蓬勃发展就此开始。

     

    瓦片地图的原理

    使用互联网地图时,我们看到的是一张铺满整个屏幕的大的地图图片。实际上,这张大的图片是多个尺寸相同(通常是256*256像素)的小图片按照既定规则无缝拼接而成的,这些小图片就是瓦片。瓦片按照如下图所示的金字塔结构组织,每张瓦片都可通过级别、行列号唯一标记。在平移地图、缩放地图时,浏览器根据金字塔规则,计算出所需的瓦片,从瓦片服务器获取并拼接。

     

    由于瓦片是静态的图片,可预先生成,通过缓存和CDN技术,瓦片服务器可提供高效的瓦片读取服务。此外,浏览器并行获取和显示多张小图片,比获取和显示一张大图片要高效的多。显示地图变成和显示图片一样简单,这也是互联网地图能够承载亿级规模用户的原因。

     

    瓦片地图金字塔模型

    瓦片地图金字塔模型是一种多分辨率层次模型,从瓦片金字塔的底层到顶层,分辨率越来越低,但表示的地理范围不变。首先确定地图服务平台所要提供的缩放级别的数量N,把缩放级别最高、地图比例尺最大的地图图片作为金字塔的底层,即第0层,并对其进行分块,从地图图片的左上角开始,从左至右、从上到下进行切割,分割成相同大小(比如256x256像素)的正方形地图瓦片,形成第0层瓦片矩阵;在第0层地图图片的基础上,按每2x2像素合成为一个像素的方法生成第1层地图图片,并对其进行分块,分割成与下一层相同大小的正方形地图瓦片,形成第1层瓦片矩阵;采用同样的方法生成第2层瓦片矩阵;…;如此下去,直到第N一1层,构成整个瓦片金字塔。

    首先用(如ArcGIS软件等)对地图数据进行处理,配成需要的图层方案,并保存方案。

    再用软件自带功能进行切片,切片过程中选择切片方案,根据所选方案不同,例如金字塔级别不同,地图切片范围不同等,都会影响到切片的速度。切片之后的数据称为瓦片。

     

    瓦片地图的进化

    以图片为介质的瓦片(栅格瓦片)打开了互联网地图的大门,互联网地图得以迅速普及。但是,随着地图的移动化和应用的逐渐深入,栅格瓦片至少遇到了两个问题:

    • 图片占用带宽和存储都较大,不利于地图在移动设备的应用;

    • 图片无法交互。

    受网络带宽开销和存储空间的限制,栅格瓦片地图在移动端一开始就显现出先天不足。这促使在移动端,使用矢量瓦片替代栅格瓦片。矢量瓦片采用和栅格瓦片相同的分级切割方案,所不同的是,瓦片数据以矢量形式存在。矢量瓦片体积小,可高度压缩,占用的存储空间比栅格瓦片要小上千倍。一方面减小网络带宽消耗,另一方面使地图离线成为可能。

     

    目前,在浏览器端,矢量瓦片也在逐渐成为互联网地图的主流技术。但这并不是说栅格瓦片将退出历史舞台。 互联网地图数据更新不频繁,单个瓦片内需要显示的地物数量和种类有限,矢量瓦片可预先生成,进行局部更新的代价也很小。矢量瓦片并不适合数据更新频繁,数据量大,渲染方式复杂多样的场景。

     

    可交互的栅格瓦片

    在GeoHey数据可视化服务中,就是根据输入配置参数,把用户数据在服务器端渲染成图片。在很多应用场景中,需要查看空间数据的属性信息。由于栅格瓦片无法保留数据的空间特征,瓦片中的点、线、面失去了交互能力。那么,如何显示百万量级的地块数据,又能让地块具有交互能力呢?

    [鼠标在地图上随意移动即可 全屏体验]

    在本周更新中,GeoHey数据可视化服务,增加了UTF-Grid能力,用以为栅格瓦片提供交互能力。 

    多任务切图原理

    随着测绘技术的发展,地图数据的体量越来越大,一般情况下,电子地图生成地图瓦片(以下简称切图)少则需要几天,多则一个月乃至更长时间。如何才能高效地生成地图瓦片,是众多技术人员共同关心的问题。

    多任务切图是将地图切图任务拆分成多个子任务,同时开启多个进程,每个进程自动领取并执行切图子任务。切图结果支持保存为本地瓦片,也支持保存到MongoDB数据库。多任务切图支持在一台计算机上开启多个进程执行切图任务,也支持在多个计算机分别开启多个进程,获取子任务执行切图任务。

     

    在线地图及参数

    Arcgis online上的瓦片地图为例,服务中有几个比较关键的使用到的参数。

    Height、Weight:每个瓦片的宽度和高度

    Resolution:每一个缩放级别下1像素代表的地图单位(投影坐标)

    Initial Extent:瓦片地图的范围

     

    展开全文
  • 高德地图的申请入流程 1、首先到 [ 高德地图API官网] 申请注册帐号 2、进入控制台,点击应用管理,我们创建一个新的应用: 3、为刚才创建的应用添加key: 随便输入一个key的名称,这里我们只讨论...
  • flutter集成高德地图

    2020-03-11 15:20:16
    flutter集成高德地图,包含定位,地图显示,触摸地图插入marker,marker自定义图标,地点搜索
  • 地图路线调用接口文档
  • 百度地图SDK功能

    千次阅读 2018-07-16 14:28:02
    百度地图SDK功能入 申请AK(API-Key) Android百度定位SDK自v4.0版本之后开始引入了百度地图开放平台的统一AK验证体系。 通过AK机制,开发者可以更方便、更安全地配置自身使用的百度地图资源(如设置服务...
  • 天气查询之高德地图天气预报接口

    千次阅读 2018-03-29 09:48:57
    content: '加载' }); var postData = { key: 自己申请的key, city: adcode,//城市名称或者编码 extensions: "all" }; $.ajax({ type: "get", url: ...
  • 小程序版高德地图完美运行demo,1: 需要设置请求合法域名,才能正常使用百度小程序 JavaScript API。 登录微信公众平台-> "设置" -> "开发设置" -> "request 合法域名" ->添加 api.map.baidu.com -> 点击"保存...
  • 百度地图api中文乱码

    千次阅读 2017-11-15 14:17:58
    在生成的代码最前面加上pageEncoding="UTF-8"%> 如果不行,则可以试下在 type="text/javascript" >标签上添加charset="UTF-8" ,比如
  • 百度地图api接口地址

    千次阅读 2018-05-14 11:14:54
    http://developer.baidu.com/map/jsdemo.htm#a1_2
  •  上一次我们使用百度地图实现基本的定位功能,下来我们继续实现搜索和定位,并使用LocationOverlay绘制定位位置,同时展示如何使用自定义图标绘制并点击时弹出泡泡  如图所示: 二、编写MyApplication类 ...
  • 标准地形图制作系列--图表的制作方法 by 李远祥 图表是标准地形图制作常用的方式,对于网络地图来说,从来不会出现图表这东西,但是在标准地形图里面,这却是强制的规范。虽然很多行外人员都不清楚图表是...
  • 关于腾讯地图开发的博客还是挺少的,此教程只是给一些初进入入腾讯地图文档的作为参考,我也是一知半解,但是对于一些需要简单地图的小伙伴就足够了,因为我也是看着官方文档来写的,所以以官方文档为准腾讯...
  • MFC嵌入在线地图

    2018-07-24 17:23:13
    内部实现了距离测量、标注图标、标注图标旋转、标签、多边形、右键菜单、WGS84坐标系和高德坐标系互转等功能。百度地图由于移动鼠标时VC调试窗口打印大量的异常信息,放弃了。使用VS2013开发,参考这份代码,起码能...
  • 文章目录申请入流程显示高德地图显示定位Marker 显示地图标记Route 路线规划Search 搜索 申请入流程 1、首先到 [ 高德地图API官网] 申请注册帐号 2、进入控制台,点击应用管理,我们创建一个新的应用: 3、为...
  • 百度地图API接口

    千次阅读 2016-01-17 11:10:29
    公司项目需要,需要使用php,easyui开发,... 首先针对WEB开发,百度地图提供的js api借口。具体怎么用,网上资料很多,但最浅显 最权威的还是到官网去最好了。官网有api接口说明,有demo,资料还是蛮全的。目前官
  • 代码并没有几行,但是实在是缺csdn的资源分,所以设置了5个资源分,见谅。
  • android 入百度地图sdk

    千次阅读 2018-02-08 15:51:48
    设置百度地图上的各种图标 加载方格的问题 地图 1.创建应用 入的是百度地图,首先去百度地图开放平台上添加应用。在http://lbsyun.baidu.com/apiconsole/key/create网址创建应用,没有百度账号的,...
  • OGC标准地图服务介绍

    千次阅读 2019-08-12 11:59:56
    文章精选: OGC与OGC标准:... 地图Web服务(WMS): http://blog.csdn.net/warrenwyf/article/details/5745569 http://blog.csdn.net/warrenwyf/article/details/5...
  • MUI框架使用百度地图(全网独一份最详细的图文教程) 文章目录MUI框架使用百度地图(全网独一份最详细的图文教程)注意事项效果一、申请百度地图权限二、配置应用三、在页面上使用四、测试效果以上步骤可以重复...
  • 快速入百度地图定位、描点

    千次阅读 2017-11-24 00:24:48
    这里整理一下入 百度地图 的流程,做一下记录(基于 Kotlin 语言开发)。第一步,肯定还是注册账号,创建应用了。先来到百度地图 首页 登录自己或公司的 百度账号(公司项目,一般都是由公司提供账号)。 登录...
  • 在开发过程发现 vue-baidu-map 封装的 BmPolyline 折线组件不能顺利绘制出带箭头的纹理。...而 IconSequence 类的实例对象则是在 BaiduMap 组件的 ready 事件拿到 BMap 类和 map 地图实例对象,然后依次调用 B
  • 制作动图还在学习~): 地图上的文字未展示,根据经纬度标记图,循环展示每个标记点的数据~ 一.如何引入百度地图 申请百度开发秘钥AK http://lbsyun.baidu.com/apiconsole/key 在vue的index.html里加入 <...
  • 了解完MAP(地图)里的属性之后,下来我们就来创建一个简单的MAP(地图)控件。 第一步:肯定是创建项目、起项目名、项目地址 PS:我这里以index的文件为名 第二步:我们来写 index.wxml 文件的代码 WXML文件代码:...
  • 关于百度api地图中中文乱码的处理

    千次阅读 2020-02-06 18:26:07
    地图中图标消失是原来的icon图片没有了,我们需要把 var icon = new BMap.Icon(“http://app.baidu.com/map/images/us_mk_icon.png” 修改成 var icon = new BMap.Icon(“http://map.baidu.com/ima...
  • 包括了带图标和文本的标注,连线以及图标。 1.关于坐标 说到地图,不得不说坐标。 我以为,GPS获取经纬度之后,把经纬度丢给地图就可以了。但那真的是自以为。 1.1 坐标系 来看看实际情况,以下是百度...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 72,277
精华内容 28,910
关键字:

地图中的接图表是什么