Google 离线地图_谷歌地图离线包下载手机版

Google 离线地图_谷歌地图离线包下载手机版google离线地图展示和渲染由于项目的需要,在线地图无法满足业务需要,于是要做离线地图。经过一段时间的调研,最后选择了谷歌离线地图原因是通过现成的工具便可完成。感谢前人栽的树,在此整理总结。以下内容和代码是调研时准备的,仅供参考使用。离线地图制作技术:googlemapapi准备:googlemapapiv3离线版,地图切图工具,Google_Maps_API

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

google离线地图展示和渲染

由于项目的需要,在线地图无法满足业务需要,于是要做离线地图。经过一段时间的调研,最后选择了谷歌离线地图

原因是通过现成的工具便可完成。感谢前人栽的树,在此整理总结。

以下内容和代码是调研时准备的,仅供参考使用。

离线地图制作
技术:google map api
准备:google map api v3 离线版,地图切图工具,Google_Maps_API_V3文档和Google_Maps_JavaScript_API_V3_自用版本文档

google地图瓦片下载工具:http://download.csdn.net/detail/qq_19558705/9389057

google演示代码:http://download.csdn.net/detail/qq_19558705/9389076

离线地图的加载:
打开加载离线地图页面offlineMap.html

加载本地地图的函数:

function LocalMapType() {}
      
    LocalMapType.prototype.tileSize = new google.maps.Size(256, 256);
    LocalMapType.prototype.maxZoom = 13;  // 地图显示最大级别
    LocalMapType.prototype.minZoom = 9;   // 地图显示最小级别
    LocalMapType.prototype.name = "本地"; // 本地按钮,就是离线地图
    LocalMapType.prototype.alt = "显示本地地图";  // 显示本地地图可能会出现不清晰的现象
    LocalMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
    var img = ownerDocument.createElement("img");    
    img.style.width = this.tileSize.width + "px";
    img.style.height = this.tileSize.height + "px";
    
    // 访问本地图片的算法,不同的地图切图工具对应的算法不同
    var strURL = "gmap/tiles/" + zoom + "/" + coord.x + "/" + coord.y + ".png"; 
    img.src = strURL;
    return img;
    };
    
    var localMapType = new LocalMapType(); 


初始化地图函数:

function initialize() {
    // 以该经纬度为中心居中显示,注意google 一般先写纬度,在写经度
    var myLatlng = new google.maps.LatLng(30.51667,114.31667); 
    var myOptions = {
      center: myLatlng,
      zoom: 10,        // 初始化地图默认级别
      streetViewControl: false,     // 默认不显示全景图
      mapTypeControlOptions: {
        mapTypeIds: ["local", google.maps.MapTypeId.ROADMAP] // 地图类型为普通街道地图
        }
    };
    
    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    map.mapTypes.set('local', localMapType);
    map.setMapTypeId('local');
    // 设置地图瓦片大小为256*256
    map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));


html代码:

<body οnlοad="initialize()">
    <div id="map_canvas" style="width: 80%; height: 630px;"></div>
</body>

好像只能在body中写οnlοad=”initialize()” 函数。笔者打算用sitemesh整合离线地图页面时出现了问题,就是因为该函数只能在body中写,在div或者其他标签中不生效。若有其他办法解决请赐教。

以上便可以加载离线地图
如果需要修改显示的离线地图,一般只需要修改一下内容即可
LocalMapType函数中的 LocalMapType.prototype.maxZoom,LocalMapType.prototype.minZoom, strURL,
initialize函数中的 myLatlng,zoom

离线地图源的制作:
打开GoogleMap切图工具文件->GoogleTileDownload->修改conf.properties文件
修改的内容:
zoom=2 : 地图显示的等级
leftTopLnglat=114, 31 : 地图左上角经纬度
rightBottomLnglat=115, 30 : 地图右下角经纬度
具体方法看google离线地图下载工具中的readme.txt文件。该工具生产的地图源图片的规律满足上面的strURL的加载算法

在离线的情况下渲染离线地图:
1.加载图片:

var image = 'icon/0.png'; // 存放图片的路径
    var myLatLng = new google.maps.LatLng(30.51667,114.31667); // 图片显示的地方
    var beachMarker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: image
});



2.画折线:

var flightPlanCoordinates = [
    new google.maps.LatLng(30.51667,114.31667),
    new google.maps.LatLng(30.50667,114.32667),
    new google.maps.LatLng(30.40667,114.30667)
    ];
    var flightPath = new google.maps.Polyline({
       path: flightPlanCoordinates,
       strokeColor: "#FF0000",
       strokeOpacity: 1.0,
       strokeWeight: 2
    });
     
    flightPath.setMap(map); // 如果想还原去掉折线用:flightMap.setMap(null)

3.画圆:

 var citymap = {};  
    citymap['chicago'] = {  
    center: new google.maps.LatLng(31.18439, 121.49454),  
    population: 284259 
    }; 
    citymap['newyork'] = {  
    center: new google.maps.LatLng(31.38439, 121.52454),  
    population: 814319 
    };
    var cityCircle;

    for (var city in citymap) {  
    var populationOptions = {  
      strokeColor: "#FF0000",  
      strokeOpacity: 0.8,  
      strokeWeight: 1,  
      fillColor: "#FF0000",  
      fillOpacity: 0.35,  
      map: map,  
      center: citymap[city].center,  
      radius: citymap[city].population / 1000  
    };  
    cityCircle = new google.maps.Circle(populationOptions);  
    }


4.画多边形:

// 如果是多边形,最后一个点不需要写成第一个点就可以自动连起来
     var triangleCoords = [  
     new google.maps.LatLng(30.51667,114.31667),
         new google.maps.LatLng(30.50667,114.42667),
         new google.maps.LatLng(30.40667,114.30667)
    ];  
      
    bermudaTriangle = new google.maps.Polygon({  
        paths: triangleCoords,  
        strokeColor: "#FF0000",  
        strokeOpacity: 0.8,  
        strokeWeight: 2,  
        fillColor: "#FF0000",  
        fillOpacity: 0.35  
    });  
      
    bermudaTriangle.setMap(map); 


以上便是我项目中用到的内容,仅供参考。若有不对的地方,或者更好的方法。请指出。转载请注明来源:http://blog.csdn.net/qq_19558705

个人主页:http://www.itit123.cn/ 更多干货等你来拿

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/191611.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • MySQL 有这一篇就够(呕心狂敲37k字,只为博君一点赞!!!)

    MySQL 有这一篇就够(呕心狂敲37k字,只为博君一点赞!!!)文章目录前言一、SQL简述1.SQL的概述2.SQL的优点3.SQL的分类二、数据库的三大范式三、数据库的数据类型1.整数类型2.浮点数类型和定点数类型九、MySQL数据表简单查询1.简单查询概述2.查询所有字段(方法不唯一只是举例)3.查询指定字段(sid、sname)4.常数的查询5.从查询结果中过滤重复数据6.算术运算符(举例加运算符)十、函数1.聚合函数1.1、count()1.2、max()1.3、min()1.4、sum()1.5、avg()2.其他常用函数2.1、时间函数2.2、字符串函数2.

  • PHP递归算法_php递归函数详解

    PHP递归算法_php递归函数详解递归算法的实现方法是有多种的,如通过“静态变量”、“全局变量”、“引用传参”的方式:静态变量的方法:<?phpfunctioncall(){static$i=0;echo$i.”;$i++;if($i<10){call();}}call();输出:012345678…

  • mongodb创建数据库命令_下载mongodb怎么创建仓库

    mongodb创建数据库命令_下载mongodb怎么创建仓库MongoDB创建数据库1.打开mongoshell2.创建数据库3.卸载数据库MongoDB与关系型数据相比,首先,它们都是数据库;但是型数据库是用表(table)来存储数据,MongoDB则用集合(Collection)来存;关系型数据的表的记录是行(Row),则MongoDB的集合的记录则是文档(Document);关系型数据库的表里每一条记录都由若干列(Column)组成,而MongoDB的集合中每个文档都由若干字段(Field)组成。1.打开mongoshell$mongo2.创建

    2022年10月22日
  • vector>初始化_vector如何重置

    vector>初始化_vector如何重置vector<int>a(nums.begin(),nums.end());注意:vector<int>a(nums.begin()+1,nums.end()-2);中a包含nums.begin()+1,不包含nums.end()-2,也就是包含的区间是左闭右开区间

  • JMM内存模型介绍「建议收藏」

    JMM内存模型介绍「建议收藏」一、JMM的定义1.什么是JMM《Java虚拟机规范》中曾试图定义一种“Java内存模型”(JavaMemoryModel简称JMM)来屏蔽各种硬件和操作系统的内存访问差异,以实现让Java程序在各种平台下都能达到一致的内存访问效果。Java内存模型是一种抽象的概念,并不真实存在,它描述的是一组规则或规范,通过这组规范定义了程序中各个变量(包括实例字段,静态字段和构成数组对象的元素)的访问方式。JMM是围绕原子性,有序性、可见性展开。2.主内存与工作内存Java内存模型的主要目的是定义程

    2022年10月27日
  • js 图片加载失败处理方法「建议收藏」

    js 图片加载失败处理方法「建议收藏」个人github:https://github.com/qiilee 欢迎follow在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败;这样就会显示一个很难看的坏图片缩略图;下面介绍两种方法,解决这个问题:1、如果在你的项目中有引入jQuery插件,你可以使用error([[data],fn])这个函数;$("img").error(function(){  //当图…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号