离线GoogleMapAPIV3加载本地谷歌地图并添加标注

利用离线GoogleMapAPIV3加载本地谷歌地图并添加标注

一、准备工作

下载GoogleMapAPIV3.rar。

二、下载地图

首先通过水经注下载器把谷歌卫星地图下载下来。

三、地图引擎部署

第一步：将附件中的“GoogleMapAPIV3.rar”下载后解压到“D:\Test”目录。下载地址：http://download.csdn.net/detail/zss793648186/8404603
第二步：将下载的瓦片文件拷贝到“D：Test”目录，并将“瓦片_GoogleMapTiles”重命名为“data”，如下图所示。

第三步：在浏览器中打开

“D:\Test\GoogleMapAPIV3\Example_GoogleMapAPI.html”，如果操作无误，将会显示离线的卫星地图，如下图所示。

第四步：写代码添加标注

准备两张标记图片命名为“image1”“image2”，放在GoogleMapAPI3目录下。

使用记事本打开“Example_GoogleMapAPI.html “网页源码，如下图

找到“function initialize() “，在最后写入添加marker的代码，例如

//向地图添加marker

var myLatlng1 = new google.maps.LatLng(35,110);

var myLatlng2 = new google.maps.LatLng(30,103);

var image1='image1.png';

var image2='image2.png';

var marker1 = new google.maps.Marker({

position:myLatlng1,

map:map,

icon:image1,

title:"image1"

});

varmarker2 = new google.maps.Marker({

position:myLatlng2,

map:map,

icon:image2,

title:"image2"

});

保存源文件，在浏览器中打开“Example_GoogleMapAPI.html “

至此加载Google地图，marker添加完成。

离线GoogleMapAPIV3加载本地谷歌地图并添加标注相关推荐

百度离线使用百度地图离线JavaScript API加载本地瓦片地图 -java教程
最近笔者几篇文章介绍了改百度离线的文章. 关联文章的地址 1.首先取获百度 JavaScript API 首先用浏览器开打 http://api.map.baidu.com/api?v=1.3 如下图 ...
leaflet加载多种形式谷歌地图（120）
第120个点击查看专栏目录本示例的目的是介绍演示如何在vue+leaflet中添加谷歌地图,有多种形式,分别是google路网图.google卫星影像图等. 直接复制下面的 vue+leaflet ...
GMap.NET入门详细教程【2】-------- 初始化并加载一张地图
GMap.NET入门下载 GMap.NET,并在VS中添加GMap.NET控件初始化并加载一张地图添加标记点.线.多边形为控件添加事件,在鼠标单击时打点初始化双击地图控件,编辑cs代码中的 ...
osgearth加载本地离线影像瓦片地图
osgearth加载本地离线影像瓦片地图案例说明本实例演示重新编译bing驱动直接加载本地离线影像瓦片地图. 本实例使用软件版本:osg3.3.1和osgEarth2.5 VC10编译环境(参考o ...
Android中使用WebChromeClient显示Openlayers加载本地GeoJson文件显示地图(跨域问题解决)
场景 Openlayers中加载GeoJson文件显示地图: Openlayers中加载GeoJson文件显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客上面加载显示GeoJso ...
ARCGIS进行地理配准及影像配准并加载到谷歌地球中查看矢量地图SHP
普通的地图图片如何能让其附有经纬度坐标和投影信息,如何能将普通的地图图片加载到诸如谷歌地球等相关的三维地球软件当中进行生产或学习使用呢,这就要用到gis当中常用的一种功能,叫做地理配准.地理配准并不复 ...
如何把Excel坐标加载到谷歌卫星地图上
通过RTK采集到的经纬度坐标点往往需要加载到卫星地图上和图上位置进行一下对比以确定是否准确,水经注万能地图就提供了加载Excel坐标点到地图上的方法,下面将一谷歌地图为例,介绍一下加载Excel坐标点 ...
leaflet-webpack 入门开发系列二加载不同在线地图切换显示（附源码下载）
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载 webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 ...
第18.1节 OE3.1实例-加载本地瓦片数据
致谢感谢网友提出这个问题.大家有问题也可以在评论区提出,有问必有答.如果涉及商业需求,需要较完整/详尽的工程,可以联系作者133-2459-8743. 问题描述网友提出要做一个基于osgearth ...

离线GoogleMapAPIV3加载本地谷歌地图并添加标注

离线GoogleMapAPIV3加载本地谷歌地图并添加标注相关推荐

最新文章

热门文章