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币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!