2 xurui luo Xurui_Luo 于 2016.09.21 20:33 提问

求教JavaScript大神问题

这段代码的目的是实现:鼠标在地图上点一个点,会有标记产生;再点击另一个点,产生标记同时会在两个点之间划线。再点击一个点,它会与上一个点间划线。但是现在打开网页的话没有标记,也没有点。请教大神们这是为什么

这段代码的目的是实现:鼠标在地图上点一个点,会有标记产生;再点击另一个点,产生标记同时会在两个点之间划线。再点击一个点,它会与上一个点间划线。但是现在打开网页的话没有标记,也没有点。请教大神们这是为什么


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Maps JavaScript API v3 Example: Image MapTypes</title>
<link href="mapfiles/css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="mapapi.js"></script>
<script type="text/javascript" src="mapapi.js"></script>
<script>
  function CoordMapType(tileSize) {
    this.tileSize = tileSize;
  }

  CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
    var div = ownerDocument.createElement('DIV');
    var ymax = 1 << zoom;
        var y = ymax - coord.y - 1;

    //div.innerHTML = coord.x + "," + y + "," + zoom;
    //div.style.width = this.tileSize.width + 'px';
    //div.style.height = this.tileSize.height + 'px';
    //div.style.fontSize = '10';
    //div.style.borderStyle = 'solid';
    //div.style.borderWidth = '1px';
    //div.style.borderColor = '#AAAAAA';
    return div;
  };

  function LocalMapType() {}

  LocalMapType.prototype.tileSize = new google.maps.Size(256, 256);
  LocalMapType.prototype.maxZoom = 18;
  LocalMapType.prototype.minZoom = 1;
  LocalMapType.prototype.name = "\u672C\u5730";
  LocalMapType.prototype.alt = "\u663E\u793A\u672C\u5730\u5730\u56FE";
  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 ymax = 1 << zoom;
            var y = ymax - coord.y - 1;

      var strURL = "tilemap\\" + zoom + "\\" + coord.x + "\\" + coord.y + ".png";

      img.src = strURL;
      return img;
  };

  var localMapType = new LocalMapType(); 

var  myLatlng;
var  myOptions;
var  map;
var  poly;

  function initialize() {
    myLatlng = new google.maps.LatLng(34.251345, 108.946673);
    myOptions = {
      center: myLatlng,
      zoom: 16,
      streetViewControl: false,
      //\u6BD4\u4F8B\u5C3A\u63A7\u4EF6   
            scaleControl: true,
      mapTypeControlOptions: {
            mapTypeIds: ["local", google.maps.MapTypeId.ROADMAP]
        }
    };

    map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    //map.setMapTypeId('satellite');
    //map.MapTypes.insertAt(0, moonMapType);

    map.mapTypes.set('local', localMapType);
    map.setMapTypeId('local');

    google.maps.event.addListener(map, 'mouseover', function(event){
    var lat = event.latLng.lat();//纬度

    var lng =event.latLng.lng();//经度
            });

    map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));
  poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  });
  poly.setMap(map);

  // Add a listener for the click event
  map.addListener('click', addLatLng);
  }

function addLatLng(event) {
  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);

  // Add a new marker at the new plotted point on the polyline.
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: map
  });
} 
</script>
</head>
<body onload="initialize()">
  <!--<div id="map_canvas" style="width: 100%; height: 690px;"></div>-->
  <div id="map_canvas" style="width: 100%; height: 690px;"></div>
</body>
</html>


1个回答

showbo
showbo   Ds   Rxr 2016.09.22 16:14

你需要存储你的点才行啊,cookie或者storage。window.onlaod的时候从存储的地方加载点信息。都没存储肯定刷新后就没有数据了

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
大神求教
有谁清楚react native实现点击不同按钮渲染不同视图,其他地方包括背景不变,怎样实现,功能类似两种登录小按钮,不跳转,点击账号登录,或点击手机登录,求告知。...
C#写COM组件
求教求教求教求教求教求教求教
大神的神级js代码
刚刚在做一个排序的问题,因为后台返回的是一次性返回的,而前台则需要根据类型来分类并且排序,类型也是在后台返回的数据中! 这样的话,就不好用返回的size来排序,然后尹大神出现了,用以下方法,一次搞定排序问题!    var  indexFlag = {};     //先定义一个数组对象    indexFlag[imgType] = (indexFlag[imgType] == u
js 大神集合
1、阮一峰2、 张鑫旭3、淘宝UED
大神教你学JavaScript
鉴于时不时,有同学私信问我怎么学前端的问题。这里统一回复一下,如下次再遇到问我此问题同学,就直接把本文链接地址发给你了。首先说句题外话。关于有人管我叫大神的事情。个人感觉这跟你买东西时,人家管你叫帅哥一样,你答应与否都无妨。正题开始,前端怎么学,应该因人而异,别人的方法未必适合自己。就说说我的学习方法吧。我把大部分时间放在学习js上了。因为这个js的学习曲线,先平后陡。项目实践和练习啥的,我不说了...
求教一道关于求解最优化问题的编程问题~
求教一道关于求解最优化问题的编程问题~
新手求教Javascript问题
第一个 第二个 第三个 var link=document.getElementsByTagName("a"); for(var i in link){ if(document.addEventListener){ link[i].addEventListener("click",function(e){alert(e.target.tagName.toLowerCase());}
求教大神学习matlan
对于编程小白,应该怎样学习MATLAB啊
求教语义网知识图谱大神
最近在学语义网知识图谱这块,看了些书籍,现在比较疑惑。还是不知道怎样构建知识图谱,甚至用哪些开发工具都很迷惘,求大神赐教,如果能有一些相关资料就再好不过了。...
JS 代码调试经验总结(菜鸟必读)
任何一个编程者都少不了要去调试代码,不管你是高手还是菜鸟,调试程序都是一项必不可少的工作。一般来说调试程序是在编写代码之后或测试期修改Bug 时进行的,往往在调试代码期间更加能够体现出编程者的水平高低以及分析问题的准确度。不少初学者在寻找错误原因时,总是不得要领,花费了大量时间却无法解决一些最终证明是相当简单的Bug。   在长期解答 zTree 相关问题时,也的确发现很多的问题其实不算什么问