怎么把用html经纬度在地图上标记点

来源：蜘蛛抓取(WebSpider) 时间：2017-09-03 10:34 标签： html获取经纬度
百度地图根据地点获取经纬度
html和css代码如下：
js代码如下：
效果图如下：利用html5获取经纬度并且在google map显示位置
记得之前我曾经介绍过，在那篇文章我只是简单介绍了html5可以获取经纬度。后来我在文中用详细的demo和代码说明了具体的操作方法，并且在里介绍了html5在地理位置方面的其他函数，尽管有的无法获取，不过可以预见不久的将来html5将在GIS开发方面大显神威。 记得我在文章中，通过html5获取了当前的经纬度，但是具体的位置我是通过google map来验证的，并且是手动输入，这几天我查看了下google map js api v3版本，发现原来这个接口也很简单，于是就写了这篇文章，算是之前的后续。 示例代码：var myLatlng=new google.maps.LatLng(30, 114);
var mapOptions = {
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title:&小编的地址&
//将标记显示在地图中
marker.setMap(map);
这里只是一个简单的示例代码,通过这几行函数再加上google map js api就可以通过html5获取经纬度并且显示在地图上面了。
关于这个DEMO
解压密码：
malagis.com
PS：注意，密码是malagis.com，没有前面的http,不要从浏览器直接复制啊，亲！
如果本文对您有所帮助，欢迎对我们团队进行打赏捐助，让我们在传播3S的路上可以走得更远。
GIS爱好者，学GIS，更爱玩GIS。
如您有疑问，可在文末留言，或到QQ群提问。
本站QQ群(一)：(满)
本站QQ群(二)：(新)
微信公众号：malagis，扫描右边二维码直接关注。匿名用户不能发表回复！|扫二维码下载作业帮
3亿+用户的选择
下载作业帮安装包
扫二维码下载作业帮
3亿+用户的选择
请问怎么画地图?已知一个闭合区域的四个顶点的经纬度和其边线,怎么把它画在地图上?
作业帮用户
扫二维码下载作业帮
3亿+用户的选择
如果你现有的地图标注了经纬度,就可以直接把测量的坐标点上去,如果你的地图是平面直角坐标的,就需要把测量的经纬度进行投影,方面点上去.
为您推荐：
其他类似问题
扫描下载二维码5542人阅读
openlayers学习（5）
&!DOCTYPE html&
根据经纬度在地图上添加标记
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&!-- 加载OpenLayers 类库 --&
&script type=&text/javascript& src=&http://www.openlayers.cn/olapi/OpenLayers.js&&
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
&script type=&text/javascript&&
var basePath = '198.165.26.54';
var jsonStr='{&MMSI&:&&,&Long&:&116.412&,&Lat&:&39.956&}';
var shipInfo = eval('(' + (jsonStr == && ? &[]& : jsonStr) + ')');
function init() {
var option = {
controls: [new OpenLayers.Control.Navigation(), //导航
new OpenLayers.Control.PanZoomBar(), //放大缩小
new OpenLayers.Control.Scale(),
new OpenLayers.Control.ScaleLine(),
new OpenLayers.Control.OverviewMap()],
numZoomLevels: 15 //,//最大级别
map = new OpenLayers.Map('map', option);
layer = new OpenLayers.Layer.WMTS({
name: &中国底图(矢量)&, //测试地址
url: &http://t0.tianditu.com/vec_c/wmts&, //中国底图
layer: &vec&,
style: &default&,
matrixSet: &c&,
format: &tiles&,
isBaseLayer: true
//测试使用，正式环境去掉
var tdt2 = new OpenLayers.Layer.WMTS({
name: &中国底图注记&,
url: &http://t0.tianditu.com/cva_c/wmts&, //中国底图注记
layer: &cva&,
style: &default&,
matrixSet: &c&,
format: &tiles&,
isBaseLayer: false
map.addLayers([layer,tdt2]);
addMarker();//添加标记
map.setCenter(new OpenLayers.LonLat(116.5, 40).transform(
new OpenLayers.Projection(&EPSG:4326&), map.getProjectionObject()),7);//默认放大级别7
//map.zoomToMaxExtent();
//显示鼠标位置坐标
map.addControl(new OpenLayers.Control.MousePosition({displayProjection:'EPSG:4326'}));
//添加标记
function addMarker(){
var markers = new OpenLayers.Layer.Markers(&分站&);
//设置显示坐标
var x=0,y=0;
//图片显示
var icon = new OpenLayers.Icon('marker-gold.png',{w: 21, h: 25}, {x: -10.5, y: -25});
var feature = new OpenLayers.Feature(markers,new OpenLayers.LonLat(shipInfo.Long,shipInfo.Lat).transform(
new OpenLayers.Projection(&EPSG:4326&), map.getProjectionObject()),{'icon': icon});
marker = feature.createMarker();
markers.addMarker(marker);
map.addLayer(markers);
&body onload=&init()&&
&div id=&map& style=&width: 100%;
height: 100%;&&
访问：17595次
排名：千里之外

我要回帖

更多关于 html获取经纬度 的文章

 

随机推荐