google地图的路线实现代码

 更新时间:2009年08月20日 01:18:40   作者:  
google地图的路线实现代码,大家可以参考下,实现自己想要的功能。
复制代码 代码如下:

<script language="javascript" type="text/javascript">
//add by ahuinan 2009-8-17
//initialize(23.165613663312594,113.35968017578125)
var map;
var gdir;
var marker2;
var hasMarker = false;
var hotelLatLng = new GLatLng(<%=initxy %>);//初始化酒店的坐标
var polyline;
var points = [];
points[1] = hotelLatLng;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("divMap"), { googleBarOptions: { showOnLoad: true} });
gdir = new GDirections(map);
map.setCenter(hotelLatLng, 9);
map.addControl(new GOverviewMapControl());
map.addControl(new GLargeMapControl());

//加入搜索框
map.enableGoogleBar();

map.enableScrollWheelZoom();

//创建酒店的标注,不可拖动
var hotelMarker = new GMarker(new GLatLng(<%=initxy %>));
map.addOverlay(hotelMarker);

//鼠标左键可以建立一个标记,
GEvent.addListener(map,"click",function(overlay,latlng,overlaylatlng){
if(latlng == null || hasMarker == true){
return;
}
var greenIcon = new GIcon(G_DEFAULT_ICON);
greenIcon.image = "../googlemap/green-dot.png";
greenIcon.iconSize = new GSize(32,32);
greenIcon.iconAnchor = new GPoint(16,32);
greenIcon.shadowSize=new GSize(56,33);
marker2 = new GMarker(latlng,{draggable: true,icon:greenIcon});
map.addOverlay(marker2);

GEvent.addListener(marker2,"dragend",function(){
points[0] = marker2.getLatLng();
gdir.loadFromWaypoints(points,{"preserveViewport":true});



})
GEvent.addListener(gdir, "addoverlay", function(){
for (var i=0; i<=gdir.getNumRoutes(); i++){
var originalMarker = gdir.getMarker(i);
map.removeOverlay(originalMarker);
}
polyline = gdir.getPolyline();


polyline.setStrokeStyle({color:"red",weight:2,opacity:1});
// map.addOverlay(polyline);

});
hasMarker = true;
points[0] = latlng;
gdir.loadFromWaypoints(points,{"preserveViewport":true});

})
}
}
//按下添加按钮
function add(){
if(points.length == 1){
alert("没有线路,终止操作");
}else{
window.opener.document.getElementById("txtHI_MapMarkDesc").value = window.opener.document.getElementById("txtHI_MapMarkDesc").value+"\n"+document.getElementById("txtName").value+"||||"+document.getElementById("txtType").value+"||||"+points[0]+"\n";
window.close();
}
}
window.onload = function() {
initialize()
}
</script>

相关文章

  • bootstrap导航条实现代码

    bootstrap导航条实现代码

    这篇文章主要为大家详细介绍了bootstrap导航条的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JavaScript实现捕获鼠标坐标

    JavaScript实现捕获鼠标坐标

    这篇文章主要为大家详细介绍了JavaScript实现捕获鼠标坐标,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-04-04
  • 微信小程序日历插件代码实例

    微信小程序日历插件代码实例

    这篇文章主要介绍了微信小程序日历插件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • JS实现对JSON数据进行冒泡排序

    JS实现对JSON数据进行冒泡排序

    JavaScript 是一种广泛使用的脚本语言,JSON是一种常见的数据格式,这篇文章主要来探讨一下如何使用 JavaScript 对 JSON 数据进行冒泡排序,感兴趣的可以了解一下
    2023-06-06
  • 微信小程序开发之录音机 音频播放 动画实例 (真机可用)

    微信小程序开发之录音机 音频播放 动画实例 (真机可用)

    这篇文章主要介绍了微信小程序开发之录音机 音频播放 动画实例 (真机可用),这里整理了详细的代码,有需要的小伙伴可以参考下。
    2016-12-12
  • 原生JS实现非常好看的计数器

    原生JS实现非常好看的计数器

    这篇文章主要为大家详细介绍了原生JS实现非常好看的计数器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • d3.js实现自定义多y轴折线图的示例代码

    d3.js实现自定义多y轴折线图的示例代码

    本篇文章主要介绍了d3.js实现自定义多y轴折线图的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 前端报错Failed to resolve component: smile-outlined If this is a native custom解决

    前端报错Failed to resolve component: smile-outlined If thi

    这篇文章主要为大家介绍了前端报错 Failed to resolve component: smile-outlined If this is a native custom 的问题分析解决,有需要的朋友可以借鉴参考下
    2023-06-06
  • 深入浅出JavaScript前端中的设计模式

    深入浅出JavaScript前端中的设计模式

    这篇文章主要介绍了JavaScript前端中的设计模式,设计模式是一套被反复使用,多数人知晓的,经过分类编目的,代码设计经验的总结,感兴趣想要详细了解可以参考下文
    2023-05-05
  • 一些常用的JavaScript函数(json)附详细说明

    一些常用的JavaScript函数(json)附详细说明

    一些常用的JavaScript函数(json)附详细说明,学习js的朋友可以参考下。
    2011-05-05

最新评论